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!
No comments:
Post a Comment