ASP.NET AJAX Roadmap--Getting Started (5): Introduction to the UpdateProgress Control

文章出处：http://asp.net/AJAX/Documentation/Live/tutorials/IntroductionUpdateProgress.aspx

 

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

1. Create a new page and switch to Design view.

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

3. Double click the UpdatePanel control to add it to the page.

   

4. Double-click the UpdateProgress control to add it to the page.

5. Inside the UpdateProgress control, add the text Processing….

   

6. Inside the UpdatePanel control add a Label control and a Button control.

7. Set the Text property of the Label control to Initial Page Rendered.

   

8. Double click the Button control to add a handler for the button's Click event.

9. Add the following code to the Click handler, which artificially creates a three-second delay and then displays the current time.

   CS

   protected void Button1_Click(object sender, EventArgs e)
       {
       // Introducing delay for demonstration.
       System.Threading.Thread.Sleep(3000);
       Label1.Text = "Page refreshed at " +
       DateTime.Now.ToString();
       }
       

   VB

   Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       ' Introducing delay for demonstration.
       System.Threading.Thread.Sleep(3000)
       Label1.Text = "Page refreshed at " & _
       DateTime.Now.ToString()
       End Sub
       

   note

   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.

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

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

    Run View

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.

You can associate the UpdateProgress control with a single UpdatePanel control by setting the progress control's AssociatedUpdatePanelID property. In that case, the UpdateProgress control displays a message only when a postback originates inside the associated UpdatePanel control.

In the next procedure, two UpdateProgress controls are added to a page, each associated with a different UpdatePanel control.

To use multiple UpdateProgress controls on a page

1. Create a new page and switch to Design view.

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

3. Double-click the UpdatePanel control two times to add two instances of the control to the page.

   

4. In each UpdatePanel control, add a Label control and a Button control.

5. Set the Text property of both Label controls to Panel Initially Rendered.

   

6. Double-click each Button control to add a handler for each button's Click event.

7. Add the following code to each Click handler, which artificially creates a three-second delay and then displays the current time.

   CS

   protected void Button1_Click(object sender, EventArgs e)
       {
       // Introducing delay for demonstration.
       System.Threading.Thread.Sleep(3000);
       Label1.Text = "Page refreshed at " +
       DateTime.Now.ToString();
       }
       protected void Button2_Click(object sender, EventArgs e)
       {
       // Introducing delay for demonstration.
       System.Threading.Thread.Sleep(3000);
       Label2.Text = "Page refreshed at " +
       DateTime.Now.ToString();
       }
       

   VB

   Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       ' Introducing delay for demonstration.
       System.Threading.Thread.Sleep(3000)
       Label1.Text = "Page refreshed at " & _
       DateTime.Now.ToString()
       End Sub
       Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       ' Introducing delay for demonstration.
       System.Threading.Thread.Sleep(3000)
       Label1.Text = "Page refreshed at " & _
       DateTime.Now.ToString()
       End Sub
       

8. Switch to Design view.

9. Click inside the first UpdatePanel control and add an UpdateProgress control.

10. Inside the UpdateProgress control, add the text Panel1 Updating.

    This sets the ProgressTemplate property.

11. Select the UpdateProgress control, and in the Properties window, set the AssociatedUpdatePanelID property to UpdatePanel1.

    

12. Click inside the second UpdatePanel control and add a second UpdateProgress control.

13. Set the text of the UpdateProgress control to Panel2 Updating and set its AssociatedUpdatePanelID property to UpdatePanel2.

    

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

15. Click the button in the first panel.

    After a short delay, the progress message associated with the first panel is displayed. The other UpdateProgress control is not displayed.

16. Click the button in the second panel.

    The progress message associated with the second panel is displayed.

    note

    By default, starting a new asynchronous postback while an earlier one is in progress cancels the first postback. For more information, see Giving Precedence to a Specific Asynchronous Postback.

    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.

    Run View

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.

See Also

• UpdateProgress
• UpdatePanel
• UpdateProgress Control Overview
• Introduction to the UpdatePanel Control
• Partial-Page Rendering Overview
• Installing ASP.NET AJAX