Click here to Skip to main content
13,446,115 members (38,630 online)
Click here to Skip to main content
Add your own
alternative version


156 bookmarked
Posted 6 Oct 2006

Atlas: ModalUpdateProgress - An UpdateProgress Control in Modal Popup Style

, 26 Jun 2007
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></span>
/// Gets the script descriptors.
/// <span class="code-SummaryComment"></summary></span>
/// <span class="code-SummaryComment"><returns>A list of components, behaviors, and </span>
/// client controls required
/// for the ModalUpdateProgress control's client functionality
/// <span class="code-SummaryComment"></returns></span>
protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
  if (((this.Page != null) && this.ScriptManager
      .SupportsPartialRendering) && this.Visible)
    ScriptControlDescriptor desc = new ScriptControlDescriptor(
       "Sys.UI._ModalUpdateProgress", this.ClientID);
    string updatePanelClientID = null;
    if (!string.IsNullOrEmpty(this.AssociatedUpdatePanelID))
        UpdatePanel panel = this.NamingContainer.FindControl(this
            .AssociatedUpdatePanelID) as UpdatePanel;
        if (panel == null)
            panel = this.Page.FindControl(this
               .AssociatedUpdatePanelID) as UpdatePanel;

        if (panel == null)
            throw new InvalidOperationException(string.Format(
                CultureInfo.InvariantCulture, "No UpdatePanel 
                found for AssociatedUpdatePanelID '{0}'.",
                new object[] { this.AssociatedUpdatePanelID }));

        updatePanelClientID = panel.ClientID;

    string backgroundCssClass = null;
    string cancelControlID = null;
    if (!string.IsNullOrEmpty(this._backgroundCssClass))
        backgroundCssClass = this._backgroundCssClass;

    if (!string.IsNullOrEmpty(this._cancelControlID))
        cancelControlID = this._cancelControlID;

    desc.AddProperty("associatedUpdatePanelId", updatePanelClientID);
    desc.AddProperty("dynamicLayout", this.DynamicLayout);
    desc.AddProperty("displayAfter", this.DisplayAfter);
    desc.AddProperty("backgroundCssClass", backgroundCssClass);
    desc.AddProperty("cancelControlID", cancelControlID);
    yield return desc;

/// <span class="code-SummaryComment"><summary></span>
/// Gets the script references.
/// <span class="code-SummaryComment"></summary></span>
/// <span class="code-SummaryComment"><returns>A list of client script library dependencies for the control.</span>
/// <span class="code-SummaryComment"></returns></span>
protected override IEnumerable<ScriptReference> GetScriptReferences()
    yield return new ScriptReference("AjaxControls.ModalUpdateProgress.js", "

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

QuestionenableSessionState... Pin
Kim, Eun-Sung14-Jul-16 16:15
memberKim, Eun-Sung14-Jul-16 16:15 
QuestionMedium Trust Environment Pin
darenh24-Jan-12 23:12
memberdarenh24-Jan-12 23:12 
QuestionAbout the code Pin
Ali Al Omairi(Abu AlHassan)18-Jun-11 21:47
memberAli Al Omairi(Abu AlHassan)18-Jun-11 21:47 
GeneralMy vote of 5 Pin
octavio reyes15-Jun-11 4:56
memberoctavio reyes15-Jun-11 4:56 
GeneralMy vote of 4 Pin
suren.info25-May-11 20:15
membersuren.info25-May-11 20:15 
GeneralMy vote of 5 Pin
dpjn31623-Sep-10 4:40
memberdpjn31623-Sep-10 4:40 
GeneralNo DocType No Progress Modal [SOLVED] Pin
Ramkrishna Barot16-Sep-10 7:32
memberRamkrishna Barot16-Sep-10 7:32 
GeneralError Sys.ArgumentUndefinedException Pin
Federicko23-Jul-10 1:06
memberFedericko23-Jul-10 1:06 
GeneralModalupdateprogress not working Pin
prakk8827-Jan-10 0:21
memberprakk8827-Jan-10 0:21 
I had downloaded ajaxtoolkit from website and i am using the release dll from the toolkit.
But i don't have ModalupdateProgress in it.
So i tried loading the dll given in the codeproject website.
This is non compatible as system.web.extensions.dll is not found-- this is the error message i am getting while adding it...

any clue? Where am I wrong?

I am using updatepanel for now... which does not have the same effect of disabling the page like modalupdatepanel.

Pls advise...
GeneralKB927917 With ModalUpdateProgress Pin
Danila Korablin20-Jan-10 23:14
memberDanila Korablin20-Jan-10 23:14 
General"Back" button navigation not working with ModalUpdateProgress Pin
im1dermike13-Nov-09 9:58
memberim1dermike13-Nov-09 9:58 
GeneralLicense Pin
crashytje30-Jul-09 21:43
membercrashytje30-Jul-09 21:43 
GeneralHandler was not added sys.ui.domevent.addhandler getting this issue. Pin
Member 350147124-Jun-09 0:24
memberMember 350147124-Jun-09 0:24 
Questionother elements on the page NOT disabled when the ModalUpdateProgress is shown Pin
aparna guggilla7-Apr-09 18:49
memberaparna guggilla7-Apr-09 18:49 
QuestionIs there any way to use it for all the requests made to server. Pin
Saurabh Agrawall3-Apr-09 1:28
memberSaurabh Agrawall3-Apr-09 1:28 
QuestionDelay in Grayed out the background Pin
M-o-h-a-n8-Feb-09 19:18
memberM-o-h-a-n8-Feb-09 19:18 
GeneralGreat [modified] Pin
muencfra11-Nov-08 5:01
membermuencfra11-Nov-08 5:01 
GeneralRe: Great Pin
Member 37380457-Dec-08 22:58
memberMember 37380457-Dec-08 22:58 
QuestionNeed other form of display too... Pin
SEKH it29-Oct-08 5:31
memberSEKH it29-Oct-08 5:31 
QuestionDynamic message display? Pin
conraba20-Oct-08 5:56
memberconraba20-Oct-08 5:56 
GeneralModalUpdateProgress problem using custom control Pin
gigi746-Oct-08 21:48
membergigi746-Oct-08 21:48 
QuestionAssembly does not allow partially trusted callers Pin
shalan9924-Sep-08 3:31
membershalan9924-Sep-08 3:31 
AnswerRe: Assembly does not allow partially trusted callers Pin
Member 43434843-Jun-09 18:31
memberMember 43434843-Jun-09 18:31 
GeneralRe: Assembly does not allow partially trusted callers Pin
logicaldna15-Jun-09 21:06
memberlogicaldna15-Jun-09 21:06 
QuestionWhich ajax library are you using here? Pin
efinkelb25-Jul-08 5:41
memberefinkelb25-Jul-08 5:41 

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

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

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