If you ever like to show a Modal Progress dialog like the above for any ajax operation no matter which Update Panel or Web Service call is responsible for it, the following code will do the same.
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> [System.Web.Services.WebMethod()] public static string GetDate() { //Doing a fake delay for 3 seconds System.Threading.Thread.Sleep(3000); return DateTime.Now.ToString(); } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { lblDate1.Text = lblDate2.Text = DateTime.Now.ToString(); } } protected void btnDate1_Click(object sender, EventArgs e) { //Doing a fake delay for 3 seconds System.Threading.Thread.Sleep(3000); lblDate1.Text = DateTime.Now.ToString(); } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Modal Dialog Progress</title> <style type="text/css"> .modalBackground { background-color:#e6e6e6; filter:alpha(opacity=60); opacity:0.60; } </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> </asp:ScriptManager> <fieldset> <legend>UpdatePanel</legend> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lblDate1" runat="server"></asp:Label> <asp:Button ID="btnDate1" runat="server" Text="Get Date" OnClick="btnDate1_Click" /> </ContentTemplate> </asp:UpdatePanel> </div> </fieldset> <fieldset> <legend>PageMethods</legend> <div> <asp:Label ID="lblDate2" runat="server"></asp:Label> <asp:Button ID="btnDate2" runat="server" Text="Get Date" OnClientClick="return btnDate2_Click()" /> </div> </fieldset> <asp:Panel ID="pnlProgress" runat="server" style="background-color:#ffffff;display:none;width:400px"> <div style="padding:8px"> <table border="0" cellpadding="2" cellspacing="0" style="width:100%"> <tbody> <tr> <td style="width:50%"></td> <td style="text-align:right"> <img alt="" src="indicator-big.gif" /> </td> <td style="text-align:left;white-space:nowrap"> <span style="font-size:larger">Loading, Please wait ...</span> </td> <td style="width:50%"></td> </tr> </tbody> </table> </div> </asp:Panel> <ajaxToolKit:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="pnlProgress" PopupControlID="pnlProgress" BackgroundCssClass="modalBackground" DropShadow="true" /> </form> <script type="text/javascript"> Sys.Net.WebRequestManager.add_invokingRequest(onInvoke); Sys.Net.WebRequestManager.add_completedRequest(onComplete); function onInvoke(sender, args) { $find('<%= mpeProgress.ClientID %>').show(); } function onComplete(sender, args) { $find('<%= mpeProgress.ClientID %>').hide(); } function btnDate2_Click() { PageMethods.GetDate ( function(result) { var lbl = $get('<%= lblDate2.ClientID %>'); if (document.all) { lbl.innerText = result; } else { lbl.textContent = result; } } ); return false; } function pageUnload() { Sys.Net.WebRequestManager.remove_invokingRequest(onInvoke); Sys.Net.WebRequestManager.remove_completedRequest(onComplete); } </script> </body> </html>The main trick is hooking the two special events of Sys.Net.WebRequestManager class. This class is responsible for managing all kinds of communication with the server, even a manual invoke of a Sys.Net.WebRequest class will bring this class into action. It fires the invokingRequest before making an Ajax call and fires the completeRequest once the method completes. We are simply showing/hiding the modal popup extender in these events.
Responses
0 Respones to "Showing Modal Progress Dialog in all Ajax Operation"
Post a Comment