This is not my favorite way to do this, but it's quick and easy.
ASP.NET pages occasionally do a bit of processing, and we need to keep the notoriously short patienced user from clicking around while we do our work. This solution involves navigating to 'process.aspx', showing a simple progress meter, and calling the next page. The next page won't show until you do all your work.
Call this page like this:
Response.Redirect("process.aspx?destPage=pageThatDoesTheLongProcess.aspx")
Code for process.aspx:
The main trick is in the BODY ONLOAD event, it calls a javascript function that redirects the page to the 'pageThatDoesTheLongProcess.aspx' file as soon as it loads. The new page won't show until it's ready, and process.aspx will show it's meter in the mean time.
Note that I didn't include the <% %> lines that are above the <html> tag.
As always, your comments are welcome.
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head id="Head1" runat="server">
<title>Loading, please wait...</title>
<link href="/css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var ctr = 1;
var ctrMax = 20; // how many is up to you-how long does your end page take?
var intervalId;
function Begin()
{
//set this page's window.location.href to the target page
window.location.href =
"<%= Request.QueryString("destPage")%>";
// but make it wait while we do our progress...
intervalId = window.setInterval(
"ctr=UpdateIndicator(ctr, ctrMax)", 500);
}
function End() {
// once the interval is cleared, we yield to the result page (which has been running)
window.clearInterval(intervalId);
}
function UpdateIndicator(curCtr, ctrMaxIterations)
{
curCtr += 1;
if (curCtr <= ctrMaxIterations) {
indicator.style.width =curCtr*10 +
"px";
return curCtr;
}
else
{
indicator.style.width =0;
return 1;
}
}
</script>
</
head>
<
body onload="Begin()" onunload="End()">
<form id="Form1" method="post" runat="server">
<div style="text-align: center">
<div style="text-align: center; background-color: White; width: 300px">
<h3>
Loading Data, please wait...
</h3>
</div>
<table id="indicator" border="0" cellpadding="0" cellspacing="0" width="0" style="text-align: center;
height: 20px">
<tr>
<td align="center" style="background-color: Red; width: 100%">
</td>
</tr>
</table>
</div>
</form>
</
body>
</
html>