Introduction to the UpdateProgress Control

Introduction

In this tutorial you will use UpdateProgress controls to display the progress of partial-page updates. If a page contains UpdatePanel controls, you can also include UpdateProgress controls to keep users informed about the status of partial-page updates. You can use one UpdateProgress control to represent the progress of partial-page updates for the whole page. Alternatively, you can include an UpdateProgress control for every UpdatePanel control. Both of these patterns are shown in this tutorial.

You can see the code in action in this tutorial by clicking the Run It buttons. To implement the procedures in your own development environment you need:

Microsoft Visual Studio 2005 or Visual Web Developer Express Edition.

The latest release of Microsoft ASP.NET AJAX installed and configured. For more information, see Installing ASP.NET AJAX.

An ASP.NET AJAX Web site.

Using a Single UpdateProgress Control

You will begin by using a single UpdateProgress control to show the progress for all partial-page updates on the page.

To use a single UpdateProgress control for the whole page

Create a new page and switch to Design view.

In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.

The handler for the Click event intentionally introduces a delay for this tutorial. In practice, you would not introduce a delay. Instead, the delay would be the result of server traffic or of server code that takes a long time to process, such as a long-running database query.

Save your changes and then press CTRL+F5 to view the page in a browser.

Click the button.

After a short delay, the progress message is displayed. When the handler for the Click event has finished, the progress message is hidden and the time that is displayed in the panel is updated.

To see the full example in action, click the Run It button. The example is styled to better show the region of the page that the UpdatePanel represents.

Using Multiple UpdateProgress Controls

One UpdateProgress control on the page can show a progress message for all UpdatePanel controls on the page. Asynchronous postbacks originating inside an UpdatePanel control cause the UpdateProgress control to display its message. Postbacks from controls that are triggers for the panel also display the message.

Review

This tutorial introduced two ways to use the UpdateProgress control. The first way is to add one UpdateProgress control on the page that is not associated with any particular UpdatePanel control. In that case, the control shows a progress message for all UpdatePanel controls. The second way to use the progress control is to add multiple UpdateProgress controls and to associate each one with a different UpdatePanel control.