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

Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls

Introduction

In this tutorial, you will work with multiple UpdatePanel controls on a page. By using multiple UpdatePanel controls on a page, you can incrementally update regions of the page separately or together. For more information about partial-page updates, see Partial-Page Rendering Overview and Introduction to the UpdatePanel Control.

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 create a page with two independently updating regions

  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 in the toolbox two times to add two UpdatePanel controls to the page.

  4. In the Properties window, set the UpdateMode property of both UpdatePanel controls to Conditional.

    UpdatePanel Tutorial
  5. In one of the UpdatePanel controls, add a Label control and set its Text property to Panel Created.

  6. In the same UpdatePanel control, add a Button control and set its Text property to Refresh Panel.

  7. In the other UpdatePanel control, add a Calendar control.

    UpdatePanel Tutorial
  8. Double-click the Refresh Panel button to add an event handler for its Click event.

  9. Add the following code to the handler, which sets the Label control to the current time.

    CS

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

    VB

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

  11. Click the button.

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

  12. In the calendar, move to a different month.

    The time in the other panel does not change. The content of both panels is updated independently.

    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 control represents.

    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.

Nesting UpdatePanel Controls

In some scenarios, nesting UpdatePanel controls enables you to provide UI functionality that would be difficult to provide otherwise. Nested panels are useful when you want to be able to refresh specific regions of the page separately and refresh multiple regions at the same time. You can accomplish this by setting the UpdateMode property of both the outer and nested controls to Conditional. This causes the outer panel not to refresh its page region if only the inner panel is refreshing. However, if the outer panel is refreshed, the nested panels are refreshed also.

In the following example, a simplified form of this idea is demonstrated.

To nest UpdatePanel controls

  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. In the toolbox, double-click the UpdatePanel control to add an UpdatePanel control to the page.

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

  5. Set the button's Text property to Refresh Outer Panel.

    UpdatePanel Tutorial
  6. In the Properties window, set the UpdateMode property of the UpdatePanel control to Conditional.

    UpdatePanel Tutorial
  7. Switch to Source view and add the following code inside the <ContentTemplate> element of the <asp:UpdatePanel> element.

    CS

    Last refresh <%=DateTime.Now.ToString() %> <br />
    
    

    VB

    Last refresh <%=DateTime.Now.ToString() %> <br />
    
    

    The code displays the time and is used to indicate when the markup was last rendered.

  8. Switch to Design view, click inside the UpdatePanel control, and then add a second UpdatePanel control inside the first panel.

  9. In the Properties window, set the UpdateMode property of the nested UpdatePanel control to Conditional.

    UpdatePanel Tutorial
  10. Add a Calendar control inside the nested UpdatePanel control.

    UpdatePanel Tutorial
  11. Switch to Source view and add the following code inside the <ContentTemplate> element of the nested <asp:UpdatePanel> element.

    CS

    Last refresh <%=DateTime.Now.ToString() %> <br />
    
    

    VB

    Last refresh <%=DateTime.Now.ToString() %> <br />
    
    
  12. Save your changes and then press CTRL+F5 view the page in a browser.

    When you move to the previous or next month in the calendar in the nested UpdatePanel control, the outer panel's time does not change because the content is not re-rendered. In contrast, when you click the button in the outer panel, the time in the inner panel is refreshed. The calendar does not change because by default the EnableViewState property is true for the Calendar control.

    To run the example, click the Run It button. The example is styled to better show the region of the page that the UpdatePanel control represents.

    note

    The Calendar control only appears not to have been updated. By default, when the calendar is rendered, it is set to the current month and date. However, in this step, when you click the button, the calendar displays the month and date that you selected earlier. Under the covers, the page uses the Calendar control's view state to render the calendar with the month and date that you selected. This illustrates that the UpdatePanel control performs the appropriate logic to make sure that the page stays in the expected state after an asynchronous postback. You can test this by setting the Calendar control's EnableViewState property to false and running these steps again. In that case, regardless of what month you move to, the calendar will revert to displaying the current month when you click the button.

Review

This tutorial introduced the concept of using multiple UpdatePanel controls on a page. When UpdatePanel controls are not nested you can update each panel independently by setting the UpdateMode property to Conditional. (The default value of the UpdateMode property is Always. This causes the panel to refresh in response to any asynchronous postback.)

When panels are nested, the behavior is slightly different. If you set the UpdateMode property of both the outer control and the nested control to Conditional, the inner panel can be refreshed without refreshing the outer panel. However, if the outer update panel is refreshed, the inner update panel is refreshed also.