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

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 aPostback 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 calledModalPopup 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.