Condividi tramite

Cenni preliminari sul controllo Timer

  • Articolo

Aggiornamento: novembre 2007

Il controllo Timer ASP.NET AJAX esegue i postback a intervalli definiti. Se si utilizza il controllo Timer con un controllo UpdatePanel, è possibile attivare gli aggiornamenti a pagina parziale a un intervallo definito. È inoltre possibile utilizzare il controllo Timer per inserire l'intera pagina.

Di seguito sono elencate le diverse sezioni di questo argomento:

  • Scenari

  • Background

  • Esempi di codice

  • Riferimento alle classi

Scenari relativi al controllo Timer

Il controllo Timer va utilizzato per eseguire le attività riportate di seguito:

  • Aggiornare periodicamente il contenuto di uno o più controlli UpdatePanel senza aggiornare l'intera pagina Web.

  • Eseguire il codice sul server ogni volta che un controllo Timer provoca un postback.

  • Inserire in modo sincrono l'intera pagina Web sul server Web a intervalli definiti.

Background

Il controllo Timer è un controllo server che incorpora un componente JavaScript nella pagina Web. Il componente JavaScript inizia il postback dal browser quando l'intervallo definito nella proprietà Interval è trascorso. Le proprietà per il controllo Timer vanno impostate nel codice che viene eseguito sul server e vengono quindi passate al componente JavaScript.

Un'istanza della classe ScriptManager deve essere inclusa nella pagina Web quando si utilizza il controllo Timer.

Quando un postback è stato iniziato dal controllo Timer, il controllo Timer genera l'evento Tick sul server. È possibile creare un gestore eventi affinché l'evento Tick esegua azioni quando la pagina viene inserita sul server.

Impostare la proprietà Interval per specificare la frequenza dei postback e la proprietà Enabled per attivare o disattivare Timer. La proprietà Interval è definita in millisecondi e ha un valore predefinito di 60000 millisecondi ovvero 60 secondi.

Nota:

L'impostazione della proprietà Interval di un controllo Timer su un valore basso può generare traffico rilevante sul server Web. Utilizzare il controllo Timer per aggiornare il contenuto solo con la frequenza necessaria.

È possibile includere più di un controllo Timer in una pagina Web se controlli UpdatePanel diversi devono essere aggiornati a intervalli diversi. In alternativa, una sola istanza del controllo Timer può essere il trigger di più di un controllo UpdatePanel in una pagina Web.

Utilizzo di un controllo Timer all'interno di un controllo UpdatePanel

Quando il controllo Timer è incluso in un controllo UpdatePanel, il controllo Timer funziona automaticamente come trigger per il controllo UpdatePanel. È possibile eseguire l'override di questo comportamento impostando la proprietà ChildrenAsTriggers del controllo UpdatePanel su false.

Per i controlli Timer in un controllo UpdatePanel, il componente di temporizzazione JavaScript viene ricreato solo quando ogni postback è terminato. Pertanto, l'intervallo calcolato non inizia fino a che la pagina non ritorna dal postback. Ad esempio, se la proprietà Interval è impostata su 60000 millisecondi (60 secondi) ma il postback dura 3 secondi, il postback successivo avrà luogo 63 secondi dopo il postback precedente.

Nell'esempio seguente viene illustrato come includere un controllo Timer in un controllo 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>

Utilizzo di un controllo Timer all'esterno di un controllo UpdatePanel

Quando il controllo Timer si trova all'esterno di un controllo UpdatePanel, è necessario deve definire in modo esplicito il controllo Timer come trigger per il controllo UpdatePanel da aggiornare.

Se i controlli Timer si trovano all'esterno di un controllo UpdatePanel, il componente di temporizzazione JavaScript continua l'esecuzione mentre il postback viene elaborato. Ad esempio, se la proprietà Interval è impostata su 60000 millisecondi (60 secondi) e il postback dura 3 secondi, il postback successivo avrà luogo 60 secondi dopo il postback precedente. L'utente vedrà il contenuto aggiornato nel controllo UpdatePanel solo per 57 secondi.

È necessario impostare la proprietà Interval su un valore che consenta il completamento di un postback asincrono prima dell'avvio del successivo. Se un nuovo postback inizia durante l'elaborazione di un postback precedente, il primo postback viene annullato.

Nell'esempio seguente viene illustrato come utilizzare il controllo Timer all'esterno di un controllo 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>

Esempi di codice

Nell'esempio seguente viene illustrato un controllo UpdatePanel che visualizza un prezzo azionario generato casualmente e il momento in cui è stato generato. Per impostazione predefinita, il controllo Timer aggiorna il contenuto di UpdatePanel ogni 10 secondi. L'utente può decidere di aggiornare il prezzo delle azioni ogni 10 secondi, ogni 60 secondi o di non aggiornarlo affatto. Quando l'utente decide di non aggiornare il prezzo delle azioni, la proprietà Enabled viene impostata su 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>

Esercitazioni

Procedura dettagliata: introduzione al controllo Timer

Procedura dettagliata: utilizzo del controllo Timer ASP.NET con più controlli UpdatePanel

Riferimento alle classi

Le classi server fondamentali per il controllo Timer vengono illustrate nella tabella seguente.

  • Timer
    Esegue postback asincroni o sincroni della pagina Web a un intervallo definito.

Vedere anche

Concetti

Cenni preliminari sul rendering a pagina parziale

Cenni preliminari sui controlli UpdatePanel