ASP.NET => UpdatePanel

Introducción

Este tema describe cómo agregar soporte de actualización de página parcial a una página web utilizando dos controles de servidor Ajax de Microsoft: el control ScriptManager y el control UpdatePanel. Estos controles eliminan el requisito de actualizar toda la página con cada devolución, lo que mejora la experiencia del usuario.

Sintaxis

<asp: UpdatePanel ID = "UpdatePanel1" runat = "server">
</ asp: UpdatePanel>

Observaciones

Se debe agregar un ScriptManager a la página para que funcione UpdatePanel.

Ejemplo de panel de actualización

Paso 1: Agrega ScriptManager a tu página

<asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

Paso 2: agregue UpdatePanel a su página justo después de ScriptManager.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate></ContentTemplate>
        </asp:UpdatePanel>

Paso 3: Después de agregar contenido a la plantilla de contenido de UpdatePanels, su página aspx debe tener un aspecto similar al siguiente:

<%@ 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>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

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

Paso 4: Agrega esta parte a tu página de C #:

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

Paso 5: Ahora ejecuta tu aplicación.

Resultado Esperado:

El contenido del panel cambia cada vez que hace clic en el botón, pero no se actualiza toda la página. De forma predeterminada, la propiedad ChildrenAsTriggers de un control UpdatePanel es verdadera. Cuando esta propiedad se establece en true, los controles dentro del panel participan en las actualizaciones de páginas parciales cuando cualquier control en el panel provoca una devolución de datos.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

ASP.NET
UpdatePanel

Buscar..

Introducción

Sintaxis

Observaciones

Ejemplo de panel de actualización