Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls

Artigo
10/15/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 Visão geral de renderização de página parcial and Introdução ao Controle UpdatePanel.

Pré-requisitos

Para implementar os procedimentos no seu próprio ambiente de desenvolvimento você precisa:

Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express Edition.
Um site da Web ASP.NET habilitado para AJAX.

To create a page with two independently updating regions

Crie uma nova página e alterne para modo de Design.
Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.
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.
Em um do UpdatePanel Adicionar controles, um Label controlar e conjunto seus Text propriedade para a criação de painel.
No mesmo UpdatePanel controle, adicione um Button controlar e conjunto seus Text propriedade para atualizar o painel.
In the other UpdatePanel control, add a Calendar control.
clicar duas vezes no botão Atualizar painel para adicionar um manipulador de eventos para o seu Click evento.

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();
}

Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.
Clique no botão.

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 >

    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 >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1"  Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" ></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 >

    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 >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1"  Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

Por padrão, a propriedade ChildrenAsTriggers de um controle UpdatePanel é true.Quando essa propriedade é definida como true, controles dentro do painel participam das atualizações parciais de página quando qualquer controle no painel causa uma postagem.

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

Crie uma nova página e alterne para modo de Design.
Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.
In the toolbox, double-click the UpdatePanel control to add an UpdatePanel control to the page.
Clique dentro do controle UpdatePanel e,em seguida, na guia Padrão da caixa de ferramentas, clique duas vezes em um controle Button para adicioná-lo ao controle UpdatePanel.
conjunto Text propriedade para atualizar painel externo.
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 />
```

Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.

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

Observação:
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.

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.

Revisão

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.

Share via

Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls

Pré-requisitos

To create a page with two independently updating regions

Nesting UpdatePanel Controls

To nest UpdatePanel controls

Revisão

Consulte também

Tarefas

Conceitos

Recursos adicionais