Documentation for: ASP.NET Ajax Version 1.0

This documentation is for a previous version. For the current released version, see the ASP.NET Ajax documentation on MSDN.

 

 

 

 

 

 

 

Skip Navigation Links.
Tutorials
Sample ASP.NET AJAX Application
ASP.NET AJAX and JavaScript
Extending JavaScript with ASP.NET AJAX
Creating Custom Client Script in ASP.NET AJAX
Dynamically Assigning ASP.NET AJAX Script References
Globalizing a Date by Using Client Script
Embedding a JavaScript File as a Resource in an Assembly
Embedding Localized Resources for a JavaScript File
Adding Localized Resources to a JavaScript File
Creating Custom Client Events
The UpdatePanel Control
Introduction to the UpdatePanel Control
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Using the UpdatePanel Control with Data-Bound Controls
Using the UpdatePanel Control with Master Pages
Using the UpdatePanel Control with User Controls
Using the UpdatePanel Control with a Web Service
Customizing Error Handling for UpdatePanel Controls
Animating UpdatePanel Controls
Canceling an Asynchronous Postback
Giving Precedence to a Specific Asynchronous Postback
Working with PageRequestManager Events
The UpdateProgress Control
Introduction to the UpdateProgress Control
Programming UpdateProgress Controls in Client Script
The Timer Control
Introduction to the Timer Control
Using the Timer Control with Multiple UpdatePanel Controls
ASP.NET Application Services
Using Forms Authentication
Using Profile Information
Web Services
Exposing Web Services to Client Script
Calling Web Services from Client Script
ASP.NET AJAX Extensibility
Creating Custom ASP.NET AJAX Non-Visual Client Components
Creating Custom ASP.NET AJAX Client Controls
Creating an Extender Control
Adding Client Capabilities to a Web Server Control
Creating a Client Component Class Using the Prototype Model
Defining Custom Component Properties and Raising PropertyChanged Events
Releasing Component Resources

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

  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.

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

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

    UpdateProgress Tutorial
  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.

    UpdateProgress Tutorial
  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.

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.

    UpdateProgress Tutorial
  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.

    UpdateProgress Tutorial
  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.

    UpdateProgress Tutorial
  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.

    UpdateProgress Tutorial
  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.

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.