Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Providing Visual Feedback with the UpdateProgress ControlBy Scott Mitchell
Microsoft's ASP.NET AJAX Framework helps page developers design more interactive web pages by streamlining the postback mechanism. In traditional web pages, a full postback involves the browser re-requesting the page, which is then re-rendered. This re-rendered page markup is returned, in its entirety, to the browser for display. Ajax techniques improve the user's experience in two primary ways through the use of partial postbacks: first, a partial postback is asynchronous, meaning that the user can still interact with the page while waiting for the partial postback to complete; second, and more importantly, because a partial page postback updates only a particular region (or regions) of a page, less data needs to be shuttled between the client and the server, resulting in a quicker and smoother experience.
One benefit of full page postbacks is that the browser provides a number of cues to the user that a postback is underway. Upon the initiation of a postback, the little Internet icon in the browser's upper right corner starts spinning and a progress indicator is shown in the status bar, among other signs. With a partial page postback, however, no feedback is provided to the user. Consequently, a user may have instigated a partial page postback, but not realize it if the response is lagging. This may prompt them to click the button (or whatever instigated the partial postback) again, or they may just decry your website as buggy and close their browser, never to return again!
The good news is that the ASP.NET AJAX Framework includes the UpdateProgress control, a Web control designed specifically for providing visual feedback to a user during a long-running partial page postback. This article examines using the UpdateProgress. Read on to learn more!
Providing Visual Feedback During a Partial Page Postback
Because the browser does not innately provide visual feedback to the user when a partial page postback is occurring, it is our responsibility to embed such functionality in our web page. If you visit Ajax-enabled web applications you've likely seen this sort of feedback in action. For example, GMail (Google's online e-mail service) displays the text "LOADING" in the upper right corner of the web page whenever a user pages to the next page of email, filters the displayed email by a label, or instigates some other partial postback action. Other sites alert the user that a partial page postback is in effect through an animated GIF image, such as a spinning indicator.
Adding such visual feedback in response to a partial page postback is easy with the ASP.NET AJAX Framework. In short, all we have to do is:
- Add an UpdateProgress control to the web page
- Set its
AssociatedUpdatePanelIDproperty to the
IDof the UpdatePanel on the page that you want to display visual feedback for when it triggers a partial page postback. (See the Using the UpdatePanel installment in this article series for more information on using the UpdatePanel control.)
- Define the markup to emit during the partial page postback in the UpdateProgress control's
ProgressTemplate. (If you are adding content through the Designer, you can directly type text in the UpdateProgress control, as well as drag and drop Web controls from the Toolbox.)
Adding and Configuring an UpdateProgress Control
At the end of this article you will find a download that includes all of the demos covered in this article. I invite you to download this Visual Studio 2005 project and follow along at your computer. The first demo is
SimplePartialPostback.aspx, which is a very simple Ajax-enabled web page. Specifically, the page has a single UpdatePanel control. Inside the UpdatePanel you'll find a Label and a Button. Likewise, there is a Label and a Button outside of the UpdatePanel.
When the Button inside the UpdatePanel is clicked, a partial page postback ensues. When the Button on the page is clicked, a full postback occurs.
The page Label (
PageTime) has its
Text property set to the current date and time in the
event handler; the Label inside the UpdatePanel (
PanelTime) is set to the current date and time in the UpdatePanel's
handler. Consequently, both Labels display the current date and time whenever the page is first loaded or whenever a full postback occurs; however, only
PanelTime Label is updated when a partial page postback occurs.
Now, imagine that we wanted to provide the user with visual feedback whenever a partial page postback occurs. The first step is to add an UpdateProgress
control to the page. Drag an UpdateProgress control from the Toolbox onto the page, beneath the UpdatePanel control. Set the UpdateProgress control's
AssociatedUpdatePanelID property to the
ID of the UpdatePanel control (
UpdatePanel1). Next, add the content
to display during the partial page postback. You can enter this directly through the browser. If you manually enter the markup through the Source view,
make sure to place it within a
ProgressTemplate. I've decided to use the text "LOADING" dispayed in a bold, red font. The UpdateProgress
control's resulting declarative markup follows:
Visit the page and click the "Partial Postback" button. What happens? A partial postback occurs (as evidenced by the updated time shown in
but the LOADING message was not displayed. The problem is that our partial postback occurred too quickly. The UpdateProgress control does not display unless
there is a certain latency between the start of the partial page postback and the time the response is returned. By default, this is half a second, although
this property can be configured via the UpdateProgress control's
To see the effects of the UpdateProgress we need to introduce an artificial delay in processing the partial page postback. Of course, we would never
want to add an artificial delay in a real-world application, but this delay is often needed in testing because it can be hard to simulate a delay when
working locally. To force a delay in processing the partial page postback, create an event handler for the "Partial Postback" Button control's
event and add the following code:
This adds a five second delay. You can adjust the parameter passed to the
Sleep method to increase or decrease this delay.
With the above code in place, clicking the "Partial Postback" button now displays the LOADING message, which remains until the response is received from the web server.
A More "Real-World" Example of Using the UpdateProgress Control
The download includes a more interesting "real-world" demo that uses Ajax techniques to display a master/detail report. The page consists of two UpdatePanel controls: one lists the categories from the Northwind database while the other lists the products that belong to the category selected from the first list. (We discussed using multiple UpdatePanel controls on a page in the Using the UpdatePanel installment.) There's also an UpdateProgress control on the page that uses an animated GIF in the loading message. (You can create your own customized animated Ajax loading GIFs for free over at www.AjaxLoad.info.)
The demo uses cascading stylesheets to display the loading message as a
<div> that stretches over the entire area of the page. It
also employes a CSS filter to display the loading message with a semi-translucent background. (Caveat: I know just enough CSS to be dangerous; please don't
think my CSS styling is an example of best practices.) The following screenshots show the page in action. The first screenshot shows the page after
the Beverages category has been selected. The corresponding products are showin in the pane on the right. The second screenshot shows the page
after a new category has been selected. While the products for that category are being retrieved, a "LOADING PRODUCTS FOR SELECTED CATEGORY" message
is displayed along with an animated loading GIF. Download the code at the end of this article to try this demo out (or modify it) for yourself.
Another ASP.NET AJAX Framework control we've yet to cover is the Timer, which is useful for performing some client-side task on a timed basis (such as updating a portion of the page every ten seconds). We will examine this control in future installment and then move on to the controls in the ASP.NET AJAX Control Toolkit. Until then...