Guillermo G. Blog

Software Architect
ASP.NET MCP
"The best way to predict the future is to invent it"

AJAX: How to create a "Processing" modal window using UpdateProgress and ModalPopup ASP.net AJAX controls

ajax

Originally posted as "AJAX: Como crear una ventana ..." in Spanish on December 13th 2007.

A few days ago I had need to implement some functionality based on AJAX technology in a Web application that I was developing. When a request is sent to the server doing click to some web control in the page, AJAX "hide" the Postback to our eyes and sometimes is so difficult to detect, that the page is processing the request based on the click event.

There is an AJAX ASP.net Control that provides status information about partial-page updates called UpdateProgress. It's very useful to "control" the user patience but permits that the user continue interacting with other controls in the application, and rare behaviors can result if the user clicks other button or does other Postback action.

// UpdateProgress Implementation Example 
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server"> 
  <ProgressTemplate> 
    <div style="position: relative; top: 30%; text-align: center;">  
     <img src="loading.gif" style="vertical-align:middle" alt="Processing"/> 
      Processing ... 
    </div> 
  </ProgressTemplate> 
</asp:UpdateProgress> 

Unfortunately doesn't exists an ASP.net AJAX control that "blocks" the application while a Postback request is made to the server, but fortunately we can make a powerful combination using this control in conjunction with an AJAX Control Toolkit's called ModalPopup Extender, that allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page.

//Modal Popup Extender Implementation Example 
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" 
runat="server" TargetControlID="panelUpdateProgress"  
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" /> 

Now, this is the interesting part, take the power of each one of this controls to create a composite functionality that shows a progress indicator to the user in a modal window way, blocking the user interaction with the application while it's processing a previous Postback request. The next code example shows how to do this:

// Include this page directives to reference ASP.net AJAX controls
// from AJAX and the Toolkit 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, 
Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" 
TagPrefix="asp" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 
TagPrefix="ajaxToolkit" %>
 
// Include ScriptManager tag manages client script for Microsoft  
// ASP.NET AJAX pages 
<asp:ScriptManager ID="ScriptManager1" runat="server" /> 
 
// Include UpdateProgress Control inside a Panel Control  
// and then the ModalPopupExtender Control 
<asp:Panel ID="panelUpdateProgress" runat="server" 
CssClass="updateProgress"> 
    <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server"> 
      <ProgressTemplate> 
        <div style="position: relative; top: 30%; text-align: center;"> 
          <img src="loading.gif" style="vertical-align: middle" 
          alt="Processing" /> 
          Processing ... 
        </div> 
      </ProgressTemplate> 
    </asp:UpdateProgress> 
  </asp:Panel> 
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" 
TargetControlID="panelUpdateProgress" BackgroundCssClass="modalBackground" 
PopupControlID="panelUpdateProgress" />

It's necessary to add a pair of javasctript functions that are executed at the initial and final AJAX requests.

//JavaScript code included at jsUpdateProgress.js file
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);    
function beginReq(sender, args){ 
    // shows the Popup 
    $find(ModalProgress).show();        
} 
 
function endReq(sender, args) { 
    //  shows the Popup 
    $find(ModalProgress).hide(); 
} 

You can view that the javascript functions references a variable called ModalProgress, this variable must be created in the ASP.net page's code. The next code shows how to do it:

<script type="text/javascript" language="javascript"> 
      var ModalProgress ='<%= ModalProgress.ClientID %>';         
</script> 
 
<script type="text/javascript" src="jsUpdateProgress.js"></script>

Finally we add a little CSS code to show a gray contour in the modal window, and a cute format to the image and text.

.modalBackground 
{ 
    background-color: Gray; 
    filter: alpha(opacity=50); 
    opacity: 0.50; 
} 
 
.updateProgress 
{ 
    border-width: 1px; 
    border-style: solid; 
    background-color: #FFFFFF; 
    position: absolute; 
    width: 180px; 
    height: 65px; 
} 
 

You can download the source code from the above code examples, and include an Update Progress Modal Window in your Web applications.

Updated (Sept 02/2009): The source code includes a Visual Basic example of this implementation.

Comments

gugonzar said:

Thanks Damien,

It's a great solution. I'll write a new post entry making reference to your POST.

Guillermo G.

# March 14, 2008 8:37 PM

Dele Olowoyo said:

Hi,

this has been a very very helpful article.  it had exactly what I was looking for.  However, I have one issue.  I am trying to get this to work in IE6, but the modal dialog box keeps showing up at the bottom of the screen all the time.

Anyone have a solution for this?

# March 27, 2008 6:38 PM

deleolowoyo said:

Hi,

This article was extremely helpful, however, I can't get the modal dialog to stay in the middle of the page in IE6.  it works fine in IE7 and Mozilla, but in IE6, it stays at the bottom of the page.  

Has anyone come across this and has a solution for it?

Any help will be much appreciated.

D.O

# March 28, 2008 10:58 AM

Simon Deshaies said:

This is the best solution I found out there, using a modal. Thanks.

I'm wondering, I use it to avoid double click, is it possible to have double click using this?

# April 5, 2008 10:39 AM

Rakesh M. kapuriya said:

That is what i am finding.

Its really very helpful to me..

Thanx.

# April 17, 2008 8:46 AM

Biju Thomas said:

Hi,

Thanks for the post.

I have one issue with modalpopup in IE6. while dispalying the modal popup it hides the dropdownlists and listboxesx in the page. How do we resolve this issue ?

It is greatful if you can notify me if there is a solution (mail : tobijuthomas@rediffmail.com)

# July 3, 2008 3:58 AM

Nicholas Mayne said:

Maxer_Ars :

what i did for one of the buttons was this

var cmdAuthoriseButton ='<%= cmdAuthorise.ClientID %>';

function beginReq(sender, args){

   if (cmdAuthoriseButton == args._postBackElement.id)

   {

       // shows the Popup

       $find(ModalProgress).show();        

   }

}

Hope that helps.

Nick

# July 10, 2008 4:45 AM

abhijitcb said:

I have a specific problem... I am displaying a search control in Ajax ModalPopUpExtender where in I have list boxes, dropdownlist, textboxes and several other server controls... the postback event for dropdownlist is not firing when i make any change.. could you help why is it so.. ???

# July 16, 2008 4:50 AM

Manoj said:

Excellent stuff. This is exactly what I was looking for. It saved my life :)

# July 31, 2008 7:22 PM

Bob said:

You sir are the man! Thanks a ton for witting this article. You just saved me a lot of time and headaches.

# August 12, 2008 1:03 PM

Ahsan said:

Thanks a lot!!!

I can't describe you,how much this article help me.

# August 15, 2008 5:56 AM

dude said:

It's also possible to make a "modal" div inside updateprogress control

<asp:UpdateProgress ID="UpdateProgress1" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1"

       runat="server">

       <ProgressTemplate>

           <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center;"

               class="modalBackground">

               <img src="images/loading.gif" style="padding-top: 100px;" />

           </div>

       </ProgressTemplate>

   </asp:UpdateProgress>

# October 24, 2008 9:06 AM

Ms Chua said:

I was apply above of source code provided by author. But, have error come out. The error message is

"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>). "

Cause, on my program. I have dynamic to add control into the web page. For example, at my code behind have this kind of code :

Form.control.add(textbox);

This is a most important reasons, cause my program occur error. Anybady, got solution???  

# November 28, 2008 4:29 AM

arun said:

My Asp.net framework is 2.0. The it showing error in web.config.

# December 9, 2008 7:56 AM

Willy said:

My environment is using MVP pattern with AjaxControlToolKits, user controls and a master page. And the most important, we have to support IE6. The setup is quite complex and I have tried so many different solutions I could found on the web. None of them worked. This one works like a charm. Thank you so much.

# February 12, 2009 12:40 PM

gugonzar said:

You're welcome .. thanks for read my blog!

# February 20, 2009 11:44 AM

Nate said:

Wondering how do you get the delay timeout to work. I have a bunch of controls on a page, some fire a postback that does basic computing that doesn't take much time but the modal popup still displays. I would like it to wait like 500ms before the display.

# July 13, 2009 1:22 PM

Nate said:

I figured it out, I changed the js file to look like:

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);

var timeOut

function beginReq(sender, args) {

   timeOut =  setTimeout('openModal()', 750);

}

function openModal() {

   $find(ModalProgress).show();

}

function endReq(sender, args) {

   //  shows the Popup

   clearTimeout(timeOut);

   $find(ModalProgress).hide();

}

I set the timeout to the timeout of the updateprogress template. This way if something does not take as much time then it won't display.

# July 13, 2009 1:48 PM

gugonzar said:

Hey Nate, Thanks for your tip!

# July 15, 2009 7:04 PM

wooper said:

hi, i was wondering if your code can be converted to vb.net language, because i did it my self and doesnt work, so could you help me plz?? thanks

# August 26, 2009 9:12 PM

wooper said:

hi, i was wondering if your code can be converted to vb.net language, because i did it my self and doesnt work, so could you help me plz?? thanks

# August 26, 2009 9:12 PM

Serdar Osman Onur said:

nicely done,

thanks...

# October 7, 2009 10:05 AM

popup and scrollbar said:

thanks for your article;it's great helpful for me ;

but i have annother question to ask you ;when the popupPanel work at first time ,it's ok;but at the second time ;the window scroll bar will exist;i don't wanna to this effect;how can i do;

thanks again;

# October 15, 2009 10:18 PM

gugonzar said:

Hi popup and scrollbar,

Hmmm I think that's no possible to hide the scrollbar.

# November 9, 2009 7:20 AM

HEADROS said:

Worked like a charm, thanks alot!

# February 7, 2010 4:26 PM

TasleemArif said:

thanks

# March 17, 2010 2:57 AM

suradecs said:

very thanks it useful for me.

# May 18, 2010 6:04 AM

gerardo gala said:

Hi All!

Has anyone tried incorporating this with the Dynamic Data Website Template that comes packaged in VS 2008?

The template pages have no submit buttons. But I want a modal progress when the User clicks on a filter dropdown to tell the User he has to wait for the grid to refresh with the filter.

Thanks!

# June 19, 2010 4:09 PM

jethomas44 said:

if you end up getting a 'null' is null or not an object error on the javascript $find statement.  make sure to add:

BehaviorID="ModalProgress"

to the <ajaxToolkit:ModalPopupExtender>

# September 17, 2010 5:20 PM

thirstymind said:

Has any one has sample code for page_load? not for button_click

# March 1, 2011 9:57 PM

sandeep_patil said:

How to use it with update panel

# July 3, 2011 8:38 AM

TimFromDallas said:

This worked great! Thanks.

# October 25, 2011 11:28 AM

firewave said:

I am getting the following error:

"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>). "

Is there a solution for this?

# December 13, 2011 2:34 PM

amit.jain said:

This can be done with CSS without writing this much code

<a href="www.csharpaspnetarticles.com/.../updateprogress-control-example-aspnet.html">UpdateProgress Control Example In Asp.Net</a>

# April 25, 2012 8:59 AM

tripower said:

How to you initiate an event to stop the modal? Say when you receive something back from the database.

# July 6, 2012 9:03 AM