Programming Microsoft ASP.NET 4 - Dino Esposito [453]
Giving Feedback to the User
The mechanics of the asynchronous postback keeps the displayed page up and running. So having the computer engaged in a potentially long task might be problematic. Will the user resist the temptation of clicking that button over and over again? Will the user patiently wait for the results to show up? Finally, will the user be frustrated and annoyed by waiting without any clue of what’s going on? After all, if the page is sustaining a full postback, the browser itself normally provides some user feedback that this is happening. Using ASP.NET AJAX, the callback doesn’t force a browser-led postback and the browser’s visual feedback system is not called upon to inform the user things are happening.
The continuous experience raises new issues. Feedback should be given to users to let them know that an operation is taking place. In addition, user-interface elements should be disabled if the user starts new operations by clicking on the element. ASP.NET AJAX supplies the UpdateProgress control to display a templated content while any of the panels in the page are being refreshed.
The UpdateProgress Control
The UpdateProgress control is designed to provide any sort of feedback on the browser while one or more UpdatePanel controls are being updated. If you have multiple panels in the page, you might want to find a convenient location in the page for the progress control or, if possible, move it programmatically to the right place with respect to the panel being updated. You can use cascading style sheets (CSSs) to style and position the control at your leisure.
The user interface associated with an UpdateProgress control is displayed and hidden by the ASP.NET AJAX framework and doesn’t require you to do any work on your own. The UpdateProgress control features the properties listed in Table 20-6.
Table 20-6. Properties of the UpdateProgress Control
Property
Description
AssociatedUpdatePanelID
Gets and sets the ID of the UpdatePanel control that this control is associated with.
DisplayAfter
Gets and sets the time in milliseconds after which the progress template is displayed. It is set to 500 by default.
DynamicLayout
Indicates whether the progress template is dynamically rendered in the page. It is set to true by default.
ProgressTemplate
Indicates the template displayed during an asynchronous postback that is taking longer than the time specified through the DisplayAfter property.
An UpdateProgress control can be bound to a particular UpdatePanel control. You set the binding through the AssociatedUpdatePanelID string property. If no updatable panel is specified, the progress control is displayed for any panels in the page. The user interface of the progress bar is inserted in the host page when the page is rendered. However, it is initially hidden from view using the CSS display attribute.
When set to none, the CSS display attribute doesn’t display a given HTML element and reuses its space in the page so that other elements can be shifted up properly. When the value of the display attribute is toggled on, existing elements are moved to make room for the new element.
If you want to reserve the space for the progress control and leave it blank when no update operation is taking place, you just set the DynamicLayout property to false.
Composing the Progress Screen
The control displays the contents of the ProgressTemplate property while waiting for a panel to update. You can specify the template either declaratively or programmatically. In the latter case, you assign the property any object that implements the ITemplate interface. For the former situation, you can easily specify the progress control’s markup declaratively, as shown in the following code:
...
You can place any combination of