Crear una página ASP.NET simple con varios controles UpdatePanel

Artículo
10/22/2014

Actualización: noviembre 2007

En este tutorial, trabajará con varios controles UpdatePanel en una página. Si usa varios controles UpdatePanel en una página, puede actualizar de forma incremental regiones de la página, ya sea por separado o en conjunto. Para obtener más información sobre las actualizaciones parciales de página, vea Información general sobre la representación parcial de páginas e Introducción al control UpdatePanel.

Requisitos previos

Para implementar los procedimientos en su propio entorno de desarrollo, necesitará:

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express.
Un sitio web ASP.NET habilitado para AJAX.

Para crear una página con dos regiones que se actualizan de forma independiente

Cree una nueva página y cambie a la vista Diseño.
En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página.
Haga doble clic en el control UpdatePanel del cuadro de herramientas dos veces para agregar dos controles UpdatePanel a la página.
En la ventana Propiedades, establezca la propiedad UpdateMode de ambos controles UpdatePanel() en Conditional.
En uno de los controles UpdatePanel, agregue un control Label y establezca su propiedad Text en Panel creado.
En el mismo control UpdatePanel, agregue un control Button y establezca su propiedad Text en Actualizar panel.
En el otro control UpdatePanel, agregue un control Calendar.
Haga doble clic en el botón Actualizar panel para agregar un controlador de eventos en su evento Click.

Agregue el código siguiente al controlador, que establece el control Label en la hora actual.

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

Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.
Haga clic en el botón.

El texto del panel cambia para mostrar la última vez que se actualizó el contenido del panel.

En el calendario, cambie a un mes diferente.

La hora en el otro panel no cambia. El contenido de ambos paneles se actualiza de forma independiente.

El ejemplo se ha adaptado para mostrar de forma más visible la región de la página que el control UpdatePanel representa.

<%@ 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>

De manera predeterminada, la propiedad ChildrenAsTriggers de un control UpdatePanel se establece en true. Cuando esta propiedad se establece en true, los controles incluidos dentro del panel participan de las actualizaciones parciales de página cuando un control del panel genera una devolución de datos.

Anidar controles UpdatePanel

En algunos escenarios, la anidación de los controles UpdatePanel permite proporcionar funcionalidad de interfaz de usuario que sería difícil proporcionar de otra forma. Los paneles anidados son útiles si desea actualizar separadamente regiones concretas de la página y actualizar al mismo tiempo varias regiones. Esto se puede lograr si establece la propiedad UpdateMode de los controles externo y anidado en Conditional. De esta forma, el panel externo no actualiza la región de su página si sólo se actualiza el panel interno. Sin embargo, si se actualiza el panel externo, también se actualizan los paneles anidados.

En el ejemplo siguiente, se muestra un formulario simplificado de esta idea.

Para anidar controles UpdatePanel

Cree una nueva página y cambie a la vista Diseño.
En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página.
En el cuadro de herramientas, haga doble clic en el control UpdatePanel para agregar un control UpdatePanel a la página.
Haga clic dentro del control UpdatePanel y, a continuación, en la ficha Estándar del cuadro de herramientas, haga doble clic en un control Button para agregarlo al control UpdatePanel.
Establezca la propiedad Text del botón en Actualizar panel externo.
En la ventana Propiedades, establezca la propiedad UpdateMode del control UpdatePanel() en Conditional.
Cambie a la vista Código fuente y agregue el siguiente código dentro del elemento <ContentTemplate> del elemento <asp:UpdatePanel>.
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
El código muestra la hora y se usa para indicar cuándo se representó el marcado por última vez.
Cambie a la vista Diseño, haga clic dentro del control UpdatePanel y, a continuación, agregue un segundo control UpdatePanel dentro del primer panel.
En la ventana Propiedades, establezca la propiedad UpdateMode del control UpdatePanel() anidado en Conditional.
Agregue un control Calendar dentro del control UpdatePanel anidado.
Cambie a la vista Código fuente y agregue el siguiente código dentro del elemento <ContentTemplate> del elemento <asp:UpdatePanel> anidado.
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```

Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.

Al desplazarse al mes anterior o siguiente del calendario en el control UpdatePanel anidado, la hora del panel externo no cambia porque no vuelve a representar el contenido. Sin embargo, al hacer clic en el botón del panel externo, se actualiza la hora del panel interno. El calendario no cambia ya que, de forma predeterminada, la propiedad EnableViewState es true para el control Calendar.

El ejemplo se ha adaptado para mostrar de forma más visible la región de la página que el control UpdatePanel representa.

<%@ 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>

Nota:
El control Calendar sólo parece que no se ha actualizado. De forma predeterminada, cuando se representa el calendario, se establece en el mes y la fecha actuales. Sin embargo, en este paso, al hacer clic en el botón, el calendario muestra el mes y fecha que seleccionó anteriormente. En segundo plano, la página usa el estado de vista del control Calendar para representar el calendario con el mes y la fecha que seleccionó. Esto demuestra que el control UpdatePanel realiza la lógica adecuada para asegurarse de que la página conserva el estado esperado después de una devolución de datos asincrónica. Puede probar este comportamiento si establece la propiedad EnableViewState del control Calendar en false y ejecuta de nuevo estos pasos. En este caso, independientemente del mes al que se desplace, el calendario volverá a mostrar el mes actual al hacer clic en el botón.

El control Calendar sólo parece que no se ha actualizado. De forma predeterminada, cuando se representa el calendario, se establece en el mes y la fecha actuales. Sin embargo, en este paso, al hacer clic en el botón, el calendario muestra el mes y fecha que seleccionó anteriormente. En segundo plano, la página usa el estado de vista del control Calendar para representar el calendario con el mes y la fecha que seleccionó. Esto demuestra que el control UpdatePanel realiza la lógica adecuada para asegurarse de que la página conserva el estado esperado después de una devolución de datos asincrónica. Puede probar este comportamiento si establece la propiedad EnableViewState del control Calendar en false y ejecuta de nuevo estos pasos. En este caso, independientemente del mes al que se desplace, el calendario volverá a mostrar el mes actual al hacer clic en el botón.

Revisión

Este tutorial ha presentado el concepto de uso de varios controles UpdatePanel en una página. Cuando los controles UpdatePanel no están anidados, puede actualizar cada panel de forma independiente si establece la propiedad UpdateMode en Conditional. (El valor predeterminado de la propiedad UpdateMode es Always. Esto hace que el panel se actualice en respuesta a cualquier devolución de datos asincrónica.)

Cuando los paneles están anidados, el comportamiento es ligeramente diferente. Si establece la propiedad UpdateMode de los controles externo y anidado en Conditional, se puede actualizar el panel interno sin actualizar el externo. Sin embargo, si se actualiza el panel de actualización externo, también se actualiza el panel de actualización interno.

Share via

Crear una página ASP.NET simple con varios controles UpdatePanel

Requisitos previos

Para crear una página con dos regiones que se actualizan de forma independiente

Anidar controles UpdatePanel

Para anidar controles UpdatePanel

Revisión

Vea también

Tareas

Conceptos

Recursos adicionales