PROGRESS BAR IMPLEMENTATION USING "AJAX" IN AN ASP.NET APPLICATION

Hey All , Ever noticed a PROGRESS BAR getting displayed while you are browsing through an application on the internet ?? You must have noticed that at many places when ever you click on a control that brings up the data from the Server side it displays a Progress Icon which informs the user that the fetch/update action is taking place and the application is running so that the user doesn't feels that the application has got hanged up on the user's click on the web control.

So, ASP.NET users , here's all you need to know to implement this functionality in your ASP.NET application. The entire code is given below. Just include this and you'll be good to go.

Finally to start off the implementation, 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 there 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;
}

THIS IS IT. GO ON CODERS...IMPLEMENT IT !!!