Introduction
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!

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:

1. Add an UpdateProgress control to the web page
2. Set its AssociatedUpdatePanelID property to the ID of 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.)
3. 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 Page_Load event handler; the Label inside the UpdatePanel (PanelTime) is set to the current date and time in the UpdatePanel's Load event handler. Consequently, both Labels display the current date and time whenever the page is first loaded or whenever a full postback occurs; however, only the 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 PanelTime), 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 DisplayAfter property.

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 Click 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.

Looking Forward...
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...

Happy Programming!