Partager via

Introduction au contrôle UpdateProgress

  • Article

Mise à jour : novembre 2007

Dans ce didacticiel, vous allez utiliser des contrôles UpdateProgress pour afficher la progression des mises à jour de pages partielles. Si une page contient des contrôles UpdatePanel, vous pouvez également inclure des contrôles UpdateProgress pour conserver les utilisateurs informés de l'état des mises à jour de pages partielles. Vous pouvez utiliser un contrôle UpdateProgress pour représenter la progression des mises à jour de pages partielles pour la page entière. Vous pouvez également inclure un contrôle UpdateProgress pour chaque contrôle UpdatePanel. Ces deux modèles sont illustrés dans ce didacticiel.

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 Visual Web Developer Express.

  • Un site Web ASP.NET AJAX.

Utilisation d'un seul contrôle UpdateProgress

Vous commencerez par utiliser un seul contrôle UpdateProgress pour afficher dans la page la progression pour toutes les mises à jour de pages partielles.

Pour utiliser un seul contrôle UpdateProgress sur toute la page

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

  5. Dans le contrôle UpdateProgress, ajoutez le texte Traitement en cours….

  6. Dans le contrôle UpdatePanel, ajoutez un contrôle Label et un contrôle Button.

  7. Affectez à la propriété Text du contrôle Label la valeur Rendu de page initiale.

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

  9. Ajoutez le code suivant au gestionnaire Click pour créer artificiellement un délai de trois secondes avant d'afficher l'heure actuelle.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}
    Remarque :

    Le gestionnaire de l'événement Click introduit volontairement un délai pour ce didacticiel. Dans la pratique, vous n'introduiriez pas de délai. Au lieu de cela, le délai aurait pour cause le trafic sur le serveur ou le temps de traitement d'un code serveur plus long que d'habitude, pour une requête de base de données par exemple.

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

  11. Cliquez sur le bouton.

    Après un court délai, le message de progression s'affiche. Lorsque le gestionnaire pour l'événement Click s'achève, le message de progression est masqué et l'heure affichée dans le panneau est mise à jour.

    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)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</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="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </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)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</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="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

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

Utilisation de plusieurs contrôles UpdateProgress

Un contrôle UpdateProgress dans la page peut afficher un message de progression pour tous les contrôles UpdatePanel de la page. Les publications (postback) asynchrones qui proviennent d'un contrôle UpdatePanel obligent le contrôle UpdateProgress à afficher son message. Les publications des contrôles qui sont des déclencheurs pour le panneau affichent également le message.

Vous pouvez associer le contrôle UpdateProgress à un seul contrôle UpdatePanel en définissant la propriété AssociatedUpdatePanelID du contrôle de progression. Dans ce cas, le contrôle UpdateProgress n'affiche un message que lorsqu'une publication provient du contrôle UpdatePanel associé.

Dans la procédure suivante, deux contrôles UpdateProgress sont ajoutés à une page, chacun d'entre eux étant associé à un contrôle UpdatePanel différent.

Pour utiliser plusieurs contrôles UpdateProgress sur une page

  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 deux fois sur le contrôle UpdatePanel pour ajouter deux instances du contrôle dans la page.

  4. Dans chaque contrôle UpdatePanel, ajoutez un contrôle Label et un contrôle Button.

  5. Affectez à la propriété Text des deux contrôles Label la valeur Panneau initialement rendu.

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

  7. Ajoutez le code suivant à chaque gestionnaire Click pour créer artificiellement un délai de trois secondes avant d'afficher l'heure actuelle.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

protected void Button2_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label2.Text = "Page refreshed at " +
        DateTime.Now.ToString();       

}

  8. Basculez en mode Design.

  9. Cliquez à l'intérieur du premier contrôle UpdatePanel et ajoutez un contrôle UpdateProgress.

  10. À l'intérieur du contrôle UpdateProgress, ajoutez le texte Mise à jour Panel1.

    La propriété ProgressTemplate est également définie.

  11. Sélectionnez le contrôle UpdateProgress et, dans la fenêtre Propriétés, affectez UpdatePanel1 à la propriété AssociatedUpdatePanelID.

  12. Cliquez à l'intérieur du deuxième contrôle UpdatePanel et ajoutez un deuxième contrôle UpdateProgress.

  13. Affectez au contrôle UpdateProgress le texte Mise à jour Panel2 et affectez à sa propriété AssociatedUpdatePanelID la valeur UpdatePanel2.

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

  15. Cliquez sur le bouton dans le premier panneau.

    Après un court délai, le message de progression associé au premier panneau s'affiche. L'autre contrôle UpdateProgress n'est pas affiché.

  16. Cliquez sur le bouton dans le deuxième panneau.

    Le message de progression associé au deuxième panneau s'affiche.

    Remarque :

    Par défaut, le démarrage d'une nouvelle publication asynchrone alors que la précédente n'est pas encore terminée annule la première des deux. Pour plus d'informations, consultez Accord de priorité à une publication (postback) asynchrone spécifique.

    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)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress 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 initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2"  Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2"  AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </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)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label2.Text = "Page refreshed at " +
            DateTime.Now.ToString();       

    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress 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 initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2"  Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2"  AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

Récapitulatif

Ce didacticiel a introduit deux façons d'utiliser le contrôle UpdateProgress. La première consiste à ajouter dans la plage un contrôle UpdateProgress qui n'est pas associé à un contrôle UpdatePanel particulier. Dans ce cas, le contrôle affiche un message de progression pour tous les contrôles UpdatePanel. La deuxième méthode consiste à utiliser le contrôle de progression pour ajouter plusieurs contrôles UpdateProgress et à associer chacun d'entre eux à un contrôle UpdatePanel différent.

Voir aussi

Tâches

Introduction au contrôle UpdatePanel

Concepts

Vue d'ensemble du contrôle UpdateProgress

Vue d'ensemble du rendu de page partielle

Référence

UpdateProgress

UpdatePanel