This article is currently in the process of being translated into Spanish (~99% done).

Controls:

UpdatePanel control

El UpdatePanel es probablemente el control más importante de la paquetería ASP.NET AJAX. Te permitirá AJAX'ificar controles contenidos en él, permitiendo el renderizado parcial de esa área. Ya lo hemos utilizado en el ejemplo Hello World, y en este capítulo, profundizaremos en más aspectos del control.

La etiqueta <asp:UpdatePanel> tiene dos subetiquetas - las etiquetas ContentTemplate y Triggers. La etiqueta ContentTemplate es requerida, ya que en ella se encuentra el contenido del panel. El contenido puede ser cualquier cosa que normalmente pondrías en tu página, desde texto puro a controles web. La etiqueta Triggers te permite definir ciertos disparadores que harán que el panel actualice su contenido. El siguiente ejemplo demostrará el uso de ambas subetiquetas.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>UpdatePanel</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger controlid="UpdateButton2" eventname="Click" />
        </Triggers>
            <ContentTemplate>
                <asp:Label runat="server" id="DateTimeLabel1" />
                <asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton_Click" text="Update" />               
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">           
            <ContentTemplate>
                <asp:Label runat="server" id="DateTimeLabel2" />
                <asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton_Click" text="Update" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Este es el CodeBehind. Solo añade el siguiente método al archivo.

protected void UpdateButton_Click(object sender, EventArgs e)
{
    DateTimeLabel1.Text = DateTime.Now.ToString();
    DateTimeLabel2.Text = DateTime.Now.ToString();
}

¿Qué es lo que hace este ejemplo? Prueba correrlo, y haz click en los dos botones. Notarás que el primer botón solo actualiza la primer fecha, mientras que el segundo actualiza ambas. ¿Por qué? Hemos establecido que los paneles se actualicen de manera condicional, lo cual significa que su contenido solo es actualizado si algo dentro de ellos ocasiona un postback, o si uno de los triggers definidos es disparado.

Como puedes ver, el primer UpdatePanel tiene un trigger que hace referencia al segundo botón. Esto asegurará que el primer panel sea actualizado incluso cuando un control en un UpdatePanel distinto sea utilizado.

La etiqueta AsyncPostBackTrigger es bastante sencilla - solo utiliza dos atributos, controlid, una referencia al control que lo puede disparar, y eventname, el cual nos dice que eventtype puede ocasionar que se dispare. Si quieres que el contenido de un UpdatePanel se actualice sin importar qué, puedes cambiar la propiedad updatemode a Always.

En general, solo debes tener UpdatePanels alrededor de áreas en las que desees realizar actualizaciones parciales. No envuelvas tu página entera dentro de un UpdatePanel, y no tengas miedo de utilizar varios de ellos, ya que esto te dará más control sobre que áreas actualizar y cuando deben hacerlo.

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!

Metadata

UpdatePanel control