Información general sobre el control Timer

Actualización: noviembre 2007

El control Timer de ASP.NET AJAX realiza devoluciones de datos en intervalos definidos. Si utiliza el control Timer con un control UpdatePanel, puede habilitar actualizaciones parciales de página en un intervalo definido. También puede utilizar el control Timer para enviar toda la página.

Este tema contiene las siguientes secciones:

Escenarios
Información general
Ejemplos de código
Referencia de clase

Escenarios del control Timer

Utilice el control Timer cuando desee hacer lo siguiente:

Actualizar periódicamente el contenido de uno o varios controles UpdatePanel sin actualizar la página web entera.
Ejecutar código en el servidor cada vez que un control Timer origine una devolución de datos.
Enviar sincrónicamente la página web entera al servidor web en intervalos definidos.

Información general

El control Timer es un control de servidor que incrusta un componente JavaScript en la página web. El componente JavaScript inicia la devolución de datos desde el explorador cuando transcurre el intervalo que se define en la propiedad Interval. Las propiedades del control Timer se establecen en código que se ejecuta en el servidor y se pasan al componente JavaScript.

Cuando utilice el control Timer, debe incluir una instancia de la clase ScriptManager en la página web.

Cuando el control Timer inicia una devolución de datos, el control Timer provoca el evento Tick en el servidor. Puede crear un controlador de eventos para que el evento Tick realice acciones cuando la página se envíe al servidor.

Establezca la propiedad Interval para especificar la frecuencia con que deben producirse las devoluciones de datos y establezca la propiedad Enabled para activar o desactivar el control Timer. La propiedad Interval se define en milisegundos y presenta un valor predeterminado de 60.000 milisegundos, o 60 segundos.

Nota:
Si establece la propiedad Interval de un control Timer en un valor pequeño, puede generar mucho tráfico al servidor web. Use el control Timer para actualizar el contenido sólo con la frecuencia necesaria.

Puede incluir más de un control Timer en una página web si es necesario actualizar distintos controles UpdatePanel en intervalos diferentes. Como alternativa, una instancia única del control Timer puede usarse como desencadenador de más de un control UpdatePanel en una página web.

Usar un control Timer dentro de un control UpdatePanel

Cuando el control Timer se incluye dentro de un control UpdatePanel, el control Timer funciona automáticamente como un desencadenador para el control UpdatePanel. Puede invalidar este comportamiento estableciendo la propiedad ChildrenAsTriggers del control UpdatePanel en false.

En el caso de los controles Timer incluidos dentro de un control UpdatePanel, el componente de tiempo de JavaScript sólo vuelve a crearse cuando finaliza cada devolución de datos. Por lo tanto, el intervalo programado no se inicia hasta que la devolución de datos devuelve la página. Por ejemplo, si la propiedad Interval se establece en 60.000 milisegundos (60 segundos) pero la devolución de datos tarda 3 segundos en completarse, la siguiente devolución de datos tendrá lugar 63 segundos después de la devolución de datos anterior.

En el ejemplo de código siguiente se muestra cómo incluir un control Timer dentro de un control UpdatePanel.

<asp:ScriptManager  id="ScriptManager1" />
<asp:UpdatePanel  id="UpdatePanel1" 
    UpdateMode="Conditional">
  <contenttemplate>
    <asp:Timer id="Timer1" 
      Interval="120000" 
      OnTick="Timer1_Tick">
    </asp:Timer>
  </contenttemplate>
</asp:UpdatePanel>

Usar un control Timer fuera de un control UpdatePanel

Cuando el control Timer se encuentra fuera de un control UpdatePanel, hay que definir explícitamente el control Timer como un desencadenador para que se actualice el control UpdatePanel.

Si los controles Timer se encuentran fuera de un control UpdatePanel, el componente de tiempo de JavaScript continúa ejecutándose mientras se procesa la devolución de datos. Por ejemplo, si la propiedad Interval se establece en 60.000 milisegundos (60 segundos) y la devolución de datos tarda 3 segundos en completarse, la siguiente devolución de datos tendrá lugar 60 segundos después de la devolución de datos anterior. El usuario verá el contenido actualizado en el control UpdatePanel sólo durante 57 segundos.

Debe establecer la propiedad Interval en un valor que permita completar una devolución de datos asincrónica antes de que se inicie la siguiente devolución de datos. Si se inicia una nueva devolución de datos mientras se procesa una devolución de datos anterior, la primera devolución se cancela.

En el ejemplo siguiente se muestra cómo usar el control Timer fuera de un control UpdatePanel.

<asp:ScriptManager  id="ScriptManager1" />
<asp:Timer ID="Timer1"  Interval="120000" 
  OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" >
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" 
        EventName="Tick" />
    </Triggers>
    <ContentTemplate>
      <asp:Label ID="Label1"  ></asp:Label>
  </ContentTemplate>
</asp:UpdatePanel>

Ejemplos de código

En el ejemplo siguiente se muestra un control UpdatePanel que muestra el precio generado aleatoriamente de una acción y el momento en el que se generó. De forma predeterminada, el control Timer actualiza el contenido del control UpdatePanel cada 10 segundos. El usuario puede decidir actualizar el precio de las acciones cada 10 segundos, cada 60 segundos o no actualizarlo nunca. Cuando el usuario decide no actualizar el precio de las acciones, la propiedad Enabled se establece en false.

<%@ Page Language="VB" AutoEventWireup="true" %>

<!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 id="Head1" >
    <title>Timer Example Page</title>
    <script >
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            OriginalTime.Text = DateTime.Now.ToLongTimeString()
        End Sub

        Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)
            StockPrice.Text = GetStockPrice()
            TimeOfPrice.Text = DateTime.Now.ToLongTimeString()
        End Sub

        Private Function GetStockPrice() As String
            Dim randomStockPrice As Double = 50 + New Random().NextDouble()
            Return randomStockPrice.ToString("C")
        End Function

        Protected Sub RadioButton1_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Timer1.Interval = 10000
            Timer1.Enabled = True
        End Sub

        Protected Sub RadioButton2_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Timer1.Interval = 60000
            Timer1.Enabled = True
        End Sub

        Protected Sub RadioButton3_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Timer1.Enabled = False
        End Sub
</script>
</head>
<body>
    <form id="form1" >
    <asp:ScriptManager ID="ScriptManager1"  />
        <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000" />

        <asp:UpdatePanel ID="StockPricePanel"  UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" />
        </Triggers>
        <ContentTemplate>
            Stock price is <asp:Label id="StockPrice" ></asp:Label><BR />
            as of <asp:Label id="TimeOfPrice" ></asp:Label>  
        </ContentTemplate>
        </asp:UpdatePanel>
        <div>
            <asp:RadioButton ID="RadioButton1" AutoPostBack="true" GroupName="TimerFrequency"  Text="10 seconds" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />
            <asp:RadioButton ID="RadioButton2" AutoPostBack="true" GroupName="TimerFrequency"  Text="60 seconds" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />
            <asp:RadioButton ID="RadioButton3" AutoPostBack="true" GroupName="TimerFrequency"  Text="Never" OnCheckedChanged="RadioButton3_CheckedChanged" /><br />
            <br />
        Page originally created at <asp:Label ID="OriginalTime" ></asp:Label>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" %>

<!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>Timer Example Page</title>
    <script >
        protected void Page_Load(object sender, EventArgs e)
        {
            OriginalTime.Text = DateTime.Now.ToLongTimeString();
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            StockPrice.Text = GetStockPrice();
            TimeOfPrice.Text = DateTime.Now.ToLongTimeString();
        }

        private string GetStockPrice()
        {
            double randomStockPrice = 50 + new Random().NextDouble();
            return randomStockPrice.ToString("C");
        }

        protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
        {
            Timer1.Enabled = true;
            Timer1.Interval = 10000;
        }

        protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
        {
            Timer1.Enabled = true;
            Timer1.Interval = 60000;
        }

        protected void RadioButton3_CheckedChanged(object sender, EventArgs e)
        {
            Timer1.Enabled = false;
        }

</script>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000" />

        <asp:UpdatePanel ID="StockPricePanel"  UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" />
        </Triggers>
        <ContentTemplate>
            Stock price is <asp:Label id="StockPrice" ></asp:Label><BR />
            as of <asp:Label id="TimeOfPrice" ></asp:Label>  
            <br />

        </ContentTemplate>
        </asp:UpdatePanel>
        <div>
        <br />
        Update stock price every:<br />
        <asp:RadioButton ID="RadioButton1" AutoPostBack="true" GroupName="TimerFrequency"  Text="10 seconds" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />
        <asp:RadioButton ID="RadioButton2" AutoPostBack="true" GroupName="TimerFrequency"  Text="60 seconds" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />
        <asp:RadioButton ID="RadioButton3" AutoPostBack="true" GroupName="TimerFrequency"  Text="Never" OnCheckedChanged="RadioButton3_CheckedChanged" />
        <br />
        Page loaded at <asp:Label ID="OriginalTime" ></asp:Label>
        </div>
    </form>
</body>
</html>