How to show progress of a ASP.Net web page loading?
When your web page taking longer time to load it’s always better to show progress bar to the user for improving the usability of the page. There are many technique used to show the progress bar, In this post i will discuss the following techniques to show the progress bar.
- How to show progress bar for initial asp.net page loading
- How to show progress bar while page got post back.
- how to show progress bar when you are using update panel asynchronous post back.
Show Progress Bar while Asp.net Page Loading
Use the following java script code to show progress bar when asp.net page loading.
ShowWindowLoading();
//This method will fire before any controls/content is loaded on the client-side
function ShowWindowLoading()
{
try
{
var divLoading = document.getElementById("dvLoading");
if (divLoading == null || divLoading == 'undefined')
{
document.write("<div id="dvLoading">Processing...... </div>");
}
else
{
divLoading.style["display"] = "";
}
}
catch (ex)
{
//alert(ex);
}
return true;
}
function HideWindowLoading()
{
try
{
document.getElementById("dvLoading").style["display"] = "none";
}
catch (ex) { }
}
When a web page is loading before it’s load any of the content body, it loads all the java script. Using this technique we can show the progress bar to the user. If you see the above code, i am calling a java script function in the java script which will check if divLoading exists ( mostly no, as page not get loaded yet), if not then write our div tag which show the progress bar. You can customize this div according to your needs.
Now when the entire page get loaded we should hide this progress bar. use the following code to hide the progress bar when page has been loaded fully. Body onload function will fire when page get loaded fully.
<body onload="HideWindowLoading();">
Using the above technique we can show the Progress bar while page is loading. In above example i put “processing ..” , you can design that div tag for rick look.
Show Progress Bar when page is posted back
Now we have seen the code to show the progress bar while page is loading initially, now we will write code for showing progress bar when page is posted back by user intervention ( Ex: button click etc )
Taking example of button click post back , html body code should like this.
<body onload="HideProgressBar();">
<form id="form1" runat="server" onsubmit="ShowProgressBar();">
<div id="dvLoading" style=" display:none" >Processing...... </div>
<asp:Button ID="btnTestPostBack" Text="DoPostBack" runat="server" OnClick="btnTestPostBack_Click" />
</form>
</body>
In the above example we have a form which on submit will call a javascript function called ShowProgressbar and then when page get loaded after post back we use body onLoad to hide the progress bar. Here is the java script code you should have in your page.
function ShowProgressBar()
{
try
{
var ctrlProgressBar = document.all["dvLoading"];
ctrlProgressBar.style["display"] = "";
}
catch(ex)
{
}
}
function HideProgressBar()
{
try
{
var ctrlProgressBar = document.all["dvLoading"];
ctrlProgressBar.style["display"] = "none";
}
catch(ex)
{
//alert(ex.message);
}
}
We are done, using the above code you can show progress bar when page get post back.The above code will not work for asynchronous post backs as it won’t call submit function.If you want to show progress bar when you are using update panel asynchronous post backs please read my article how to show progress bar when you are using update panel asynchronous post back.