Tutorial: Introducción al control Timer

Artículo
10/22/2014

Actualización: noviembre 2007

En este tutorial va a actualizar una parte de una página web en un intervalo programado mediante tres controles de servidor AJAX de ASP.NET: ScriptManager, UpdatePanel y Timer. Agregar estos controles a una página elimina la necesidad de actualizar toda la página con cada devolución de datos. Sólo se actualizará el contenido del control UpdatePanel.

Para obtener más información acerca de la representación parcial de la página, vea Información general sobre la representación parcial de páginas.

Requisitos previos

Para implementar los procedimientos de este tutorial necesitará:

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

Para actualizar un control UpdatePanel durante un intervalo programado

En Microsoft Visual Studio 2005 o Visual Web Developer Express, cree una nueva página web ASP.NET habilitada para AJAX y, a continuación, cambie a la vista Diseño.
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.
En el cuadro de herramientas, haga doble clic en el control UpdatePanel para agregarlo a la página.

Haga clic dentro del control UpdatePanel y, a continuación, haga doble clic en el control Timer para agregarlo al control UpdatePanel.

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 dentro de un control UpdatePanel. Para obtener un ejemplo del uso de un control Timer como un desencadenador fuera de un control UpdatePanel, vea Tutorial: Usar el control Timer de ASP.NET con varios controles UpdatePanel.

Establezca la propiedad Interval del control Timer en 10.000.

La propiedad Interval se define en milisegundos, de modo que si la propiedad Interval se establece en 10.000 milisegundos actualizará el control 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.

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.

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.

Nota:

Asegúrese de que agrega el control Label dentro del control UpdatePanel.
Establezca la propiedad Text de la etiqueta en Panel no actualizado todavía.
Haga clic fuera del control UpdatePanel y haga doble clic en el control Label para agregar una segunda etiqueta fuera del control UpdatePanel.

Nota:

Asegúrese de que agrega el segundo control Label fuera del control UpdatePanel.
Haga doble clic en el control Timer para crear un controlador para el evento Tick.
Agregue el código que establece la propiedad Text del control Label1 en la hora actual.
Cree un controlador Page_Load y agregue el código que establece la propiedad Text del control Label2 en la hora que se crea la página.

Nota:
Asegúrese de que agrega el control Label dentro del control UpdatePanel.

Nota:
Asegúrese de que agrega el segundo control Label fuera del control UpdatePanel.

Cambie a la vista de código fuente.

Asegúrese de que el marcado de la página se parece al siguiente:

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Label2.Text = "Page created at: " & _
          DateTime.Now.ToLongTimeString()
    End Sub

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel 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)
    {
        Label2.Text = "Page created at: " +
          DateTime.Now.ToLongTimeString();
    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
          DateTime.Now.ToLongTimeString();
    }
}

Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.
Espere al menos 10 segundos para que se actualice el panel.

El texto incluido en el panel cambia para mostrar la última vez que se actualizó el contenido del panel. Sin embargo, el texto fuera del panel no se actualiza.

Revisión

Este tutorial introdujo los conceptos básicos del uso de un control Timer y un control UpdatePanel para habilitar las actualizaciones parciales de la página. Debe agregar un control ScriptManager a cualquier página que contenga un control UpdatePanel o un control Timer. De forma predeterminada, un control Timer incluido en el panel hará que el panel simplemente se actualice durante una devolución de datos asincrónica. Un control Timer fuera de un panel puede hacer que el control UpdatePanel se actualice si se configura como un desencadenador para el panel.

El siguiente paso consiste en aprender cómo utilizar el control Timer fuera de un control UpdatePanel y sobre cómo utilizar el temporizador para actualizar más de un control UpdatePanel. Para obtener información acerca de estas tareas, vea Tutorial: Usar el control Timer de ASP.NET con varios controles UpdatePanel.