Didacticiel : actualiser un contrôle UpdatePanel selon un intervalle de minuterie

Dans cette procédure pas à pas, vous allez mettre à jour une portion d’une page Web selon un intervalle de minuterie à l’aide de trois contrôles serveur ASP.NET AJAX : le contrôle ScriptManager, le contrôle UpdatePanel et le contrôle Timer. L’ajout de ces contrôles à une page évite d’actualiser la page tout entière avec chaque publication. Seul le contenu du contrôle UpdatePanel est mis à jour.

Tous les contrôles ASP.NET AJAX requièrent des paramètres spécifiques dans un fichier web.config pour fonctionner correctement. Si vous essayez d’utiliser l’un de ces contrôles, et si votre site Web ne contient pas le fichier web.config requis, des erreurs apparaissent dans le mode Création de la page où le contrôle est censé s’afficher. En mode Création, si vous cliquez sur un contrôle qui se trouve dans cet état, Microsoft Expression Web vous donne la possibilité de créer un fichier web.config ou de mettre à jour votre fichier web.config existant.

Pour actualiser un contrôle UpdatePanel selon un intervalle de minuterie

1. Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur ASPX.

2. Placez le curseur dans le mode Création de votre page ASPX.

3. Dans le volet des tâches Boîte à outils, sous Contrôles ASP.NET, sous AJAX, double-cliquez sur le contrôle ScriptManager pour l’ajouter à la page. Si une boîte de dialogue vous demande d’ajouter ou de mettre à jour un fichier web.config pour la prise en charge de .NET Framework version 3.5, cliquez sur Oui. Si une boîte de dialogue vous demande si vous souhaitez activer une aide visuelle pour les contrôles non visuels, cliquez sur Oui.

4. Dans le volet des tâches Boîte à outils, sous Contrôles ASP.NET, sous AJAX, double-cliquez sur le contrôle UpdatePanel pour l’ajouter à la page.

5. Placez le curseur à l’intérieur du contrôle UpdatePanel en mode Création.

6. Dans le volet des tâches Boîte à outils, sous les catégories Contrôles ASP.NET et AJAX, double-cliquez sur le contrôle Timer pour l’insérer dans le contrôle UpdatePanel de la page.

   Remarque :

   Le contrôle Timer peut fonctionner comme déclencheur à l’intérieur ou à l’extérieur d’un contrôle UpdatePanel. Cet exemple illustre comment utiliser le contrôle Timer à l’intérieur d’un contrôle UpdatePanel. Pour consulter un exemple d’utilisation d’un contrôle Timer comme déclencheur en dehors d’un contrôle UpdatePanel, reportez-vous à la procédure pas à pas relative à l’utilisation du contrôle ASP.NET Timer avec plusieurs contrôles UpdatePanel dans MSDN Library. Bien que cette rubrique soit écrite pour Microsoft Visual Web Developer, vous pouvez en suivre les étapes à quelques exceptions près dans Microsoft Expression Web.

7. Le contrôle Timer étant sélectionné dans la page, dans le volet des tâches Propriétés des balises, définissez la propriété Interval sur 10000. La propriété Interval étant définie en millisecondes, sa valeur de 10 000 ms actualise le contrôle UpdatePanel toutes les 10 secondes.

   Remarque :

   Dans cet exemple, l’intervalle de minuterie est défini sur 10 secondes. De cette manière, lorsque vous exécutez l’exemple, vous n’avez pas à attendre longtemps pour consulter les résultats. En revanche, chaque intervalle de minuterie engendre une publication vers le serveur et crée du trafic sur le réseau. Par conséquent, dans une application de production, vous devez définir l’intervalle le plus long possible, mais toujours adapté à votre application.

8. Placez le curseur dans le contrôle UpdatePanel en mode Création.

9. Dans le volet des tâches Boîte à outils, sous les catégories Contrôles ASP.NET et Standard, double-cliquez sur le contrôle Label pour l’insérer dans le contrôle UpdatePanel.

10. Le contrôle Label étant sélectionné dans la page, dans le volet des tâches Propriétés des balises, dans la zone Texte, tapez Volet non actualisé.

11. Placez le curseur à l’extérieur du contrôle UpdatePanel.

12. Dans le volet des tâches Boîte à outils, sous les catégories Contrôles ASP.NET et Standard, double-cliquez sur le contrôle Label pour ajouter une deuxième étiquette à la page.

    Remarque :
    Veillez à ajouter le deuxième contrôle Label à l’extérieur du contrôle UpdatePanel.

13. Dans le mode Code de la page, avant la balise </head>, ajoutez l’un des exemples de code suivants en fonction du langage de votre page.

    <script runat="server" type="text/c#">
      protected void Timer1_Tick(object sender, EventArgs e)
        {
            Label1.Text = "Panel refreshed at: " +
    DateTime.Now.ToLongTimeString();
        }
    </script>
    

    <script runat="server" type="text/vb">
    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs)
    Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
    End Sub 
    </script>
    

14. En mode Code, recherchez la balise <asp:Timer runat="server" id="Timer1" Interval="10000"> et ajoutez-y OnTick="Timer1_Tick".

15. Dans le menu Fichier, cliquez sur Enregistrer.

16. Appuyez sur F12 pour afficher un aperçu de la page dans votre navigateur Web. Patientez au moins 10 secondes, le temps que le panneau UpdatePanel s’actualise. Le texte du panneau change pour afficher la dernière actualisation de son contenu. Toutefois, le texte à l’extérieur du panneau n’est pas actualisé.

Les tableaux suivants indiquent le code de page final.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="VB" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script runat="server" type="text/vb">
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs)
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
End Sub 
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." id="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" id="Label2"></asp:Label>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script runat="server" type="text/c#">
  protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." id="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" id="Label2"></asp:Label>
</form>
</body>
</html>

Cette procédure pas à pas vous a présenté les concepts fondamentaux de l’utilisation d’un contrôle Timer et d’un contrôle UpdatePanel pour permettre des mises à jour de page partielle. 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 volet entraîne seulement l’actualisation de ce dernier pendant une publication asynchrone. Un contrôle Timer en dehors d’un volet peut entraîner l’actualisation du contrôle UpdatePanel s’il est configuré comme déclencheur pour le volet.

Voir aussi

Concepts

Timer, contrôle

UpdatePanel, contrôle

ScriptManager, contrôle

Vue d’ensemble du rendu de page partielle