UI Tip
LANGUAGES:VB .NET
ASP.NETVERSIONS: 1.0 | 1.1
Make a Progress Indicator For Slow-Loading Pages
Create a pop-up status page that lets your users knowthey're not forgotten.
By Brad McCabe
One problem with ASP.NET is that keeping the user informedabout the status of a long running task is difficult. When a page that takestime to load is posted to the server, the user often is left wondering whetherthe 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 toprovide them better feedback.
First, create a basic page that asks a user for their nameand provides them a button to submit the page. The code behind the button ispretty simple:
Response.Redirect("EndPage.aspx?name=" & Name.Text)
Next, create a simple page that sleeps the thread for 10seconds to simulate a long running process. After the thread wakes up, the pageupdates a label to welcome the user. The code looks like this:
System.Threading.Thread.Sleep(10000)
Label1.Text = "Welcome " &Request.QueryString("Name") & "!"
If you run these two pages, you'll find that when youclick on the submit button, the browser sits on the start page for 10 secondswithout any feedback to the user. Now modify the start-page code to redirect toan intermediary loading page. This page provides your end user with visualnotification that the application is processing their request. Here's the newcode 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 passesit on the query string to the loading page, Loading.Aspx. The loading page thendisplays 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"
valign="middle">
<tr>
<tdalign="center" valign="middle">
<font color="Red"size="5">
<spanid="Message">Loading --
PleaseWait</span>
<spanid="Progress" style="WIDTH:25px;
TEXT-ALIGN:left"></span>
</font>
</td>
</tr>
</table>
Inside the table at the middle of the screen, you want todisplay a message to the user. You'll use JavaScript's Progress span tag hereto update the screen and inform the user that the application is responding.
Now that the screen is set up, you need to hook up theJavaScript to make the page work using the client-side onLoad and onUnloadevents:
<body onload="BeginPageLoad()"onunload="EndPageLoad()">
When the page is loaded, your custom BeginPageLoadfunction is fired. BeginPageLoad has two lines of JavaScript:
location.href = "<%=Request.QueryString("Page")%>";
iIntervalId = window.setInterval("iLoopCounter=
UpdateProgress(iLoopCounter, iMaxLoop)", 500);
The first line of code starts the loading processes forthe requested page. After the page has been requested from the server, a callto the UpdateProgress function starts a timer that updates the screen. Thisfunction uses the Progress span tag and displays five dots in succession. Whenthe fifth dot is added, the span is cleared and the process starts over. Once thenew page is finished loading, it is rendered immediately for the user and theEndPageLoad function will be processed. The EndPageLoad function then performssome basic clean-up and notifies the user if the transfer fails or an erroroccurs:
window.clearInterval(iIntervalId);
Progress.innerText = "Page Loaded -- Not Transferring";
As you can see, you need only a few lines of JavaScript toprovide the user with visual notification that their request has been submittedand is being processed. By providing the user with this feedback, you can helpeliminate the possibility that the user will cancel the page request andattempt to resubmit the page or hit the submit button repeatedly, possiblycorrupting your data or bringing down the application.
Got a UI question, tip, or idea for a topic you'd like meto cover? I'd love to hear it. E-mail me at mailto:uitips@aspnetPRO.com.
This article's sample code is available for download.
Brad McCabe is thetechnical evangelist for Infragistics. Brad also has been a systems architectand consultant for Verizon Communications and many other clients, and he was aleading .NET evangelist within Ajilon Consulting. His primary interests includeASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networkingtechnologies. E-mail him at mailto:uitips@aspnetPRO.com.