Click here to Skip to main content
Click here to Skip to main content

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

, 4 Jul 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
‘In-Progress’ Message & Disabling controls in ASP.NET Pages using JavaScript

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.

Process Message Display

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

  • 4th July, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kiran Kumar Veerabatheni
Technical Lead IBM
United States United States
Software Analyst/ Technical Lead with over 9+ years of experience in designing and building frameworks for Web-based Applications.

Comments and Discussions

 
QuestionAnimation shows but gridview never loads? Pinmemberscheffetz20-Jun-12 6:05 
AnswerRe: Animation shows but gridview never loads? PinmemberKiran Kumar Veerabatheni10-Sep-12 13:15 
SuggestionNice PinmemberAmitDhakre13-Apr-12 22:16 
Generalcheck for Page validation Pinmemberclazarev7-Jul-09 20:53 
GeneralRe: check for Page validation PinmemberKiran Kumar Veerabatheni2-Sep-09 1:53 
Generalpretty cool PinmemberDaniel M. Camenzind6-Jul-09 21:37 
GeneralRe: pretty cool - but not working properly PinmemberDaniel M. Camenzind6-Jul-09 22:26 
GeneralFigured out how to make it work PinmemberBigJim617-Jul-09 8:46 
GeneralCorrecting my correction PinmemberBigJim617-Jul-09 9:20 
GeneralRe: Correcting my correction PinmemberKiran Kumar Veerabatheni2-Sep-09 1:31 
GeneralRe: pretty cool PinmemberKiran Kumar Veerabatheni2-Sep-09 21:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150129.1 | Last Updated 4 Jul 2009
Article Copyright 2009 by Kiran Kumar Veerabatheni
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid