Zhuanzai: AJAX: How to create a "Processing" modal window using UpdateProgress and Modal

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"PostbackTo our eyesAnd 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 patienceBut permits that the user continue interacting with other controlsIn the application, and rare behaviors can result if the user clicks other button or does otherPostbackAction.

// UpdateProgress Implementation Example 

<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server"> 

  <ProgressTemplate> 

    <div style="position: relative; top: 30%; text-align: center;">  

      Processing ... 

    </div> 

  </ProgressTemplate> 

</asp:UpdateProgress> 

Unfortunately doesn't exists an ASP.net AJAX control that "blocks" the application whilePostbackRequest is made to the server,Fortunately we can make a powerful combinationUsing 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 createA 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 previousPostbackRequest. 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;"> 

          
          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 pairJavasctripfunctionsThat 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.