Exporter (0) Imprimer
Développer tout
Cet article a fait l'objet d'une traduction manuelle. Déplacez votre pointeur sur les phrases de l'article pour voir la version originale de ce texte.
Traduction
Source
1 sur 1 ont trouvé cela utile - Évaluez ce sujet

Introduction au contrôle UpdatePanel

Cette rubrique explique comment ajouter la prise en charge de la mise à jour de pages partielles à une page Web à l'aide de deux contrôles serveur Microsoft Ajax : ScriptManager et 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.

Un projet Visual Studio (avec code source) est disponible pour accompagner cette rubrique : Download.

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

  • Visual Studio ou 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.

    Didacticiel UpdatePanel
  3. Double-cliquez sur le contrôle UpdatePanel pour l'ajouter à la page.

    Didacticiel UpdatePanel
  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.

    RemarqueRemarque

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

  5. Affectez Panel created à la propriété Text de Label.

    Didacticiel UpdatePanel
  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 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="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        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 runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
        #UpdatePanel1 { 
          width:300px; height:100px;
         }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="padding-top: 10px">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset>
                    <legend>UpdatePanel</legend>
                    <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                    <asp:Button ID="Button1" runat="server" 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.

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.

    Didacticiel UpdatePanel
  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.

    RemarqueRemarque

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

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

    Didacticiel 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="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>UpdatePanel Tutorial</title>
        <style type="text/css">
        #UpdatePanel1 { 
          width:300px;
         }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset>
                    <legend>UpdatePanel</legend>
                    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>    
        </div>
        </form>
    </body>
    </html>
    
    
    

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.

    Didacticiel UpdatePanel
  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 Panel created à la propriété Text de l'étiquette.

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

    Didacticiel UpdatePanel
  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 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.

    Didacticiel UpdatePanel
    RemarqueRemarque

    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.

    Didacticiel UpdatePanel
  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.

    Didacticiel UpdatePanel

    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="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        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 runat="server">
        <title>UpdatePanel Tutorial</title>
        <style type="text/css">
        #UpdatePanel1 { 
          width:300px;
         }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset>
                    <legend>UpdatePanel</legend>
                    <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                    </fieldset>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" />
                </Triggers>
            </asp:UpdatePanel>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
        </form>
    </body>
    </html>
    
    
    

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.

Cela vous a-t-il été utile ?
(1500 caractères restants)
Merci pour vos suggestions.

Ajouts de la communauté

AJOUTER
Afficher:
© 2014 Microsoft. Tous droits réservés.