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.
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:
- Display an ‘In-Progress’ message (with a GIF image for animated feel)
- Restrict the user from accessing other controls when the ‘in-Process’ message is displayed to avoid unwanted post backs.
- Add a
div tag to the HTML code, to display the message and image. Set the visibility of the
div tag as
<div id=""ProcessingWindow"" visible=""false"">
<img src="%22loading.gif%22" />
visible’, and add the Progress message and image to the
innerHTML of the
Note: Include the GIF image to display the image to get the animation running.
ShowProcessMessage = function(PanelName)
document.getElementById(PanelName).style.visibility = "visible";
'In-Process...Please Wait ... ';
return true; }
DisableAllControls() to disable all the controls except the control to raise the event and also the hidden types (ASP.NET Event handlers and Viewstate):
DisableAllControls = function(CtrlName)
for(i = 0; i <= document.forms.elements.length -1 ; i++)
elm = document.forms.elements[i];
if( (elm.name == CtrlName) || (elm.type =='hidden') )
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')" />
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.
- 4th July, 2009: Initial post