Didacticiel : comment créer une page avec deux zones pouvant être mises à jour de manière indépendante

Article
10/11/2017

Dans ce didacticiel, vous allez utiliser plusieurs contrôles UpdatePanel sur une page. En utilisant plusieurs contrôles UpdatePanel sur une page, vous pouvez mettre à jour de façon incrémentielle des régions de la page, séparément ou ensemble. Pour plus d’informations sur les mises à jour de page partielle, voir Vue d’ensemble du rendu de page partielle.

Tous les contrôles ASP.NET AJAX requièrent des paramètres particuliers 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 créer une page avec deux zones pouvant être mises à jour de manière indépendante

Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur ASPX.
Placez le curseur dans le mode Création de votre page ASPX.
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 un fichier web.config à votre site Web 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.
Dans le volet des tâches Boîte à outils, sous Contrôles ASP.NET, sous AJAX, double-cliquez sur le contrôle UpdatePanel à deux reprises pour ajouter deux contrôles UpdatePanel à la page.
L’un des contrôles UpdatePanel sélectionné dans votre page, dans le volet des tâches Propriétés des balises, définissez la propriété UpdateMode sur Conditional. Répétez cette étape pour l’autre contrôle UpdatePanel.
Dans le volet des tâches Boîte à outils, sous les catégories Contrôles ASP.NET et Standard, faites glisser un contrôle Label dans l’un des contrôles UpdatePanel en mode Création.
Le contrôle Label étant sélectionné dans la page, dans le volet des tâches Propriétés des balises, définissez la propriété Texte sur « Panneau créé ».
Dans le volet des tâches Boîte à outils, sous les catégories Contrôles ASP.NET et Standard, faites glisser un contrôle Button dans le même contrôle UpdatePanel qui contient le contrôle Label.
Le bouton étant sélectionné dans la page, dans le volet des tâches Propriétés des balises, définissez la propriété Texte sur « Actualiser le panneau ».
Dans le volet des tâches Boîte à outils, sous les catégories Contrôles ASP.NET et Standard, faites glisser un contrôle Calendar dans l’autre contrôle UpdatePanel en mode Création.

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 Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

En mode Code, recherchez la balise <asp:Button runat="server" Text="Actualiser le panneau" id="Button1" /> et ajoutez-y "OnClick="Button1_Click".
Dans le menu Fichier, cliquez sur Enregistrer.
Appuyez sur F12 pour afficher un aperçu de la page dans votre navigateur Web.

Dans votre page dans le navigateur Web, cliquez sur le bouton. Le texte du panneau change pour afficher la dernière actualisation de son contenu. Dans le calendrier, passez à un autre mois. L’heure de l’autre panneau ne change pas. Le contenu des deux panneaux est mis à jour de manière indépendante.

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="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 2</title>
<script runat="server" type="text/c#">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</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="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 2</title>
<script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Révision

Ce didacticiel a introduit le concept de l’utilisation de plusieurs contrôles UpdatePanel sur une page. Lorsque les contrôles UpdatePanel ne sont pas imbriqués, vous pouvez mettre à jour chaque panneau de manière indépendante en définissant la propriété UpdateMode sur Conditional. (La valeur par défaut de la propriété UpdateMode est Always. Cela provoque l’actualisation du panneau en réponse à une publication asynchrone.)

Lorsque les panneaux sont imbriqués, le comportement diffère légèrement. Si vous définissez la propriété UpdateMode du contrôle externe et du contrôle imbriqué sur Conditional, le panneau interne peut être actualisé sans actualiser le panneau externe. Toutefois, si le panneau externe de mise à jour est actualisé, le panneau interne l’est également.

Pour des didacticiels supplémentaires sur l’utilisation des contrôles UpdatePanel, voir les liens sous les rubriques Procédures et Procédures pas à pas de la rubrique décrivant UpdatePanel dans MSDN Library. Bien que ces didacticiels soient écrits pour Microsoft Visual Web Developer, vous pouvez en suivre les étapes à quelques exceptions près dans Microsoft Expression Web.

Voir aussi

Concepts

Vue d’ensemble du rendu de page partielle

UpdatePanel, contrôle

ScriptManager, contrôle

Partager via

Didacticiel : comment créer une page avec deux zones pouvant être mises à jour de manière indépendante

Pour créer une page avec deux zones pouvant être mises à jour de manière indépendante

Voir aussi

Concepts

Ressources supplémentaires