Procédure pas à pas : utilisation du contrôle Timer ASP.NET avec plusieurs contrôles UpdatePanel

Article
10/22/2014

Mise à jour : novembre 2007

Dans cette procédure pas à pas, vous utiliserez un contrôle Timer pour mettre à jour le contenu de deux contrôles UpdatePanel. Le contrôle Timer sera positionné à l'extérieur des deux contrôles UpdatePanel et il sera configuré comme un déclencheur pour les deux panneaux.

Composants requis

Pour implémenter les étapes de cette procédure pas à pas, vous aurez besoin de :

Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express
Site Web ASP.NET AJAX.

Pour actualiser des contrôles UpdatePanel à un intervalle de temps donné

Créez une nouvelle page et basculez en mode Design.
Si la page ne contient pas encore de contrôle ScriptManager, sous l'onglet Extensions AJAX de la boîte à outils, double-cliquez sur le contrôle ScriptManager pour l'ajouter à la page.

Dans la boîte à outils, double-cliquez sur le contrôle Timer pour l'ajouter à la page WEB.

Remarque :
Le contrôle Timer peut fonctionner comme un déclencheur à l'intérieur ou à l'extérieur d'un contrôle UpdatePanel. Cet exemple indique comment utiliser le contrôle Timer à l'extérieur d'un contrôle UpdatePanel. Pour visualiser un exemple d'utilisation d'un contrôle Timer à l'intérieur d'un autre contrôle UpdatePanel, consultez Procédure pas à pas : introduction au contrôle Timer.

Dans la boîte à outils, double-cliquez sur le contrôle UpdatePanel pour ajouter un panneau à la page, puis affectez à sa propriété UpdateMode la valeur Conditional.
Double-cliquez de nouveau sur le contrôle UpdatePanel pour ajouter un deuxième panneau à la page, puis affectez à sa propriété UpdateMode la valeur Conditional.
Cliquez à l'intérieur du contrôle UpdatePanel nommé UpdatePanel1, et sous l'onglet de la boîte à outils Standard, double-cliquez sur le contrôle Label pour l'ajouter à UpdatePanel1.
Affectez à la propriété Text de l'étiquette la valeur UpdatePanel1 pas encore actualisé.
Ajoutez un contrôle Label à UpdatePanel2.
Définissez la propriété Text de l'étiquette à UpdatePanel2 pas encore actualisé.

Affectez à la propriété Interval de Timer la valeur 10000.

La propriété Interval est définie en millisecondes, de sorte qu'en affectant à la propriété Interval une valeur de 10 000 millisecondes, les contrôles UpdatePanel sont actualisés toutes les 10 secondes.

Remarque :
Dans cet exemple, l'intervalle de minuterie défini est de 10 secondes. De cette façon, lorsque vous exécutez l'exemple, vous n'avez pas à attendre longtemps pour voir les résultats. Toutefois, chaque intervalle de minuterie provoque une publication (postback) sur le serveur et génère du trafic sur le réseau. Par conséquent, vous devez définir l'intervalle de temps le plus long possible tout en gardant une valeur raisonnable pour votre application de production.

Dans cet exemple, l'intervalle de minuterie défini est de 10 secondes. De cette façon, lorsque vous exécutez l'exemple, vous n'avez pas à attendre longtemps pour voir les résultats. Toutefois, chaque intervalle de minuterie provoque une publication (postback) sur le serveur et génère du trafic sur le réseau. Par conséquent, vous devez définir l'intervalle de temps le plus long possible tout en gardant une valeur raisonnable pour votre application de production.

Double-cliquez sur le contrôle Timer afin de créer un gestionnaire d'événements pour l'événement Tick.

Ajoutez le code au gestionnaire qui définit la propriété du contrôle Text de Label1 et Label2 au temps réel.

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

Spécifiez Timer1 comme déclencheur pour UpdatePanel1 et UpdatePanel2 en ajoutant un contrôle AsyncPostBackTrigger aux deux contrôles UpdatePanel. Vous pouvez le faire de façon déclarative, comme indiqué dans le code suivant :

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

L'exemple suivant illustre le balisage d'un contrôle pour la page complète.

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

Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.
Attendez au moins 10 secondes jusqu'à ce que les contrôles UpdatePanel soient actualisés.

Les deux panneaux affichent l'heure lors de la mise à jour.

Récapitulatif

Cette procédure pas à pas a montré comment utiliser un contrôle Timer avec plusieurs contrôles UpdatePanel pour activer des mises à jour de pages partielles. Vous devez ajouter un contrôle ScriptManager, puis ajoutez les contrôles UpdatePanel. Un contrôle Timer met à jour le contenu des panneaux lorsque vous le configurez comme un déclencheur pour les panneaux.

Pour plus d'informations sur l'utilisation d'un contrôle Timer à l'intérieur d'un contrôle UpdatePanel, consultez Procédure pas à pas : introduction au contrôle Timer.