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

Articolo
10/22/2014

Aggiornamento: novembre 2007

Nella procedura dettagliata riportata di seguito verrà utilizzato un controllo Timer per aggiornare il contenuto dei due controlli UpdatePanel. Il controllo Timer verrà posizionato fuori dei due controlli UpdatePanel e verrà configurato un trigger per entrambi pannelli.

Prerequisiti

Per implementare le procedure in questa procedura dettagliata è necessario:

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express Edition.
Sito Web ASP.NET compatibile AJAX.

Per aggiornare i controlli UpdatePanel dopo un determinato intervallo

Creare una nuova pagina e passare alla visualizzazione Progettazione.
Se la pagina non contiene ancora un controllo ScriptManager, fare doppio clic sul controllo ScriptManager nella scheda Estensioni AJAX della casella degli strumenti per aggiungerlo alla pagina.

Fare doppio clic sul controllo Timer nella casella degli strumenti per aggiungerlo alla pagina Web.

Nota:
Il controllo Timer può funzionare come un trigger all'interno o all'esterno di un controllo UpdatePanel. Nell'esempio riportato di seguito viene illustrato come utilizzare il controllo Timer all'esterno di un controllo UpdatePanel. Per un esempio su come utilizzare un controllo Timer all'interno di un controllo UpdatePanel, vedere Procedura dettagliata: introduzione al controllo Timer.

Nella casella degli strumenti fare doppio clic sul controllo UpdatePanel per aggiungere un pannello alla pagina, quindi impostare la relativa proprietà UpdateMode su Conditional.
Fare nuovamente doppio clic sul controllo UpdatePanel per aggiungere un secondo pannello alla pagina, quindi impostare la relativa proprietà UpdateMode su Conditional.
Fare clic nel controllo UpdatePanel denominato UpdatePanel1 e nella scheda Standard della casella degli strumenti fare doppio clic sul controllo Label per aggiungerlo a UpdatePanel1.
Impostare la proprietà Text dell'etichetta su UpdatePanel1 non ancora aggiornato.
Aggiungere un controllo Label a UpdatePanel2.
Impostare la seconda proprietà Text dell'etichetta su UpdatePanel2 non ancora aggiornato.

Impostare la proprietà Interval del componente Timer su 10000.

La proprietà Interval è definita in millisecondi, pertanto, impostando la proprietà Interval su 10.000 millisecondi, i controlli UpdatePanel vengono aggiornati ogni 10 secondi.

Nota:
In questo esempio, l'intervallo del timer è impostato su 10 secondi. Quando si esegue l'esempio, non è quindi necessario molto tempo per vedere i risultati. Tuttavia, ogni intervallo del timer provoca un postback al server, con conseguente aumento del traffico di rete. In un'applicazione di produzione è pertanto consigliabile impostare l'intervallo più lungo possibile utile per l'applicazione.

In questo esempio, l'intervallo del timer è impostato su 10 secondi. Quando si esegue l'esempio, non è quindi necessario molto tempo per vedere i risultati. Tuttavia, ogni intervallo del timer provoca un postback al server, con conseguente aumento del traffico di rete. In un'applicazione di produzione è pertanto consigliabile impostare l'intervallo più lungo possibile utile per l'applicazione.

Fare doppio clic sul controllo Timer per creare un gestore per l'evento Tick.

Aggiungere codice al gestore per impostare la proprietà Text dei controlli Label1 e Label2 sull'ora corrente.

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();
    }
}

Specificare Timer1 come trigger per UpdatePanel1 e UpdatePanel2 aggiungendo un controllo AsyncPostBackTrigger a entrambi controlli UpdatePanel. È possibile eseguire questa operazione in modo dichiarativo come illustrato nel codice riportato di seguito:

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

Nell'esempio riportato di seguito viene illustrato il markup per la pagina completa.

<%@ 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>

Salvare le modifiche e premere CTRL+F5 per visualizzare la pagina in un browser.
Attendere almeno 10 secondi l'aggiornamento dei controlli UpdatePanel.

Al termine dell'aggiornamento, in entrambi i pannelli è mostrata l'ora.

Verifica

In questa procedura dettagliata viene illustrato come utilizzare un controllo Timer con più controlli UpdatePanel per consentire aggiornamenti parziali della pagina. È necessario aggiungere sempre un controllo ScriptManager e quindi i controlli UpdatePanel. Un controllo Timer configurato come trigger per i pannelli consente di aggiornare il contenuto dei pannelli.

Per informazioni sull'utilizzo di un controllo Timer all'interno di un controllo UpdatePanel, vedere Procedura dettagliata: introduzione al controllo Timer.