Compartir a través de

Introducción al control UpdatePanel

  • Artículo

Actualización: noviembre 2007

En este tutorial agregará compatibilidad con la actualización parcial de páginas a una página web con dos controles de servidor ASP.NET AJAX: el control ScriptManager y el control UpdatePanel. Estos controles eliminan el requisito de actualización de la página entera en cada devolución de datos, lo que mejora la experiencia del usuario. 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.

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 usar un control UpdatePanel

  1. Cree una nueva página y cambie a la vista Diseño.

  2. En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página.

  3. Haga doble clic en el control UpdatePanel para agregarlo a la página.

  4. Haga clic dentro del control UpdatePanel y, a continuación, en la ficha Estándar del cuadro de herramientas, haga doble clic en los controles Label y Button para agregarlos al control UpdatePanel.

    Nota:

    Asegúrese de agregar los controles Label y Button dentro del control UpdatePanel.

  5. Establezca la propiedad Text de Label en Panel creado.

  6. Haga doble clic en el control Button para agregar un controlador para el evento Click del botón.

  7. Agregue el código siguiente al controlador Click, que establece el valor de la etiqueta del panel en la hora actual.

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

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

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

  9. Haga clic en el botón.

    Observe que el texto del panel cambia para mostrar la última vez que se actualizó el contenido del panel. Este texto se establece en el controlador de eventos Click del botón.

    El ejemplo se ha adaptado para mostrar de forma más visible la región de la página que 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 = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </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 = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

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

    El contenido del panel cambia cada vez que hace clic en el botón, pero no se actualiza la página entera. 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.

Introducción a las ventajas del control UpdatePanel

Para comprender mejor las ventajas del control UpdatePanel, puede agregar algunos controles a la página que no estén incluidos en el panel de actualización. De esta forma, puede comprobar cómo su comportamiento es diferente del de los controles incluidos dentro del panel de actualización.

Para mostrar las ventajas de usar el control UpdatePanel

  1. Cree una nueva página y cambie a la vista Diseño.

  2. En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página.

  3. Haga doble clic en el control UpdatePanel para agregarlo a la página.

  4. 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 Calendar para agregarlo al control UpdatePanel.

    Nota:

    Asegúrese de que agrega el control Calendar dentro del control UpdatePanel.

  5. Haga clic fuera del control UpdatePanel y, a continuación, agregue un segundo control Calendar a la página.

    Este control no formará parte del control UpdatePanel.

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

  7. Navegue al mes anterior o siguiente del calendario que está dentro del control UpdatePanel.

    El mes mostrado cambia sin actualizar la página entera.

  8. Navegue al mes anterior o siguiente del calendario que está fuera del control UpdatePanel.

    Se actualiza la página entera.

    El ejemplo se ha adaptado para mostrar de forma más visible la región de la página que 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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </div>
    </form>
</body>
</html>

Actualizar un control UpdatePanel con un botón externo

De forma predeterminada, un control de devolución de datos (como un botón) dentro de un control UpdatePanel produce una actualización parcial de la página. De forma predeterminada, un botón u otro control fuera de un control UpdatePanel provoca que se actualice la página completa, como ha visto.

También puede configurar un control fuera del panel de actualización para actuar como un desencadenador que actualice únicamente el panel de actualización.

Para actualizar un control UpdatePanel con un botón externo

  1. Cree una nueva página y cambie a la vista Diseño.

  2. En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en los controles ScriptManager y UpdatePanel para agregarlos a la página.

  3. Haga clic dentro del control UpdatePanel y, a continuación, en la ficha Estándar del cuadro de herramientas, haga doble clic en el control Label para agregarlo al control UpdatePanel.

  4. Establezca la propiedad Text de la etiqueta en Panel creado.

  5. Haga clic fuera del control UpdatePanel y, a continuación, agregue un control Button.

  6. Haga doble clic en el control Button para agregar un controlador para el evento Click del botón.

  7. Agregue el código siguiente al controlador Click, que establece el valor de la etiqueta del panel en la hora actual.

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

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

  8. Cambie a vista Diseño, seleccione UpdatePanel y, después, consulte la ventana Propiedades.

    Nota:

    Si no se muestra la ventana Propiedades, presione F4.

  9. En el campo Triggers, haga doble clic en el botón de puntos suspensivos (…).

    Se mostrará el cuadro de diálogo Editor de la colección UpdatePanelTrigger.

  10. Haga clic en Agregar para agregar un nuevo desencadenador.

  11. En el campo ControlID de las propiedades de desencadenador, use la lista desplegable para seleccionar Button1.

    En este ejemplo, no se ha especificado la propiedad EventName del desencadenador. Por tanto, el evento predeterminado (el evento Click ) del botón desencadenará la actualización del control UpdatePanel.

  12. Haga clic en Aceptar en el editor de la colección.

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

  14. Haga clic en el botón.

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

  15. Haga clic en el botón varios veces más.

    La hora cambia, pero no se actualiza la página entera.

    Al hacer clic en el botón fuera de UpdatePanel, se actualiza el contenido del panel, ya que el botón se configuró como desencadenador del control UpdatePanel. Un botón que actúa como desencadenador realiza una devolución de datos asincrónica al hacer clic en él, y provoca una actualización del panel de actualización asociado. Este comportamiento se parece al comportamiento del primer ejemplo de este tutorial, donde el botón estaba dentro de UpdatePanel.

    El ejemplo se ha adaptado para mostrar de forma más visible la región de la página que 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 = "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 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></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 = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

Revisión

En este tutorial se han presentado los conceptos básicos del uso de un control UpdatePanel para habilitar las actualizaciones parciales de página. Siempre debe agregar un control ScriptManager y, a continuación, un control UpdatePanel. De forma predeterminada, los controles dentro del panel provocarán que el panel se actualice cuando realicen una devolución de datos. Los controles externos pueden provocar que UpdatePanel se actualice si se configuran como desencadenadores del panel.

El paso siguiente es aprender cómo agregar varios controles UpdatePanel a la página. Para obtener más información, vea Crear una página ASP.NET simple con varios controles UpdatePanel.

Vea también

Conceptos

Información general sobre la representación parcial de páginas

Referencia

UpdatePanel

ScriptManager