Per alcune applicazioni si può presentare la necessità è di dover aggiornare automaticamente, ad intervalli di tempo prestabiliti, il contenuto di una pagina, o nel caso di applicazioni Ajax, di una parte di essa.
Nella cosiddetta "programmazione desktop", ovvero lo sviluppo di applicazioni che non girano online, si può sfruttare l'orologio di sistema, nelle applicazioni Web invece possiamo usare il timer del browser.
Il problema infatti si può risolvere utilizzando l'oggetto Timer e la funzione SetInterval di JavaScript, in grado di lanciare una funzione ad intervalli di tempo prestabiliti. Questo metodo rende difficile l'interazione con tecnologie lato server, con ASP.NET nel nostro caso.
ASP.NET AJAX introduce un nuovo controllo Timer, che ci consente di temporizzare l'aggiornamento di porzioni di pagina definite all'interno di UpdatePanel.
Il timer si comporta come un generatore di "PostBack", a tempo, o per meglio dire un generatore di richieste di aggiornamento. Possiamo usarlo sia all'interno di un UpdatePanel, che riceve un "PostBack forzato" ad ogni intervallo, oppure possiamo tenerlo fuori dai pannelli ed usarlo come trigger.
Impostare un Timer è molto semplice: si definisce l'elemento <asp:Timer /> come un comune controllo lato server e si definiscono gli attibuti:
- Interval, che indica l'intervallo di tempo desiderato (in millisecondi) allo scadere del quale viene rilasciato un evento "Tick"
- OnTick, con il quale indichiamo il metodo che gestirà l'evento Tick scatenato.
Timer all'interno dell'UpdatePanel
Supponiamo di voler aggiornare il contenuto di una porzione di pagina ogni 10 secondi. In questo pannello vogliamo esporre, in una casella di testo, dati prelevati da un WebService. Il tutto naturalmente in modalità asincrona.
Nel layout inseriremo uno ScriptManager, poi un UpdatePanel ed al suo interno la casella di testo. Scegliamo di inserire anche il controllo Timer nell'UpdatePanel, impostiamo l'intervallo a 10 secondi (1000 ms) e indichiamo un gestore dell'evento Tick
Listato 1. Markup con Timer interno al pannello
<asp:UpdatePanel ID="Pannello" runat="server">
<ContentTemplate>
<asp:Label ID="lblTitolo" runat="server" Text="Current Loan $" />
<asp:Label ID="lblRisultato" runat="server" Text="Label" />
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"/>
</ContentTemplate>
</asp:UpdatePanel>
Creato il markup, non ci resta che definire il gestore dell'evento Tick.
Listato 2. Gestore dell'evento Tick
protected void Timer1_Tick(object sender, EventArgs e)
{
// simuliamo la lettura del web service
lblRisultato.Text = DateTime.Now.ToLongTimeString();
}
Con poche righe di codice, riusciamo a risolvere un problema ostico nel Web, il perpetuo aggiornamento della pagina. Bisogna fare attenzione però: anche se in modalità asincrona, infatti, impostando una chiamata al server perpetua con un Timer, corriamo il rischio di creare molto traffico Client<==>Server.
Un Timer per più pannelli
Come per tutti i controlli server presenti in Ajax, anche il Timer puo' interagire con gli altri controlli. Nell'esempio precedente abbiamo visto come rendere indipendente un pannello, ma pensiamo alla necessità di aggiornare il contenuto di diversi UpdatePanel. Per evitare di intasare la pagina di Timer perpetui, possiamo, in questo caso, utilizzare un singolo Timer per governare piu' UpdatePanel.
Anche in questo caso la procedura risulta semplice: inseriamo il Timer nel layout della pagina e inseriamo delle definizioni di Trigger per ogni UpdatePanel. Indichiamo così a ciascun pannello quando aggiornarsi.
In modalità visuale possiamo modificare l'opzione Triggers Collection di ogni pannello creando un nuovo trigger di tipo "asincrono". Associamo il trigger al controllo Timer che abbiamo inserito ed al suo evento Tick. L'unico inconveniente è che nell'evento del timer dovremo gestire il codice per aggiornare i pannelli, tutti insieme.
Listato 1. Markup con Timer assegnato a Trigger
<!-- definizione del timer -->
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" />
<!-- primo pannello Ajax -->
<asp:UpdatePanel ID="Pannello02" runat="server">
<ContentTemplate>
<Triggers>
<!-- assegnamento del trigger-->
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
...
<!-- secondo pannello Ajax-->
<asp:UpdatePanel ID="Pannello01" runat="server">
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
Il primo esempio nel quale applicherei una logica del genere, è una pagina che mostra i cambi di diverse valute al variare del tempo evitando agli utenti di dover aggiornare la pagina e attenderne il nuovo caricamento.
Ora abbiamo a disposizione praticamente tutti gli elementi per poter concludere il nostro sito con tecnologia ASP.NET Ajax. Abbiamo solo tralasciato la gestione dei web services, che troviamo nelle lezioni successive.
