LANGUAGES: VB .NET
ASP.NET VERSIONS: 1.0 | 1.1
Make a Progress Indicator For Slow-Loading Pages
Create a pop-up status page that lets your users know they're not forgotten.
By Brad McCabe
One problem with ASP.NET is that keeping the user informed about the status of a long running task is difficult. When a page that takes time to load is posted to the server, the user often is left wondering whether the application is responding or if their request even made it to the server. I'll give you a simple tip that provides the user a basic status screen to provide them better feedback.
First, create a basic page that asks a user for their name and provides them a button to submit the page. The code behind the button is pretty simple:
Response.Redirect("EndPage.aspx?name=" & Name.Text)
Next, create a simple page that sleeps the thread for 10 seconds to simulate a long running process. After the thread wakes up, the page updates a label to welcome the user. The code looks like this:
Label1.Text = "Welcome " & Request.QueryString("Name") & "!"
If you run these two pages, you'll find that when you click on the submit button, the browser sits on the start page for 10 seconds without any feedback to the user. Now modify the start-page code to redirect to an intermediary loading page. This page provides your end user with visual notification that the application is processing their request. Here's the new code behind on the submit button:
Dim URL As String = "EndPage.aspx?name=" & Name.Text
Response.Redirect("Loading.Aspx?Page=" & URL)
The previous code now captures the original URL and passes it on the query string to the loading page, Loading.Aspx. The loading page then displays to the user a status message while loading the requested page.
First, start by creating a basic message for your user:
<table border="0" cellpadding="0" cellspacing="0"
width="99%" height="99%" align="center"
<td align="center" valign="middle">
<font color="Red" size="5">
<span id="Message">Loading --
<span id="Progress" style="WIDTH:25px;
<body onload="BeginPageLoad()" onunload="EndPageLoad()">
location.href = "<%= Request.QueryString("Page")%>";
iIntervalId = window.setInterval("iLoopCounter=
UpdateProgress(iLoopCounter, iMaxLoop)", 500);
The first line of code starts the loading processes for the requested page. After the page has been requested from the server, a call to the UpdateProgress function starts a timer that updates the screen. This function uses the Progress span tag and displays five dots in succession. When the fifth dot is added, the span is cleared and the process starts over. Once the new page is finished loading, it is rendered immediately for the user and the EndPageLoad function will be processed. The EndPageLoad function then performs some basic clean-up and notifies the user if the transfer fails or an error occurs:
Progress.innerText = "Page Loaded -- Not Transferring";
Got a UI question, tip, or idea for a topic you'd like me to cover? I'd love to hear it. E-mail me at [email protected].
This article's sample code is available for download.
Brad McCabe is the technical evangelist for Infragistics. Brad also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at [email protected].