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 UpdatePanel Control

Introduction

In this tutorial you will add partial-page update support to a Web page by using two Microsoft ASP.NET 2.0 AJAX Extensions server controls: the ScriptManager control and the UpdatePanel control. These controls remove the requirement to refresh the whole page with each postback, which improves the user experience. For more background on partial-page updates, see Partial-Page Rendering Overview.

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

To use an UpdatePanel control

  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.

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

    UpdatePanel Tutorial
  4. Click inside the UpdatePanel control and then in the Standard tab of the toolbox, double-click the Label and Button controls to add them to the UpdatePanel control.

    note

    Make sure that you add the Label and Button controls inside the UpdatePanel control.

  5. Set the Text property of the Label to Panel created.

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

  7. Add the following code to the Click handler, which sets the value of the label in the panel to the current time.

    CS

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
    
    

    VB

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
    
    
  8. Save your changes and press CTRL+F5 to view the page in a browser.

  9. Click the button.

    Notice that the text in the panel changes to display the last time the panel's content was refreshed. This text is set in the button's Click event handler.

    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.

    The panel content changes every time that you click the button, but the whole page is not refreshed. By default, the ChildrenAsTriggers property of an UpdatePanel control is true. When this property is set to true, controls inside the panel participate in partial-page updates when any control in the panel causes a postback.

Understanding the Benefits of the UpdatePanel Control

You can understand the benefits of the UpdatePanel control best by adding some controls to the page that are not included in the update panel. You can then see how their behavior differs from the controls inside the update panel.

To demonstrate the benefits of using UpdatePanel control

  1. Create a new page and switch to in 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. Click inside the UpdatePanel control and then in the Standard tab of the toolbox, double-click a Calendar control to add it to the UpdatePanel control.

    note

    Make sure that you add the Calendar control inside the UpdatePanel control.

    UpdatePanel Tutorial
  5. Click outside the UpdatePanel control and then add a second Calendar control to the page.

    This control will not be part of the UpdatePanel control.

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

  7. Navigate to the previous or next month in the calendar that is inside the UpdatePanel control.

    The displayed month changes without refreshing the whole page.

  8. Navigate to the previous or next month in the calendar that is outside the UpdatePanel control

    The whole page is refreshed.

    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.

Refreshing an UpdatePanel Control with an External Button

By default, a postback control (such as a button) inside an UpdatePanel control causes a partial-page update. By default, a button or other control outside an UpdatePanel control causes the whole page to be refreshed, as you have seen.

You can also configure a control outside the update panel to be a trigger that refreshes just the update panel.

To refresh of an UpdatePanel control with an external button

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

  2. In the AJAX Extensions tab of the toolbox, double-click the ScriptManager and UpdatePanel controls to add one of each control to the page.

    UpdatePanel Tutorial
  3. Click inside the UpdatePanel control, and then in the Standard tab of the toolbox, double-click the Label control to add it to the UpdatePanel control.

  4. Set the Text property of the label to Panel created.

    UpdatePanel Tutorial
  5. Click outside the UpdatePanel control and then add a Button control.

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

  7. Add the following code to the Click handler, which sets the value of the label in the panel to the current time.

    CS

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
    
    

    VB

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
    
    
  8. Switch to Design view, select the UpdatePanel, and then view the Properties window.

    UpdatePanel Tutorial
    note

    If the Properties window is not displayed, press F4.

  9. In the Triggers field, double-click the ellipsis (…) button.

    The UpdatePanelTrigger Collection Editor dialog box is displayed.

    UpdatePanel Tutorial
  10. Click Add to add a new trigger.

  11. In the ControlID field of the trigger properties, use the drop-down list to select Button1.

    UpdatePanel Tutorial

    In this example, the EventName property of the trigger was not specified. Therefore, the button's default event (the Click event) will trigger the refresh of the UpdatePanel control.

  12. Click OK in collection editor.

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

  14. Click the button.

    The text in the panel changes to display the time that the panel's content was refreshed.

  15. Click the button several more times.

    The time changes, but the whole page is not refreshed.

    Clicking the button outside the UpdatePanel refreshes the panel's content because you configured the button to be a trigger for the UpdatePanel control. A button that is a trigger performs an asynchronous postback when you click it, and causes a refresh of the associated update panel. This behavior resembles the behavior of the first example in this tutorial, where the button was inside the UpdatePanel.

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

Review

This tutorial introduced the basic concepts of using an UpdatePanel control to enable partial-page updates. You must always add a ScriptManager control, and then add an UpdatePanel control. By default, controls inside the panel will cause the panel to refresh when they perform a postback. External controls can cause an UpdatePanel to be refreshed if they are configured as a trigger for the panel.

The next step is to learn about how to add multiple UpdatePanel controls to the page. For more information, see Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls.