Introduction au contrôle UpdatePanel

  • Article

Mise à jour : novembre 2007

Dans ce didacticiel, vous apprendrez à ajouter la prise en charge de la mise à jour de page partielle à une page Web en utilisant deux contrôles serveur ASP.NET AJAX : le contrôle ScriptManager et le contrôle UpdatePanel. Ces contrôles suppriment la nécessité d'actualiser la page entière lors de chaque publication (postback), ce qui améliore la facilité d'utilisation. Pour plus d'informations sur les mises à jour de pages partielles, consultez Vue d'ensemble du rendu de page partielle.

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

  • Un site Web ASP.NET AJAX.

Pour utiliser un contrôle 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. Double-cliquez sur le contrôle UpdatePanel pour l'ajouter à la page.

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

    Remarque :

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

  5. Affectez à la propriété Text du Label la valeur Panneau créé.

  6. Double-cliquez sur le contrôle Button pour ajouter un gestionnaire pour l'événement Click du bouton.

  7. Ajoutez le code suivant au gestionnaire Click, qui définit la valeur de l'étiquette dans le panneau sur l'heure actuelle.

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

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

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

  9. Cliquez sur le bouton.

    Notez que le texte affiché dans le panneau est remplacé par l'heure de la dernière actualisation du panneau. Ce texte est défini dans le gestionnaire d'événements Click du bouton.

    Un style est appliqué à l'exemple pour mettre en évidence la partie de la page représentée par 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 = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </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 = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

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

    Le contenu du panneau change chaque fois que vous cliquez sur le bouton, mais la page entière n'est pas actualisée. 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.

Présentation des avantages du contrôle UpdatePanel

Pour mieux comprendre les avantages du contrôle UpdatePanel, ajoutez quelques contrôles à la page non incluse dans le panneau de mise à jour. Vous pourrez alors examiner en quoi leur comportement diffère de celui des contrôles de l'intérieur du panneau de mise à jour.

Pour démontrer les avantages de l'utilisation du contrôle 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. Double-cliquez sur le contrôle UpdatePanel pour l'ajouter à 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 Calendar pour l'ajouter au contrôle UpdatePanel.

    Remarque :

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

  5. Cliquez à l'extérieur du contrôle UpdatePanel puis ajoutez un deuxième contrôle Calendar à la page.

    Ce contrôle ne fera pas partie du contrôle UpdatePanel.

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

  7. Passez au mois suivant ou au mois précédent dans le calendrier situé à l'intérieur du contrôle UpdatePanel.

    Le mois affiché change automatiquement, mais la page entière n'est pas actualisée.

  8. Passez au mois suivant ou au mois précédent dans le calendrier situé à l'extérieur du contrôle UpdatePanel.

    La page entière est actualisée.

    Un style est appliqué à l'exemple pour mettre en évidence la partie de la page représentée par 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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </div>
    </form>
</body>
</html>

Actualisation d'un contrôle UpdatePanel avec un bouton externe

Par défaut, un contrôle de publication (tel qu'un bouton) situé à l'intérieur d'un contrôle UpdatePanel provoque une mise à jour de page partielle. Par défaut, un bouton ou un autre contrôle situé à l'extérieur d'un contrôle UpdatePanel entraîne l'actualisation de la page entière.

Vous pouvez également définir un contrôle à l'extérieur du panneau de mise à jour, configuré comme un déclencheur d'actualisation du panneau de mise à jour uniquement.

Pour actualiser un contrôle UpdatePanel avec un bouton externe

  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 et sur le contrôle UpdatePanel pour les ajouter à la page.

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

  4. Affectez à la propriété Text de l'étiquette la valeur Panneau créé.

  5. Cliquez à l'extérieur du contrôle UpdatePanel, puis ajoutez un contrôle Button.

  6. Double-cliquez sur le contrôle Button pour ajouter un gestionnaire pour l'événement Click du bouton.

  7. Ajoutez le code suivant au gestionnaire Click, qui définit la valeur de l'étiquette dans le panneau sur l'heure actuelle.

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

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

  8. Basculez en mode Design, sélectionnez UpdatePanel, puis accédez à la fenêtre Propriétés.

    Remarque :

    Si la fenêtre Propriétés n'est pas affichée, appuyez sur F4.

  9. Dans le champ Déclencheurs, double-cliquez sur le bouton de sélection (…).

    La boîte de dialogue Éditeur de collections UpdatePanelTrigger s'affiche.

  10. Cliquez sur Ajouter pour ajouter un nouveau déclencheur.

  11. Dans le champ ControlID des propriétés de déclencheur, utilisez la liste déroulante pour sélectionner Button1.

    Dans cet exemple, la propriété EventName du déclencheur n'a pas été spécifiée. Par conséquent, l'événement par défaut (l'événement Click ) du bouton déclenchera l'actualisation du contrôle UpdatePanel.

  12. Cliquez sur OK dans l'éditeur de collections.

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

  14. Cliquez sur le bouton.

    Le texte affiché dans le panneau est remplacé par l'heure de la dernière actualisation du contenu du panneau.

  15. Cliquez plusieurs fois sur le bouton.

    L'heure change, mais la page entière n'est pas actualisée.

    Cliquer sur le bouton à l'extérieur du UpdatePanel actualise le contenu du panneau parce que vous avez configuré le bouton comme déclencheur du contrôle UpdatePanel. Lorsque vous cliquez sur un bouton qui est un déclencheur, il exécute une publication asynchrone et le panneau de mise à jour associé est automatiquement mis à jour. Ce comportement ressemble à celui du premier exemple présenté dans ce didacticiel, où le bouton était à l'intérieur du UpdatePanel.

    L'exemple est mis en forme pour illustrer clairement la partie de la page que le contrôle UpdatePanel représente.

    <%@ 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 = "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 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></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 = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

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

Récapitulatif

Ce didacticiel vous a présenté les concepts de base de l'utilisation d'un contrôle UpdatePanel pour activer des mises à jour de pages partielles. Vous devez toujours ajouter un contrôle ScriptManager, puis ajouter les contrôles UpdatePanel. Par défaut, les contrôles à l'intérieur du panneau provoqueront l'actualisation du panneau lorsqu'ils exécutent une publication. Les contrôles externes peuvent provoquer l'actualisation d'un UpdatePanel s'ils sont configurés comme déclencheur pour le panneau.

L'étape suivante est destinée à vous apprendre à ajouter plusieurs contrôles UpdatePanel à la page. Pour plus d'informations, consultez Création d'une page ASP.NET simple avec plusieurs contrôles UpdatePanel.

Voir aussi

Concepts

Vue d'ensemble du rendu de page partielle

Référence

UpdatePanel

ScriptManager