Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls

Article
10/22/2014

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.

Prerequisites

To implement the procedures in your own development environment you need:

Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express.
An AJAX-enabled ASP.NET Web site.

To create a page with two independently updating regions

Create a new page and switch to Design view.
In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
Double-click the UpdatePanel control in the toolbox two times to add two UpdatePanel controls to the page.
In the Properties window, set the UpdateMode property of both UpdatePanel() controls to Conditional.
In one of the UpdatePanel controls, add a Label control and set its Text property to Panel Created.
In the same UpdatePanel control, add a Button control and set its Text property to Refresh Panel.
In the other UpdatePanel control, add a Calendar control.
Double-click the Refresh Panel button to add an event handler for its Click event.

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

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Panel refreshed at " & _
        DateTime.Now.ToString()
End Sub

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

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

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

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.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

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

Create a new page and switch to Design view.
In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
In the toolbox, double-click the UpdatePanel control to add an UpdatePanel control to the page.
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.
Set the button's Text property to Refresh Outer Panel.
In the Properties window, set the UpdateMode property of the UpdatePanel() control to Conditional.
Switch to Source view and add the following code inside the <ContentTemplate> element of the <asp:UpdatePanel> element.
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
The code displays the time and is used to indicate when the markup was last rendered.
Switch to Design view, click inside the UpdatePanel control, and then add a second UpdatePanel control inside the first panel.
In the Properties window, set the UpdateMode property of the nested UpdatePanel() control to Conditional.
Add a Calendar control inside the nested UpdatePanel control.
Switch to Source view and add the following code inside the <ContentTemplate> element of the nested <asp:UpdatePanel> element.
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```

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.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

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.

Partager via

Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls

Prerequisites

To create a page with two independently updating regions

Nesting UpdatePanel Controls

To nest UpdatePanel controls

Review

See Also

Tasks

Concepts

Ressources supplémentaires