Monday, March 26, 2012

How Do I Dynamically Load Pages Into An UpdatePanel

My code is as follows:

<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true"CodeFile="AnyModule1.aspx.vb"Inherits="_Default" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>My Module</title>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server">

<Scripts>

<asp:ScriptReferencePath="WebRequest.js"/>

</Scripts>

</asp:ScriptManager>

<divstyle="text-align: center">

<tableborder="0"cellpadding="0"cellspacing="0"style="width: 100%">

<tr>

<tdalign="left"style="width: 100px">

<asp:MenuID="Menu1"runat="server"BackColor="#F7F6F3"DynamicHorizontalOffset="2"

Font-Names="Verdana"Font-Size="0.8em"ForeColor="#7C6F57"StaticSubMenuIndent="10px">

<StaticMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/>

<DynamicHoverStyleBackColor="#7C6F57"ForeColor="White"/>

<DynamicMenuStyleBackColor="#F7F6F3"/>

<StaticSelectedStyleBackColor="#5D7B9D"/>

<DynamicSelectedStyleBackColor="#5D7B9D"/>

<DynamicMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/>

<Items>

<asp:MenuItemText="File"Value="File">

<asp:MenuItemText="Find Patient"Value="Find Patient"NavigateUrl="javascript:PostWebRequest('FindPatient.aspx','divContent1');"></asp:MenuItem>

<asp:MenuItemText="Last Patient"Value="Last Patient"></asp:MenuItem>

<asp:MenuItemText="Find Episode"Value="Find Episode"NavigateUrl="javascript:PostWebRequest('FindEpisode.aspx','divContent2');"></asp:MenuItem>

</asp:MenuItem>

</Items>

<StaticHoverStyleBackColor="#7C6F57"ForeColor="White"/>

</asp:Menu>

</td>

</tr>

<tr>

<tdstyle="width: 100px"align="left">

<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"ChildrenAsTriggers="False">

<ContentTemplate>

<divid='divContent1'style="width: 100px; height: 100px">

</div>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="Menu1"EventName="MenuItemClick"/>

</Triggers>

</asp:UpdatePanel>

</td>

</tr>

<tr>

<tdstyle="width: 100px"align="left">

</td>

</tr>

</table>

</div>

<br/>

<div>

</div>

</form>

<divid='divContent2'style="width: 100px; height: 100px">

</div>

</body></html>

<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true"CodeFile="AnyModule1.aspx.vb"Inherits="_Default" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>My Module</title>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server">

<Scripts>

<asp:ScriptReferencePath="WebRequest.js"/>

</Scripts>

</asp:ScriptManager>

<divstyle="text-align: center">

<tableborder="0"cellpadding="0"cellspacing="0"style="width: 100%">

<tr>

<tdalign="left"style="width: 100px">

<asp:MenuID="Menu1"runat="server"BackColor="#F7F6F3"DynamicHorizontalOffset="2"

Font-Names="Verdana"Font-Size="0.8em"ForeColor="#7C6F57"StaticSubMenuIndent="10px">

<StaticMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/>

<DynamicHoverStyleBackColor="#7C6F57"ForeColor="White"/>

<DynamicMenuStyleBackColor="#F7F6F3"/>

<StaticSelectedStyleBackColor="#5D7B9D"/>

<DynamicSelectedStyleBackColor="#5D7B9D"/>

<DynamicMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/>

<Items>

<asp:MenuItemText="File"Value="File">

<asp:MenuItemText="Find Patient"Value="Find Patient"NavigateUrl="javascript:PostWebRequest('FindPatient.aspx','divContent1');"></asp:MenuItem>

<asp:MenuItemText="Last Patient"Value="Last Patient"></asp:MenuItem>

<asp:MenuItemText="Find Episode"Value="Find Episode"NavigateUrl="javascript:PostWebRequest('FindEpisode.aspx','divContent2');"></asp:MenuItem>

</asp:MenuItem>

</Items>

<StaticHoverStyleBackColor="#7C6F57"ForeColor="White"/>

</asp:Menu>

</td>

</tr>

<tr>

<tdstyle="width: 100px"align="left">

<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"ChildrenAsTriggers="False">

<ContentTemplate>

<divid='divContent1'style="width: 100px; height: 100px">

</div>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="Menu1"EventName="MenuItemClick"/>

</Triggers>

</asp:UpdatePanel>

</td>

</tr>

<tr>

<tdstyle="width: 100px"align="left">

</td>

</tr>

</table>

</div>

<br/>

<div>

</div>

</form>

<divid='divContent2'style="width: 100px; height: 100px">

</div>

</body>

</html>

As you can see from above I am trying to dynamically load webpages (FindPatient.aspx and FindEpisode.aspx) into UpdatePanel1 which holds a DIV (divContent1) when the relevant menu item is clicked.

I have two problems:

1. Using the javascript function that I call to replace the innerhtml of divContent1 with the selected webpage, causes errors on the page and no popluating of the DIV. However if I point the code to divContent2 - outside the update panel the innerhtml function works.

2. I need the called page to be displayed in the updatepanel because I dont want the menuitems on the base page to be refreshed each time the content pages causes a refresh.

Can anyone help?

Please

hello.

well, this is not the correct way of doing this. the updatepanel will let you refresh parts of a page, but it won't let you load a page on another. if that is what you want, then you should consider using an iframe.


Thanks for your quick response, I have traditionally used iFrames but understood that they were not an ideal solution. Sites such asiGoogle seem to suggest that AJAX does allow webpages to be displayed in an updatepanel because you can click on one of the YouTube videos and it will refresh the embedded page while leaving those areas outside it untouched. That is the kind of functionality that I am trying to achieve.

Any further ideas would be very much appreciated.


hello-

yes, that is correct. if you're into updatepanels, then i'd refactor the site so that each page is transformed into a user control which is loaded by the udpatepanel during partial postbacks. if you do know how to write js, then you shoudl do it all in the client side: you'd use web services to get the data and then js to replace the contents of the place holders. do notice that this is really hard to do and you'll have to be a good js coder (but it's the correct way of doing stuff, if you ask me that is)


Will VS 2008 help with JS coding with its builtin intellisense and debugging?


Help yes, but it's far from perfect. It infers as much as it can, but a lot it just can't guess at.

No comments:

Post a Comment