Partager via

Vue d'ensemble du contrôle Timer

  • Article

Mise à jour : novembre 2007

Le contrôle d'ASP.NET AJAX Timer exécute des publications (postback) à intervalles définis. En utilisant le contrôle Timer avec un contrôle UpdatePanel, vous pouvez activer des mises à jour de pages partielles à intervalles définis. Vous pouvez aussi utiliser le contrôle Timer pour publier la page entière.

Cette rubrique contient les sections suivantes :

  • Scénarios

  • Contexte

  • Exemples de code

  • Référence de classe

Scénarios de contrôle Timer

Vous utilisez le contrôle Timer lorsque vous souhaitez effectuer les opérations suivantes :

  • Périodiquement mettez à jour le contenu d'un ou plusieurs contrôles UpdatePanel sans actualiser la page Web entière.

  • Code exécuté sur le serveur chaque fois qu'un contrôle Timer provoque une publication.

  • De façon synchrone publiez la page Web entière sur le serveur Web à des intervalles définis.

Contexte

Le contrôle Timer est un contrôle serveur qui incorpore un composant JavaScript dans la page Web. Le JavaScript initiés composant la publication du navigateur lorsque l'intervalle défini dans la propriété Interval s'est écoulé. Vous définissez les propriétés pour le contrôle Timer dans le code qui s'exécute sur le serveur et ces propriétés sont passées au composant JavaScript.

Une instance de la classe ScriptManager doit être incluse dans la page Web lorsque vous utilisez le contrôle Timer.

Lorsqu'une publication a été initialisée par le contrôle Timer, celui-ci incrémente Timer l'événement Tick sur le serveur. Vous pouvez créer un gestionnaire d'événements pour l'événement Tick afin d'exécuter des actions lorsque la page est publiée sur le serveur.

Définissez la propriété Interval pour spécifier l'intervalle de temps des publications, et spécifier la propriété Enabled pour définir Timer à activé ou à fermé. La propriété Interval est définie en millisecondes et a une valeur par défaut de 60 000 millisecondes, ou 60 secondes.

Remarque :

L'affectation d'une petite valeur à la propriété Interval du contrôle Timer peut générer un trafic significatif vers le serveur Web. Utilisez le contrôle Timer pour n'actualiser le contenu que lorsque cela est nécessaire.

Vous pouvez inclure plusieurs contrôles Timer sur une page Web si des contrôles UpdatePanel différents doivent être mis à jour à des intervalles différents. Une instance unique du contrôle Timer peut également être le déclencheur de plusieurs contrôles UpdatePanel dans une page Web.

Utilisation d'un contrôle Timer à l'intérieur d'un contrôle UpdatePanel

Lorsque le contrôle Timer est inclus dans un contrôle UpdatePanel, le contrôle Timer fonctionne automatiquement comme un déclencheur pour le contrôle UpdatePanel. Vous pouvez substituer ce comportement en déterminant la propriété ChildrenAsTriggers du contrôle UpdatePanel la valeur false.

Pour les contrôles Timer à l'intérieur d'un contrôle UpdatePanel, le JavaScript qui chronomètre le composant est recréé uniquement à chaque fin de publication. Par conséquent, l'intervalle chronométré ne démarre pas avant la fin de la publication. Par exemple, si la valeur définie pour la propriété Interval est 60 000 millisecondes (60 secondes), mais que la publication prend 3 secondes pour s'exécuter, la publication suivante intervient 63 secondes plus tard.

L'exemple suivant montre comment inclure un contrôle Timer dans un contrôle 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>

Utilisation d'un contrôle Timer à l'extérieur d'un contrôle UpdatePanel

Lorsque le contrôle Timer est à l'extérieur d'un contrôle UpdatePanel, vous devez définir explicitement le contrôle Timer comme un déclencheur pour le contrôle UpdatePanel à mettre à jour.

Si les contrôles Timer sont à l'extérieur d'un contrôle UpdatePanel, le JavaScript qui chronomètre le composant continue à s'exécuter tant que la publication est traitée. Par exemple, si la valeur définie pour la propriété Interval est 60 000 millisecondes (60 secondes), mais que la publication prend 3 secondes pour s'exécuter, la publication suivante intervient 60 secondes plus tard. L'utilisateur consultera le contenu actualisé dans le contrôle UpdatePanel pour seulement 57 secondes.

Vous devez définir la propriété Interval par une valeur qui permette qu'au moins une publication asynchrone se termine avant l'initialisation de la publication suivante. Si une nouvelle publication est initialisée pendant qu'une publication est traitée, cette première publication est annulée.

L'exemple suivant indique comment utiliser le contrôle Timer à l'extérieur d'un contrôle 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>

Exemples de code

L'exemple suivant illustre un contrôle UpdatePanel qui affiche une cotation générée de manière aléatoire ainsi que le moment où celle-ci est générée. Par défaut, le contrôle Timer met à jour le contenu du contrôle UpdatePanel toutes les 10 secondes. L'utilisateur peut décider de mettre à jour le cours de l'action toutes les 10 secondes, toutes les 60 secondes ou pas du tout. Lorsque l'utilisateur décide de ne pas mettre à jour le cours de l'action, la propriété Enabled a la valeur 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>

Didacticiels

Procédure pas à pas : introduction au contrôle Timer

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

Référence de classe

Les classes de serveur clés pour le contrôle Timer sont présentées dans le tableau suivant.

  • Timer
    Exécute des publications asynchrones ou synchrones de pages Web à un intervalle défini.

Voir aussi

Concepts

Vue d'ensemble du rendu de page partielle

Vue d'ensemble du contrôle UpdatePanel