Ketone Cops

August 21, 2009

Modal Popup with Progress

Filed under: Ajax,ASP.NET 2.0,Javascript,programming — delroger @ 12:42 pm

I was interested in using a Modal Popup to prevent trigger-happy clicking by impatient users when my web app was doing a processing job for a few seconds.  I came across Matt Berseth’s excellent work here http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html and decided that it would be useful to make a class file for Sample 3 on that page.  So here it is…

This assumes that you have a modal popup extender and a panel on your page that will display the animated gif.  This is the code for mine (almost identical to Matt Berseth’s):

<ajaxToolKit:ModalPopupExtender
ID=”mdlPopup” runat=”server” TargetControlID=”pnlPopup”
PopupControlID=”pnlPopup” BackgroundCssClass=”modalBackground”  />
<asp:Panel ID=”pnlPopup” runat=”server” CssClass=”updateProgress” style=”display:none”>
<div align=”center” style=”margin-top:13px;”>
<img src=”Images/ajax-loader.gif” />
<span>Processing…</span>
</div>
</asp:Panel>

The class file then looks like the code below. It contains one Sub that takes the name of your modal popup and the delay before displaying it (in milliseconds) as parameters, injecting the necessary javascript into your page for displaying the modal popup/progress when processing is occurring.

Public Class clsModalProgress
Public Shared Sub DoModalProgress(ByVal mdl As AjaxControlToolkit.ModalPopupExtender, ByVal delay As Integer)
Dim pg As Page = HttpContext.Current.Handler
If Not pg Is Nothing Then
If Not pg.ClientScript.IsStartupScriptRegistered(“progressScript”) Then
Dim t As Type
t = pg.GetType()
pg.ClientScript.RegisterStartupScript(t, “progressScript”, _
“Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);” & Environment.NewLine & _
“Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);” & Environment.NewLine & _
“var count;” & Environment.NewLine & _
“function beginRequest(sender, args){” & Environment.NewLine & _
”  count = setTimeout(“”showProgress()””, ” & delay & “);” & Environment.NewLine & _
“}” & Environment.NewLine & _
“function showProgress(){” & Environment.NewLine & _
”  $find(‘” & mdl.ClientID & “‘).show();” & Environment.NewLine & _
“}” & Environment.NewLine & _
“function endRequest(sender, args) {” & Environment.NewLine & _
”  clearTimeout(count);” & Environment.NewLine & _
”  $find(‘” & mdl.ClientID & “‘).hide();” & Environment.NewLine & _
“}”, True)
End If
End If
End Sub
End Class

You can simply call it in the Page_Load or Page_Prerender subs like this:

clsModalProgress.DoModalProgress(mdlPopup, 100)

In this case, the modal popup will display if processing take longer than one-tenth of a second.

Blog at WordPress.com.