Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML

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

Rate me:
Please Sign up or sign in to vote.
4.55/5 (7 votes)
4 Jul 2009CPOL2 min read 64.3K   1.7K   43   12
‘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.
    XML
    <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.
    JavaScript
    <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):
    JavaScript
    <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.NET
    <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)


Written By
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

 
QuestionThanks Pin
gelewyc4-Mar-15 5:15
gelewyc4-Mar-15 5:15 
QuestionAnimation shows but gridview never loads? Pin
scheffetz20-Jun-12 5:05
scheffetz20-Jun-12 5:05 
AnswerRe: Animation shows but gridview never loads? Pin
Kiran Kumar Veerabatheni10-Sep-12 12:15
Kiran Kumar Veerabatheni10-Sep-12 12:15 
SuggestionNice Pin
AmitDhakre13-Apr-12 21:16
AmitDhakre13-Apr-12 21:16 
Generalcheck for Page validation Pin
clazarev7-Jul-09 19:53
clazarev7-Jul-09 19:53 
GeneralRe: check for Page validation Pin
Kiran Kumar Veerabatheni2-Sep-09 0:53
Kiran Kumar Veerabatheni2-Sep-09 0:53 
Generalpretty cool Pin
Daniel M. Camenzind6-Jul-09 20:37
Daniel M. Camenzind6-Jul-09 20:37 
GeneralRe: pretty cool - but not working properly Pin
Daniel M. Camenzind6-Jul-09 21:26
Daniel M. Camenzind6-Jul-09 21:26 
GeneralFigured out how to make it work Pin
BigJim617-Jul-09 7:46
BigJim617-Jul-09 7:46 
GeneralCorrecting my correction Pin
BigJim617-Jul-09 8:20
BigJim617-Jul-09 8:20 
GeneralRe: Correcting my correction Pin
Kiran Kumar Veerabatheni2-Sep-09 0:31
Kiran Kumar Veerabatheni2-Sep-09 0:31 
GeneralRe: pretty cool Pin
Kiran Kumar Veerabatheni2-Sep-09 20:35
Kiran Kumar Veerabatheni2-Sep-09 20:35 

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

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