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.
Download: Full Source
