Wahlin on .NET

Inform Users With Customized Visual Feedback

Add and customize visual cues on your AJAX-enabled Web pages with the UpdateProgress control and PageRequestManager class.

• By Dan Wahlin
• 06/26/2007

AJAX-enabled applications retrieve requested data more quickly and provide users with a rich and engaging UI experience. While AJAX offers many user benefits, it also has a downside that you need to take seriously. By default, AJAX-enabled applications don't provide users with the visual feedback to which they are accustomed. For example, full-page reloads signal to users that their requested data is available (if the data isn't available, they see error messages). Because AJAX asynchronous postback operations occur behind the scenes, users don't receive this type of visual cue. You must to account for this issue in your development, especially for AJAX operations that take a significant amount of time to complete.

Using the UpdateProgress Control
You can use several techniques to provide users with visual feedback while asynchronous postback operations occur. Leveraging the ASP.NET AJAX UpdateProgress control (which is part of the ASP.NET AJAX Extensions) is a simple way to show your users visual cues such as animated images or flash movies. Plus, UpdateProgress lets you display visual feedback with little or no coding.

Listing 1 demonstrates how you can use the UpdateProgress control to display visual feedback as a partial-page update is performed. Looking through the code, you'll see that the UpdateProgress control exposes a ProgressTemplate template. You can place content to show the user as an asynchronous postback operation is triggered (by an UpdatePanel in Listing 1) inside of this template. An animated image from in GIF file is added as a visual cue in Listing 1. If you want, you can add flash videos or other types of visual media. Add this content by typing it directly into the template or by using Visual Studio 2005's design-time features.

3 UpdateProgress Control Properties
The UpdateProgress control exposes three key properties: AssociatedUpdatePanelID, DisplayAfter and DynamicLayout. The AssociatedUpdatePanelID property is used when the UpdateProgress control is placed outside of an UpdatePanel control. By assigning the ID of an UpdatePanel control to this property, the UpdateProgress control will automatically show its content anytime the associated UpdatePanel triggers a partial-page update. This property isn't required when the UpdateProgress control is placed within an UpdatePanel control's ContentTemplate template (as shown in Listing 1).

The DisplayAfter property determines when content inside of the UpdateProgress control's ProgressTemplate template is displayed. It defaults to a value of 500 milliseconds. This means that if an operation takes less than 500 milliseconds to complete, then the content in the ProgressTemplate won't display. Setting this value prevents images or other visual cues from displaying briefly on the screen during quick partial-page update operations. If you don't want visual feedback to be shown for operations that take less than two seconds to complete, then set the DisplayAfter property to a value of 2000.

Finally, the DynamicLayout control determines whether the content within the ProgressTemplate template should take up a set amount of space within the page's layout. When you set the DynamicLayout value to True (the default value), the content within the UpdateProgress control's template will dynamically inject into the page. When you set it to False, the content in the template will take up the necessary amount of space on the page when it initially loads.

Using the PageRequestManager Class
In addition to the UpdateProgress control, the ASP.NET AJAX Extensions provide a key class named PageRequestManager that lets you provide users with customized visual feedback. This class manages the client-side Web page life cycle and allows you to tie in visual cues as different events are fired.

The PageRequestManager class exposes five different events that can be used to know when a partial-page update request is initialized, when a request has started, when data returned from a request is loading, when data is finished loading and when a request has completed. These five events are described in Table 1.

The beginRequest and endRequest events are useful when you'd like to provide customized visual feedback to users. As an UpdatePanel control makes a partial-page update request, the beginRequest event is fired. This is your opportunity to begin animating the look-and-feel of various elements within your Web page. When the request completes, the endRequest event is fired. This is your opportunity to remove any visual cues from the page. Listing 2 shows you how to access an instance of the PageRequestManager class and hook its beginRequest and endRequest events to event handlers.

Once the PageRequestManager class instance is accessed and its beginRequest event fires during a partial-page update, the BeginRequest event handler is called. When called, this event starts a client-side interval timer that animates a div wrapping an UpdatePanel control. Each time the interval timer fires, a method named Animate() is called. Another method named GetCssClass() changes the CSS class on the div wrapping. Each time the interval timer fires, the div's CSS class is changed from SolidLine to DottedLines (and vice versa). These changes give an animated effect to the target div. Listing 3 shows the BeingRequest event handler, the Animate() method and the GetCssClass() helper method.

When the PageRequestManager class's endRequest event fires an event handler named EndRequest() is called. This call stops the interval timer and resets the div's CSS class back to its normal state (see Listing 4).

Click here for this column's code download.

By using the UpdateProgress control, you can provide users with visual feedback while long-running asynchronous postback operations occur within a Web page. Although the control doesn't actually track the progress of an operation, it does help prevent users from leaving pages or closing browsers prematurely.

The PageRequestManager has many uses in addition to animating elements within a Web page during partial-page updates. You can also use it to access data that's returned from a partial-page update and can be used to update other parts of the Web page, cancel requests or abort requests. For more information about the PageRequestManager class, go here.