Simple ‘In-Progress’ Message for Time Consuming Tasks in ASP.NET Pages

• Download complete source code (ASPX & CS) - 8.27 KB

Introduction

We often come across web pages which take more time to perform a task when the user clicks a Button control. Users often tend to click the other options of the page during the delay – which causes unexpected behavior and strange results of the page. It is always sensible to display an ‘In-Progress’ message when your web page is taking more than a few seconds to perform the server side task. There are other complex ways of doing the same using Ajax .NET controls like ‘Modal Popup Extender’, Modal window, iframe,... etc.

My solution is a simple JavaScript which is fast, light weight & also does not disturb your ASP.NET server side code. This should also work fine for other web programming languages like PHP, JSP, Cold Fusion,... etc.

Scenario

I have an ASPX page which retrieves data and binds to an ASP.NET Grid on a Button click. This process takes 30 seconds to display the results, during which the page has to:

1. Display an ‘In-Progress’ message (with a GIF image for animated feel) 
2. Restrict the user from accessing other controls when the ‘in-Process’ message is displayed to avoid unwanted post backs.

Solution

1. Add a div tag to the HTML code, to display the message and image. Set the visibility of the div tag as hidden.

   <div id=""ProcessingWindow"" visible=""false"">
       <img src="%22loading.gif%22" />
   </div>

2. JavaScript function ShowProcessMessage() to Div ‘visible’, and add the Progress message and image to the innerHTML of the Div tag.
   Note: Include the GIF image to display the image to get the animation running.

   <script language ="javascript" type="text/javascript" >
       
     ShowProcessMessage = function(PanelName)
        	 {
   		//Sets the visibility of the Div to 'visible'
        		document.getElementById(PanelName).style.visibility = "visible";
   
                   /* Displays the  'In-Process' message through the innerHTML.
                      You can write Image Tag to display Animated Gif */
   
                       document.getElementById(PanelName).innerHTML = 
   					'In-Process...Please Wait ... '; 
   
                   //Call Function to Disable all the other Controls
                	DisableAllControls ('btnLoad');
   
                	return true; //Returns the control to the Server click event
       	  }
   
   </script>

3. JavaScript function DisableAllControls() to disable all the controls except the control to raise the event and also the hidden types (ASP.NET Event handlers and Viewstate):

   <script language ="javascript" type="text/javascript" >
   
   DisableAllControls = function(CtrlName)
   {	
        var elm;
        /*Loop for all the controls of the page.*/
        for(i = 0; i <= document.forms[0].elements.length -1 ; i++) 
         { 
                    /* 1.Check for the Controls with type 'hidden' – 
                    which are ASP.NET hidden controls for Viewstate and EventHandlers. 
                    It is very important that these are always enabled, 
   	        for ASP.NET page to be working.
                       2.Also Check for the control which raised the event 
   	        (Button) - It should be active. */
   
           elm = document.forms[0].elements[i];
   
     	if( (elm.name == CtrlName) || (elm.type =='hidden') )
                    { 
                       elm.disabled=false;	 
                    }
           	else
                    {
                        elm.disabled=true; //Disables all the other controls
                    }
        	   } 
   }
   
   </script>

4. Call the JavaScript function on the OnClientClick event of the Button. The page control first hits the client side function and then goes to the Server side event handler.

   <asp:Button ID="btnLoad" runat="server" onclick="btnLoad_Click" 
   Text="Get Songs List" OnClientClick ="ShowProcessMessage('ProcessingWindow')" />

Final Words

This is a common problem faced by most of us while developing bigger functionalities in web pages. This should also work fine for other web programming languages like PHP, JSP, Cold Fusion,... etc.

Hope this solution would be helpful.

Happy programming!

History

• 4^th July, 2009: Initial post