Tutorial: Usar el control Timer de ASP.NET con varios controles UpdatePanel

Actualización: noviembre 2007

En este tutorial se utilizará un control Timer para actualizar el contenido de dos controles UpdatePanel. El control Timer se colocará fuera de los dos controles UpdatePanel y se configurará como un desencadenador de ambos paneles.

Requisitos previos

Para implementar los procedimientos de este tutorial necesitará:

  • Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express.

  • Un sitio web ASP.NET habilitado para AJAX.

Para actualizar los controles UpdatePanel durante un intervalo programado

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

  2. Si la página aún no contiene un control ScriptManager, en la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página.

  3. En el cuadro de herramientas, haga doble clic en el control Timer para agregarlo a la página web.

    Nota:

    El control Timer puede funcionar como un desencadenador dentro o fuera de un control UpdatePanel. En este ejemplo se muestra cómo usar el control Timer fuera de un control UpdatePanel. Para obtener un ejemplo de cómo se utiliza un control Timer dentro de un control UpdatePanel, vea Tutorial: Introducción al control Timer.

  4. En el cuadro de herramientas, haga doble clic en el control UpdatePanel para agregar un panel a la página y, a continuación, establezca su propiedad UpdateMode en Conditional.

  5. Haga doble clic de nuevo en el control UpdatePanel para agregar un segundo panel a la página y, a continuación, establezca su propiedad UpdateMode en Conditional.

  6. Haga clic dentro del control UpdatePanel denominado UpdatePanel1 y, en la ficha Estándar del cuadro de herramientas, haga doble clic en el control Label para agregarlo a UpdatePanel1.

  7. Establezca la propiedad Text de la etiqueta en UpdatePanel1 no actualizado todavía.

  8. Agregue un control Label a UpdatePanel2.

  9. Establezca la propiedad Text de la segunda etiqueta en UpdatePanel2 no actualizado todavía.

  10. Establezca la propiedad Interval del control Timer en 10000.

    La propiedad Interval se define en milisegundos, de modo que si la propiedad Interval se establece en 10.000 milisegundos actualizará los controles UpdatePanel cada 10 segundos.

    Nota:

    En este ejemplo, el intervalo del temporizador se establece en 10 segundos. Así, al ejecutar el ejemplo, no tiene que esperar mucho tiempo para ver los resultados. Sin embargo, cada intervalo del temporizador devuelve datos al servidor y genera tráfico de red. Por consiguiente, en una aplicación de producción debería establecer el intervalo al tiempo más largo que aún resulte práctico para su aplicación.

  11. Haga doble clic en el control Timer para crear un controlador para el evento Tick.

  12. Agregue código al controlador que establece la propiedad Text de los controles Label1 y Label2 en la hora actual.

    Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Label1.Text = "UpdatePanel1 refreshed at: " & _
          DateTime.Now.ToLongTimeString()
        Label2.Text = "UpdatePanel2 refreshed at: " & _
          DateTime.Now.ToLongTimeString()
    End Sub
End Class

    public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "UpdatePanel1 refreshed at: " +
          DateTime.Now.ToLongTimeString();
        Label2.Text = "UpdatePanel2 refreshed at: " +
          DateTime.Now.ToLongTimeString();
    }
}

  13. Especifique Timer1 como el desencadenador de UpdatePanel1 y UpdatePanel2 agregando un control AsyncPostBackTrigger a ambos controles UpdatePanel. Puede hacer esto mediante declaración como se muestra en el código siguiente:

    <Triggers>
  <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>

    En el ejemplo siguiente se muestra el marcado de toda la página.

    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" 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 id="Head1" >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <div>
            <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000">
            </asp:Timer>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="UpdatePanel1 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label2"  Text="UpdatePanel2 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>

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

    <%@ 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 >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <div>
            <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000">
            </asp:Timer>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="UpdatePanel1 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label2"  Text="UpdatePanel2 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>

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

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

  15. Espere al menos 10 segundos hasta que se actualicen los controles UpdatePanel.

    Ambos paneles muestran la hora en la que se actualizaron.

Revisión

Este tutorial mostró cómo utilizar un control Timer con varios controles UpdatePanel para habilitar actualizaciones parciales de la página. Debe agregar un control ScriptManager y, a continuación, agregar los controles UpdatePanel. Un control Timer actualiza el contenido de los paneles al configurarlo como un desencadenador de los paneles.

Para obtener información sobre cómo utilizar un control Timer dentro de un control UpdatePanel, vea Tutorial: Introducción al control Timer.

Vea también

Conceptos

Información general sobre el control Timer

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

Referencia

Timer

UpdatePanel

ScriptManager

  • Last updated on