Partager via

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

  • Article

Mise à jour : novembre 2007

Dans cette procédure pas à pas, vous mettrez à jour une partie d'une page Web selon une fréquence donnée en utilisant trois contrôles serveur ASP.NET AJAX : ScriptManager, UpdatePanel et Timer. L'ajout de ces contrôles dans une page élimine la nécessité d'actualiser la page entière à chaque publication (postback). Seul le contenu du contrôle UpdatePanel est mis à jour.

Pour plus d'informations sur le rendu de page partielle, consultez Vue d'ensemble du rendu de page partielle.

Composants requis

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

  • Microsoft Visual Studio 2005 ou Visual Web Developer Express

  • Site Web ASP.NET AJAX.

Pour actualiser des contrôles UpdatePanel à une fréquence donnée

  1. Dans Microsoft Visual Studio 2005 ou Visual Web Developer Express, créez une nouvelle page Web ASP.NET AJAX et basculez en mode Design.

  2. 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.

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

  4. Cliquez dans le contrôle UpdatePanel puis double-cliquez sur le contrôle Timer pour l'ajouter au contrôle UpdatePanel.

    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 montre comment utiliser le contrôle Timer à l'extérieur d'un contrôle UpdatePanel. Pour obtenir un exemple d'utilisation d'un contrôle Timer comme déclencheur à l'extérieur d'un contrôle UpdatePanel, consultez Procédure pas à pas : utilisation du contrôle Timer ASP.NET avec plusieurs contrôles UpdatePanel.

  5. Affectez à la propriété Interval du contrôle Timer la valeur 10 000.

    La propriété Interval est définie en millisecondes, de sorte qu'en affectant à la propriété Interval une valeur de 10 000 millisecondes, le contrôle UpdatePanel est actualisé 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 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.

  6. Cliquez à l'intérieur du contrôle UpdatePanel, puis, sous l'onglet Standard de la boîte à outils, double-cliquez sur le contrôle Label pour l'ajouter au contrôle UpdatePanel.

    Remarque :

    Assurez-vous que vous ajoutez le contrôle Label à l'intérieur du contrôle UpdatePanel.

  7. Affectez à l'étiquette de la propriété Text la valeur Panel pas encore actualisé.

  8. Cliquez à l'extérieur du contrôle UpdatePanel et double-cliquez sur le contrôle Label pour ajouter une deuxième étiquette à l'extérieur du contrôle UpdatePanel.

    Remarque :

    Assurez-vous que vous ajoutez le deuxième contrôle Label à l'extérieur du contrôle UpdatePanel.

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

  10. Ajoutez le code qui affecte l'heure actuelle à la propriété Text du contrôle Label1.

  11. Créez un gestionnaire Page_Load et ajoutez le code qui définit la propriété Text du contrôle Label2 à l'heure de création de la page.

  12. Basculez en mode Source.

    Assurez-vous que le balisage de la page est comparable au suivant :

    Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Label2.Text = "Page created at: " & _
          DateTime.Now.ToLongTimeString()
    End Sub

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel 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)
    {
        Label2.Text = "Page created at: " +
          DateTime.Now.ToLongTimeString();
    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
          DateTime.Now.ToLongTimeString();
    }
}

  13. Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.

  14. Attendez au moins 10 secondes pour actualiser le panneau.

    Le texte du panneau change pour afficher l'heure de sa dernière actualisation. Toutefois, le texte à l'extérieur du panneau n'est pas actualisé.

Récapitulatif

Cette procédure pas à pas a introduit les concepts de base de l'utilisation d'un contrôle Timer et d'un contrôle UpdatePanel pour activer des mises à jour de pages partielles. Vous devez ajouter un contrôle ScriptManager à toute page qui contient un contrôle UpdatePanel ou un contrôle Timer. Par défaut, un contrôle Timer à l'intérieur du panneau ne déclenche l'actualisation du panneau que lors d'une publication asynchrone. Un contrôle Timer à l'extérieur d'un panneau peut déclencher l'actualisation du UpdatePanel s'il est configuré comme déclencheur pour le panneau.

L'étape suivante est d'apprendre l'utilisation du contrôle Timer à l'extérieur d'un contrôle UpdatePanel et l'utilisation de la minuterie pour mettre à jour plusieurs contrôles UpdatePanel. Pour plus d'informations sur ces tâches, consultez Procédure pas à pas : utilisation du contrôle Timer ASP.NET avec plusieurs contrôles UpdatePanel.

Voir aussi

Concepts

Vue d'ensemble du contrôle Timer

Vue d'ensemble du rendu de page partielle

Référence

Timer

UpdatePanel

ScriptManager