Vue d'ensemble du contrôle UpdateProgress

  • Article

Mise à jour : novembre 2007

Le contrôle UpdateProgress fournit des informations d'état à propos des mises à jour de pages partielles dans les contrôles UpdatePanel. Vous pouvez personnaliser le contenu et la disposition par défaut du contrôle UpdateProgress. Pour éviter le clignotement lorsqu'une mise à jour de page partielle est très rapide, vous pouvez spécifier un délai avant l'affichage du contrôle UpdateProgress.

Cette rubrique contient des informations sur :

  • Scénarios

  • Contexte

  • Exemples de code

  • Référence de classe

Scénarios

Le contrôle UpdateProgress vous aide à concevoir une interface utilisateur plus intuitive lorsqu'une page Web contient un ou plusieurs contrôles UpdatePanel pour le rendu de page partielle. Si une mise à jour de page partielle est lente, vous pouvez utiliser le contrôle UpdateProgress pour fournir la rétroaction visuelle à propos de l'état de la mise à jour. Vous pouvez placer de nombreux contrôles UpdateProgress sur une page, chacun associé à un contrôle UpdatePanel différent. Vous pouvez également utiliser un contrôle UpdateProgress et l'associer à tous les contrôles UpdatePanel sur la page.

Contexte

Le contrôle UpdateProgress restitue un élément <div> qui est affiché ou masqué selon qu'un contrôle UpdatePanel associé a provoqué une publication (postback) asynchrone. Pour le rendu de page initiale et les publications synchrones, le contrôle UpdateProgress n'est pas affiché.

Association d'un contrôle UpdateProgress à un contrôle UpdatePanel

Vous associez un contrôle UpdateProgress à un contrôle UpdatePanel en définissant la propriété AssociatedUpdatePanelID du contrôle UpdateProgress. Lorsqu'un événement de publication provient d'un contrôle UpdatePanel, tout contrôle UpdateProgress associé est affiché. Si vous n'associez pas le contrôle UpdateProgress à un contrôle UpdatePanel spécifique, le contrôle UpdateProgress affiche la progression de toute publication asynchrone.

Si la propriété ChildrenAsTriggers d'un contrôle UpdatePanel a la valeur false et qu'une publication asynchrone provient de ce contrôle UpdatePanel, tous les contrôles UpdateProgress associés sont affichés.

Création de contenu pour le contrôle UpdateProgress

Utilisez la propriété ProgressTemplate pour spécifier de manière déclarative le message affiché par un contrôle UpdateProgress. L'élément <ProgressTemplate> peut contenir du HTML et des balises. L'exemple suivant montre comment spécifier un message pour un contrôle UpdateProgress.

<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

L'exemple suivant illustre un contrôle UpdateProgress qui affiche l'état de mise à jour pour deux contrôles 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { 
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" >
    <ProgressTemplate>
      Update in progress...
    </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 Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { 
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" >
    <ProgressTemplate>
      Update in progress...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

L'exemple suivant montre deux contrôles UpdateProgress. Chaque contrôle affiche l'état de mise à jour pour un contrôle UpdatePanel associé.

<%@ 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
     }
     #UpdateProgress1, #UpdateProgress2 {
      width: 200px; background-color: #FFC080;
      position: absolute; bottom: 0px; left: 0px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </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 Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
     }
     #UpdateProgress1, #UpdateProgress2 {
      width: 200px; background-color: #FFC080;
      position: absolute; bottom: 0px; left: 0px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

L'exemple suivant indique comment ajouter un bouton à l'élément <ProgressTemplate>, bouton sur lequel l'utilisateur peut cliquer pour arrêter la publication asynchrone. Toute nouvelle publication initialisée pendant l'exécution d'une autre publication est annulée.

<%@ 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;    
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
       if (prm.get_isInAsyncPostBack())
       {
          args.set_cancel(true);
       }
       postBackElement = args.get_postBackElement();
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "block";
       }
    }
    function EndRequest (sender, args) {
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "none";    
       }
    }
    function AbortPostBack() {
      if (prm.get_isInAsyncPostBack()) {
           prm.abortPostBack();
      }        
    }
    </script>
    <asp:Button ID="ButtonTrigger"  Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    The trigger for this panel 
    causes the UpdateProgress to be displayed
    even though the UpdateProgress is associated
    with panel 2.     
    <br />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      Update in progress...
      <input type="button" value="stop" onclick="AbortPostBack()" />
    </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 Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;    
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
       if (prm.get_isInAsyncPostBack())
       {
          args.set_cancel(true);
       }
       postBackElement = args.get_postBackElement();
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "block";
       }
    }
    function EndRequest (sender, args) {
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "none";    
       }
    }
    function AbortPostBack() {
      if (prm.get_isInAsyncPostBack()) {
           prm.abortPostBack();
      }        
    }
    </script>
    <asp:Button ID="ButtonTrigger"  Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    The trigger for this panel 
    causes the UpdateProgress to be displayed
    even though the UpdateProgress is associated
    with panel 2.     
    <br />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      Update in progress...
      <input type="button" value="stop" onclick="AbortPostBack()" />
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

Dans l'exemple précédent, l'attribut onClick d'un contrôle HtmlButton dans l'élément <ProgressTemplate> appelle la fonction JavaScript AbortPostBack. Pour plus d'informations, consultez la méthode abortPostBack et la propriété isInAsyncPostBack de la classe PageRequestManager.

Spécification de la disposition du contenu

Lorsque la propriété DynamicLayout est true, le contrôle UpdateProgress n'occupe initialement aucun espace dans l'affichage de page. À la place, la page change dynamiquement pour afficher le contenu du contrôle UpdateProgress suivant les besoins. Pour prendre en charge l'affichage dynamique, le contrôle est restitué sous forme d'élément <div> ayant sa propriété de style display initialement définie à none.

Lorsque la propriété DynamicLayout est false, le contrôle UpdateProgress occupe de l'espace dans l'affichage de page, même s'il n'est pas visible. Dans ce cas, l'élément <div> du contrôle a son jeu de propriétés de style défini display à block et son visibility initialement défini à hidden.

Placement de contrôles UpdateProgress sur la page

Vous pouvez mettre des contrôles UpdateProgress à l'intérieur ou à l'extérieur des contrôles UpdatePanel. Un contrôle UpdateProgress est affiché chaque fois que le contrôle UpdatePanel auquel il est associé est mis à jour à la suite d'une publication asynchrone. C'est le cas même si le contrôle UpdateProgress est à l'intérieur d'un autre contrôle UpdatePanel.

Si un contrôle UpdatePanel est à l'intérieur d'un autre panneau de mise à jour, une publication provenant de l'intérieur du panneau enfant provoque l'affichage de tous les contrôles UpdateProgress associés au panneau enfant. Il affiche également tous les contrôles UpdateProgress associés au panneau parent. Si une publication provient d'un contrôle enfant immédiat du panneau parent, seuls les contrôles UpdateProgress associés au panneau parent sont affichés. Cela s'inscrit dans la logique de déclenchement des publications.

Personnalisation lors de l'affichage des contrôles UpdateProgress

Vous pouvez déterminer par programme quand un contrôle UpdateProgress doit être affiché en utilisant les événements JavaScript beginRequest et endRequest de la classe PageRequestManager. Dans le gestionnaire d'événements beginRequest, affichez l'élément DOM qui représente le contrôle UpdateProgress. Dans le gestionnaire des événements endRequest, masquez l'élément.

Vous devez fournir le script client pour afficher et masquer un contrôle UpdateProgress dans les circonstances suivantes :

  • Pendant une publication d'un contrôle enregistré comme déclencheur de publication asynchrone pour le panneau de mise à jour, mais avec lequel le contrôle UpdateProgress n'est pas associé.

  • Pendant les publications de contrôles qui sont enregistrées par programmation sous forme de contrôles de publications asynchrones à l'aide de la méthode RegisterAsyncPostBackControl du contrôle ScriptManager. Dans ce cas, le contrôle UpdateProgress ne peut pas déterminer automatiquement qu'une publication asynchrone a été déclenchée.

Exemples de code

Les sections suivantes incluent des exemples de code pour créer et utiliser [T:System.Web.UI.]UpdateProgress des contrôles.

Didacticiels

Référence de classe

Le tableau suivant répertorie les classes clés à utiliser avec la classe [T:System.Web.UI.]UpdateProgress.

Classe

Description

UpdateProgress

Fournit des commentaires visuels dans le navigateur lorsque le contenu des contrôles UpdatePanel est mis à jour.

UpdatePanel

Spécifie les parties d'une page Web qui peuvent participer aux mises à jour de pages partielles.

ScriptManager

Gère le rendu de page partielle. Le contrôle ScriptManager enregistre les composants de script à envoyer au navigateur et remplace le rendu de page afin que seules les parties spécifiées de la page soient restituées.

PageRequestManager

Coordonne le rendu de page partielle dans le navigateur. La classe PageRequestManager échange de façon asynchrone des informations avec le serveur et expose des événements et des méthodes pour les scripts clients personnalisés.

Rubriques supplémentaires

Vue d'ensemble du cycle de vie des pages ASP.NET

Voir aussi

Tâches

Introduction au contrôle UpdatePanel

Introduction au contrôle UpdateProgress

Programmation de contrôles UpdateProgress dans un script client

Concepts

Vue d'ensemble du contrôle UpdatePanel