Click here to Skip to main content
11,716,938 members (84,838 online)
Click here to Skip to main content

Atlas: ModalUpdateProgress - An UpdateProgress Control in Modal Popup Style

, 26 Jun 2007 670.9K 5K 157
Rate this:
Please Sign up or sign in to vote.
A progress indicator control that works in a modal popup style.

Sample Image - ModalUpdateProgress.jpg


ASP.NET AJAX has a cool UpdateProgress control that provides a visual indicator while one or more of the UpdatePanel controls are being updated. However, it will be much more useful if all other elements on the page could be disabled when the UpdateProgress is shown. This led me to build the ModalUpdateProgress control in which the UpdateProgress will act as a modal popup.

How UpdateProgress Control Works

If you open up System.Web.Extensions.dll using reflector, you will be able to look up how UpdateProgress control works. Simply put, it implements IScriptControl's two methods GetScriptDescriptors() and GetScriptReferences(). According to the AJAX documentation, GetScriptDescriptors() returns a list of components, behaviors, and client controls required for the UpdateProgress control's client functionality; and GetScriptReferences() returns a list of client script library dependencies for the UpdateProgress control. In GetScriptDescriptors(), the UpdateProgress control registers a ScriptControlDescriptor with type name Sys.UI._UpdateProgress, which is a class available in MicrosoftAjaxWebForms.js (MicrosoftAjaxWebForms.js is one of the ASP.NET AJAX client script libraries, embedded in the System.Web.Extensions.dll). It is pretty straightforward to understand the logic in Sys.UI._UpdateProgress by looking into the debug version of MicrosoftAjaxWebForms.js.

Building the ModalUpdateProgress Control

First, we derive ModalUpdateProgress from UpdateProgress so that we can reuse its existing properties and interface. Then we need to override the two methods GetScriptDescriptors() and GetScriptReferences(), and implement the client-side script component. We will name the client script component as Sys.UI._ModalUpdateProgress, which in turn will be a sub class of Sys.UI._UpdateProgress.

The following is the detail implementation of GetScriptDescriptors() and GetScriptReferences():

/// <span class="code-SummaryComment"><summary>

Both methods return IEnumerable's that will be later handled by ScriptManager.

To implement the client-side script component Sys.UI._ModalUpdateProgress, we can borrow scripts from the ModalPopup control available in the AJAX Control Toolkit. In order to get the script to work for the control, I have to make some minor tweakings, which won't be discussed here. For those who are interested, please look into the ModalUpdateProgress.js in the source for detailed implementation.

How to Use

Just like the UpdateProgress control, you can use the ProgressTemplate property to customize your progress indicator in ModalUpdateProgress.

The ModalUpdateProgress control has an extra property BackgroundCssClass which is used to set the CSS class for the background when the control is displayed. In addition, the ProgressTemplate can include a button that the user can click on to cancel the update in progress. In order for the cancel button to work, you should specify the CancelControlID property using the button ID in the ProgressTemplate.

The following shows an example of adding the ModalUpdateProgress to the page:

<asp:ModalUpdateProgress ID="ModalUpdateProgress1" DisplayAfter="0"
        runat="server" BackgroundCssClass="modalBackground">
  <div class="modalPopup">
     Loading <img src="indicator.gif" align="middle" />

To see how it works, please check out the demo website I have included in the download. The ModalUpdateProgress control supports all the features that UpdateProgress has, including associating the ModalUpdateProgress with an UpdatePanel.

The control passed testing under IE6/7 and Firefox 2.0. Please leave your comments here if you find any problems.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Ting Huang
United States United States
Currently playing Wii...Just love it!

You may also be interested in...

Comments and Discussions

GeneralProblem with ModalPopup Pin
adlionelC10-Jun-08 6:05
memberadlionelC10-Jun-08 6:05 
QuestionPossible to show modal progress bar over multiple frame document? Pin
bjames029-May-08 11:47
memberbjames029-May-08 11:47 
GeneralProblem in firefox and safari Pin
Ismail Mayat2-May-08 6:12
memberIsmail Mayat2-May-08 6:12 
GeneralGreat Job Pin
Sunny Gurnani21-Apr-08 8:40
memberSunny Gurnani21-Apr-08 8:40 
GeneralHandler was not added through the Sys.UI.DomEvent.addHandler method. Pin
Victor M. Bello A.4-Apr-08 6:33
memberVictor M. Bello A.4-Apr-08 6:33 
GeneralRe: Handler was not added through the Sys.UI.DomEvent.addHandler method. Pin
Victor M. Bello A.4-Apr-08 6:40
memberVictor M. Bello A.4-Apr-08 6:40 
GeneralRe: Handler was not added through the Sys.UI.DomEvent.addHandler method. Pin
DPLyonnais8-May-08 8:22
memberDPLyonnais8-May-08 8:22 
GeneralGood, thanks!!! Pin
keenth4-Apr-08 3:59
memberkeenth4-Apr-08 3:59 
GeneralThank you! Pin
shalan9918-Mar-08 22:53
membershalan9918-Mar-08 22:53 
Generalproblems with step 1 Pin
erkki22211-Feb-08 2:37
membererkki22211-Feb-08 2:37 
Generalupdating controls inside a modal update progress Pin
arcb31-Jan-08 8:18
memberarcb31-Jan-08 8:18 
GeneralRuns on the first try!!! Thanks a lot !!! Pin
Tony Montana29-Jan-08 18:36
memberTony Montana29-Jan-08 18:36 
GeneralProblem Firefox Vs. IE7 Pin
Member 332403725-Jan-08 12:00
memberMember 332403725-Jan-08 12:00 
AnswerRe: Problem Firefox Vs. IE7 Pin
Ting Huang25-Jan-08 14:18
memberTing Huang25-Jan-08 14:18 
GeneralRe: Problem Firefox Vs. IE7 Pin
panzerdivisionmarkus31-Jan-08 23:54
memberpanzerdivisionmarkus31-Jan-08 23:54 
AnswerRe: Problem Firefox Vs. IE7 Pin
panzerdivisionmarkus31-Jan-08 23:57
memberpanzerdivisionmarkus31-Jan-08 23:57 
GeneralRe: Problem Firefox Vs. IE7 Pin
Chajon28-Mar-08 8:23
memberChajon28-Mar-08 8:23 
QuestionProblem with contentplaceholders? Pin
arcb15-Jan-08 14:45
memberarcb15-Jan-08 14:45 
AnswerRe: Problem with contentplaceholders? Pin
arcb16-Jan-08 10:24
memberarcb16-Jan-08 10:24 
GeneralGreat job! Pin
brinsky7-Jan-08 0:22
memberbrinsky7-Jan-08 0:22 
GeneralDisplaying-Executing ModalUpdateProgress from Javascript function Pin
VBASPMAN26-Dec-07 7:54
memberVBASPMAN26-Dec-07 7:54 
GeneralInvalid SysOperation on removing event handler Pin
SamEB1-Dec-07 14:44
memberSamEB1-Dec-07 14:44 
GeneralRe: Invalid SysOperation on removing event handler Pin
rich rendle4-Dec-07 4:24
memberrich rendle4-Dec-07 4:24 
GeneralRe: Invalid SysOperation on removing event handler Pin
rmdw12-Feb-08 10:28
memberrmdw12-Feb-08 10:28 
GeneralProgress Indicator not hiding after event (save file dialog opens) [modified] Pin
ajmastrean26-Nov-07 5:28
memberajmastrean26-Nov-07 5:28 
caileanadriyel16-Nov-07 8:58
membercaileanadriyel16-Nov-07 8:58 
GeneralModalUpdateProgress Visible property Pin
asomalra12-Oct-07 9:02
memberasomalra12-Oct-07 9:02 
QuestionModalUpdateProgress Inside UserControl... Pin
Fuehner3-Oct-07 8:43
memberFuehner3-Oct-07 8:43 
GeneralTotal Frustration!!!!! Pin
Nickm32426-Sep-07 14:30
memberNickm32426-Sep-07 14:30 
GeneralRe: Total Frustration!!!!! Pin
Shark_Bait6-Nov-07 8:31
memberShark_Bait6-Nov-07 8:31 
QuestionProblems running under Opera? Pin
ravinghaddock21-Sep-07 5:06
memberravinghaddock21-Sep-07 5:06 
QuestionModalUpdateProgress and ModalPopup Pin
Ricardo A. Trapp22-Aug-07 4:36
memberRicardo A. Trapp22-Aug-07 4:36 
GeneralLosing taborder in other tabcontrols after postback Pin
rdsmead21-Aug-07 6:34
memberrdsmead21-Aug-07 6:34 
Questionhow can create mode poup in master page Pin
giangthao20-Aug-07 4:52
membergiangthao20-Aug-07 4:52 
GeneralProblems with IE6 Pin
Bionut717-Aug-07 9:48
memberBionut717-Aug-07 9:48 
Generalthx maaan [modified] Pin
Moh.Shafe3i11-Aug-07 3:43
memberMoh.Shafe3i11-Aug-07 3:43 
GeneralJavascript Error Pin
Henrique Duarte20-Jul-07 14:30
memberHenrique Duarte20-Jul-07 14:30 
AnswerRe: Javascript Error Pin
Ting Huang20-Jul-07 14:44
memberTing Huang20-Jul-07 14:44 
GeneralRe: Javascript Error Pin
BaggaDonuts31-Jul-07 14:02
memberBaggaDonuts31-Jul-07 14:02 
GeneralRe: Javascript Error Pin
GunRockMike7-Sep-07 11:11
memberGunRockMike7-Sep-07 11:11 
GeneralRe: Javascript Error Pin
Robert Ensor11-Oct-07 12:28
memberRobert Ensor11-Oct-07 12:28 
QuestionNot working with HTTPS ? Pin
chris.oc18-Jul-07 14:40
memberchris.oc18-Jul-07 14:40 
QuestionRe: Not working with HTTPS ? Pin
Ting Huang14-Aug-07 19:28
memberTing Huang14-Aug-07 19:28 
GeneralRe: Not working with HTTPS ? Pin
SamEB1-Jan-08 18:53
memberSamEB1-Jan-08 18:53 
GeneralIt doesn't work with accordion panels Pin
marcolf6-Jul-07 5:17
membermarcolf6-Jul-07 5:17 
GeneralRe: It doesn't work with accordion panels Pin
Ting Huang6-Jul-07 6:43
memberTing Huang6-Jul-07 6:43 
GeneralUpdated Download Pin
Ting Huang27-Jun-07 14:15
memberTing Huang27-Jun-07 14:15 
GeneralThanks Pin
merlin98126-Jun-07 9:30
membermerlin98126-Jun-07 9:30 
GeneralModalUpdateProgress not always hiding Pin
Jason.Hill23-Jun-07 16:42
memberJason.Hill23-Jun-07 16:42 
GeneralRe: ModalUpdateProgress not always hiding Pin
Ting Huang25-Jun-07 7:29
memberTing Huang25-Jun-07 7:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150901.1 | Last Updated 26 Jun 2007
Article Copyright 2006 by Ting Huang
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid