Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls

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.
   
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.
   
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.
   
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.
   
   C#

   VB

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

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.
    The example is styled to better show the region of the page that the UpdatePanel control represents.
    
    C#

    VB

    <%@ Page Language="C#" %>
    
    
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    
    
    
    
        
        
    
    
        
    
    
        
    
    
            
            
            
                
                    
    
    
                        
    UpdatePanel1
                        
    
                        
                    
    
            
            
                
                    
    
    
                        
    UpdatePanel2
                        
                        
    
                        
                    
    
            
        
    
    

    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.
   
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.
   
6. In the Properties window, set the UpdateMode property of the UpdatePanel() control to Conditional.
   
7. Switch to Source view and add the following code inside the element of the element.
   
   C#

   VB

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

   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.
   
10. Add a Calendar control inside the nested UpdatePanel control.
    
11. Switch to Source view and add the following code inside the element of the nested element.
    
    C#

    VB

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

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.
    The example is styled to better show the region of the page that the UpdatePanel control represents.
    
    C#

    VB

    <%@ Page Language="C#" %>
    
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    "http://www.w3.org/1999/xhtml" >
    "server">
        
        
    
    
        
    
    "form1" runat="server">
        
    
    
            "ScriptManager1" runat="server">
            
            "UpdatePanel1" UpdateMode="Conditional" runat="server">
                
                    
    
    
                    
    Parent UpdatePanel
                    Last refresh <%=DateTime.Now.ToString() %> 
    
                    "Button1" runat="server" Text="Refresh Outer Panel" />
                    "UpdatePanel2" runat="server">
                        
                            
    
    
                            
    Nested UpdatePanel
                             Last refresh <%=DateTime.Now.ToString() %> 
    
                            "Calendar1" runat="server">