Showing posts with label autoeventwireup. Show all posts
Showing posts with label autoeventwireup. Show all posts

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.

Posted by castironertg at 1:43 PM 0 comments
Labels: , , , , , , , , , , , , , ,

Wednesday, March 21, 2012

How can I get this ModalPopupExtender to work with Master Pages?

Here's some pretty simple code that displays a modal pop-up when a button is pressed:

1<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="5_UpdateProgModal.aspx.cs" Inherits="_5_UpdateProgModal" %>23<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>ASP.Net AJAX 201</title>
7 <style type="text/css">
8 .error{color: #f00;}
9 .message{color: #000;}
10 .updating{margin: 12px;}
11 .modalBackground
12 {
13 background-color:#00f;
14 filter:alpha(opacity=40);
15 opacity:0.40;
16 }
17 .updateProgress
18 {
19 border: solid 1px #333;
20 background-color:#fff;
21 position:absolute;
22 text-align: center;
23 width:160px;
24 height:60px;
25 }
26 .updateProgressMessage
27 {
28 margin:3px;
29 vertical-align: middle;
30 }
31 </style>
32</head>
33<body>
34 <form id="form1" runat="server">
35 <asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="3" />
36 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
37 <ContentTemplate>
38 <div>
39 <asp:Button ID="btnShowTime" runat="server" Text="Show Time" OnClick="btnShowTime_Click" />
40 <asp:Button ID="btnError" runat="server" Text="Throw Error" OnClick="btnError_Click" />
41 <asp:Button ID="btnTimeout" runat="server" Text="Timeout" OnClick="btnTimeout_Click" />
42 </div>
43 <div>
44 <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label>
45 </div>
46 </ContentTemplate>
47 </asp:UpdatePanel>
48 <asp:Panel ID="pnlProg" runat="server" CssClass="updateProgress" style="display:none">
49 <div class="updating">
50 <img src="images/ajax-loader.gif" alt="Processing..." />
51 <span class="updateProgressMessage">Processing...</span>
52 </div>
53 </asp:Panel>
54 <AjaxToolkit:ModalPopupExtender
55 ID="mdlProgress"
56 runat="server"
57 TargetControlID="pnlProg"
58 PopupControlID="pnlProg"
59 BackgroundCssClass="modalBackground"/>
60 </form>
61 <script type="text/javascript">
62 var prm = Sys.WebForms.PageRequestManager.getInstance();
63 prm.add_beginRequest(beginRequest);
64 prm.add_endRequest(endRequest);
65
66 function beginRequest(sender, args)
67 {
68 $find("mdlProgress").show();
69 }
70
71 function endRequest(sender, args)
72 {
73 $find("mdlProgress").hide();
74
75 var messageSpan = $get("<%= lblMessage.ClientID%>");
76 if (args.get_error() != undefined)
77 {
78 var errorMessage = args.get_error().message;
79 if (args.get_error() && args.get_error().name === 'Sys.WebForms.PageRequestManagerTimeoutException') {
80 errorMessage = "Your operation has timed out.";
81 }
82 args.set_errorHandled(true);
83 messageSpan.className = "error";
84 messageSpan.innerHTML = errorMessage;
85 }
86 }
87 </script>
88</body>
89</html>
90

The code behind for the buttons just does a Threading.Sleep() for testing purposes so I'm not going to bother posting that code.

The problem is, I want to use this in a master page... However, when I put all this code in my master page, it doesn't work. I end up getting Javascript errors that I can't figure out. Any ideas as to why the above code works perfect yet won't work in a master page?

Hi,

Change

$find("mdlProgress")

to:

$find("<%=mdlProgress.ClientID%>")

Then, no matter master page or page, it works!

Best Regards,


The code posted by you is simple and handy and I like its simplicity for quick trials..


That was it.

I figured it was my lack of Javascript knowledge. :) Thanks so much!

Posted by castironertg at 9:36 PM 0 comments
Labels: , , , , , , , , , , , , , , , , ,
Subscribe to: Posts (Atom)