Création d'une page ASP.NET simple avec plusieurs contrôles UpdatePanel

  • Article

Mise à jour : novembre 2007

Dans ce didacticiel, vous travaillerez avec plusieurs contrôles UpdatePanel sur une page. En utilisant plusieurs contrôles UpdatePanel sur une page, vous pouvez modifier de façon incrémentielle des zones de mise à jour de la page séparément ou toutes à la fois. Pour plus d'informations sur les mises à jour de pages partielles, consultez Vue d'ensemble du rendu de page partielle et Introduction au contrôle UpdatePanel.

Composants requis

Pour implémenter les procédures dans votre propre environnement de développement, vous avez besoin des éléments suivants :

  • Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express

  • Site Web ASP.NET AJAX.

Pour créer une page avec deux régions indépendantes à mettre à jour

  1. Créez une nouvelle page et basculez en mode Design.

  2. Sous l'onglet Extensions AJAX de la boîte à outils, double-cliquez sur le contrôle ScriptManager pour l'ajouter à la page.

  3. Double-cliquez sur le contrôle UpdatePanel dans la boîte à outils deux fois pour ajouter deux contrôles UpdatePanel à la page.

  4. Dans la fenêtre Propriétés, affectez à la propriété UpdateMode des deux contrôles UpdatePanel() la valeur Conditional.

  5. Dans un des contrôles UpdatePanel, ajoutez un contrôle Label et affectez à sa propriété Text la valeur Panneau Créé.

  6. Dans le même contrôle UpdatePanel, ajoutez le contrôle Button et affectez à sa propriété Text la valeur Actualiser.

  7. Dans l'autre contrôle UpdatePanel, ajoutez le contrôle Calendar.

  8. Double-cliquez sur le bouton Actualiser pour ajouter un gestionnaire d'événements pour son événement Click.

  9. Ajoutez le code suivant au gestionnaire, qui affecte l'heure actuelle au contrôle Label.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Panel refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Panel refreshed at " +
        DateTime.Now.ToString();
}

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

  11. Cliquez sur le bouton.

    Le texte dans le panneau change pour afficher le temps de la dernière actualisation.

  12. Dans le calendrier, déplacez-vous sur un mois différent.

    L'heure dans l'autre panneau ne change pas. Le contenu des deux panneaux est mis à jour indépendamment.

    Un style est appliqué à l'exemple pour mettre en évidence la partie de la page représentée par le contrôle UpdatePanel.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1"  Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1"  Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

    Par défaut, la propriété ChildrenAsTriggers d'un contrôle UpdatePanel a la valeur true. Lorsque cette propriété a la valeur true, les contrôles situés dans le panneau participent aux mises à jour de pages partielles lorsque l'un d'eux provoque une publication (postback).

Imbrication de contrôles UpdatePanel

Dans quelques scénarios, l'imbrication de contrôles UpdatePanel vous permet de fournir des fonctionnalités d'interface utilisateur qui seraient difficiles de fournir autrement. Les panneaux imbriqués sont utiles lorsque vous souhaitez être en mesure d'actualiser séparément des régions spécifiques de la page et actualiser plusieurs régions en même temps. Vous pouvez accomplir ceci en définissant aux propriétés UpdateMode des contrôles externes et imbriqués la valeur Conditional. Cela provoque la non actualisation de la région de page du panneau externe si seul le panneau interne est actualisé. Toutefois, si le panneau externe est actualisé, les panneaux imbriqués sont également actualisés.

Dans l'exemple suivant, un formulaire simplifié est montré.

Pour imbriquer des contrôles UpdatePanel

  1. Créez une nouvelle page et basculez en mode Design.

  2. 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 ajouter un contrôle UpdatePanel à la page.

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

  5. Affectez à la propriété Text du bouton la valeur Actualiser panneau externe.

  6. Dans la fenêtre Propriétés, affectez à la propriété UpdateMode du contrôle UpdatePanel() la valeur Conditional.

  7. Basculez en mode Source et ajoutez le code source dans l'élément <ContentTemplate> de l'élément <asp:UpdatePanel>.

    Last refresh <%=DateTime.Now.ToString() %> <br />

    Last refresh <%=DateTime.Now.ToString() %> <br />

    Le code affiche l'heure et est utilisé pour indiquer quand la balise a été restituée dernièrement.

  8. Basculez en mode Design, cliquez à l'intérieur du contrôle UpdatePanel, puis ajoutez un deuxième contrôle UpdatePanel à l'intérieur du premier panneau.

  9. Dans la fenêtre Propriétés, affectez à la propriété UpdateMode du contrôle imbriqué UpdatePanel() la valeur Conditional.

  10. Ajoutez un Calendar, à l'intérieur du contrôle imbriqué UpdatePanel.

  11. Basculez en mode Source et ajoutez le code source dans l'élément <ContentTemplate> de l'élément imbriqué <asp:UpdatePanel>.

    Last refresh <%=DateTime.Now.ToString() %> <br />

    Last refresh <%=DateTime.Now.ToString() %> <br />

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

    Lorsque vous vous déplacez au mois précédent ou suivant dans le calendrier du contrôle imbriqué UpdatePanel, l'heure du panneau externe ne change pas parce que le contenu n'est pas restitué. Par opposition, lorsque vous cliquez sur le bouton dans le panneau externe, l'heure dans le panneau interne est actualisée. Le calendrier ne change pas car par défaut, la propriété EnableViewState est true pour le contrôle Calendar.

    Un style est appliqué à l'exemple pour mettre en évidence la partie de la page représentée par le contrôle UpdatePanel.

    <%@ Page Language="VB" %>

<!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 >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" >
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1"  Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" >
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" ></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!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 >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" >
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1"  Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" >
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" ></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
    Remarque :

    Seul le contrôle Calendar apparaît ne pas avoir été mis à jour. Par défaut, lorsque le calendrier est restitué, il a pour valeur le mois et la date actuels. Toutefois, dans cette étape, lorsque vous cliquez sur le bouton, le calendrier affiche le mois et date que vous avez sélectionnés précédemment. Discrètement, la page utilise l'état de vue du contrôle Calendar pour restituer le calendrier avec le mois et la date que vous avez sélectionnés. Cela illustre que le contrôle UpdatePanel exécute la logique appropriée pour s'assurer que la page reste dans l'état attendu après une publication asynchrone. Vous pouvez tester ceci en affectant à la propriété EnableViewState du contrôle Calendar la valeur false et en exécutant encore ces étapes. Dans ce cas, indépendamment du mois sur lequel vous vous placez, lorsque vous cliquez sur le bouton, le calendrier affiche le mois actuel.

Récapitulatif

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

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

Voir aussi

Tâches

Introduction au contrôle UpdatePanel

Concepts

Utilisation du contrôle UpdatePanel ASP.NET avec des contrôles liés aux données