Übersicht über das UpdateProgress-Steuerelement

  • Artikel

Aktualisiert: November 2007

Das UpdateProgress-Steuerelement stellt Statusinformationen über Teilaktualisierungen von Seiten in UpdatePanel-Steuerelementen bereit. Sie können den Standardinhalt und das Layout des UpdateProgress-Steuerelements anpassen. Um ein Aufblitzen des Steuerelements bei sehr schnellen Teilaktualisierungen von Seiten zu verhindern, können Sie eine Verzögerung vor dem Anzeigen des UpdateProgress-Steuerelements festlegen.

Dieses Thema enthält Informationen über:

  • Szenarien

  • Hintergrund

  • Codebeispiele

  • Klassenreferenz

Szenarien

Mithilfe des UpdateProgress-Steuerelements können Sie die Benutzeroberfläche intuitiver gestalten, wenn eine Webseite eines oder mehrere UpdatePanel-Steuerelemente für das Teilrendering von Seiten enthält. Erfolgt die Teilaktualisierung von Seiten langsam, können Sie mit dem UpdateProgress-Steuerelement ein visuelles Feedback zum Status der Aktualisierung geben. Sie können auf einer Seite mehrere UpdateProgress-Steuerelemente platzieren, die jeweils einem anderen UpdatePanel-Steuerelement zugeordnet sind. Sie können jedoch auch ein einzelnes UpdateProgress-Steuerelement allen UpdatePanel-Steuerelementen auf der Seite zuordnen.

Hintergrund

Das UpdateProgress-Steuerelement rendert ein <div>-Element, das ein- oder ausgeblendet wird. Dies hängt davon ab, ob durch ein zugeordnetes UpdatePanel-Steuerelement ein asynchrones Postback verursacht wurde. Beim ersten Seitenrendering und bei synchronen Postbacks wird das UpdateProgress-Steuerelement nicht angezeigt.

Zuordnen eines UpdateProgress-Steuerelements zu einem UpdatePanel-Steuerelement

Ein UpdateProgress-Steuerelement wird einem UpdatePanel-Steuerelement zugeordnet, indem die AssociatedUpdatePanelID-Eigenschaft des UpdateProgress-Steuerelements festgelegt wird. Wenn ein Postbackereignis aus einem UpdatePanel-Steuerelement stammt, werden alle zugeordneten UpdateProgress-Steuerelemente angezeigt. Wenn Sie das UpdateProgress-Steuerelement keinem bestimmten UpdatePanel-Steuerelement zuordnen, zeigt das UpdateProgress-Steuerelement den Status aller asynchronen Postbacks an.

Wenn die ChildrenAsTriggers-Eigenschaft eines UpdatePanel-Steuerelements auf false festgelegt ist und ein asynchrones Postback aus diesem UpdatePanel-Steuerelement stammt, werden alle zugeordneten UpdateProgress-Steuerelemente angezeigt.

Erstellen von Inhalt für das UpdateProgress-Steuerelement

Verwenden Sie die ProgressTemplate-Eigenschaft, um die von einem UpdateProgress-Steuerelement angezeigte Meldung deklarativ anzugeben. Das <ProgressTemplate>-Element kann HTML und Markup enthalten. Das folgende Beispiel zeigt, wie eine Meldung für ein UpdateProgress-Steuerelement angegeben wird.

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

Im folgenden Beispiel wird ein UpdateProgress-Steuerelement dargestellt, das den Aktualisierungsstatus für zwei UpdatePanel-Steuerelemente anzeigt.

<%@ 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>

Das folgende Beispiel zeigt zwei UpdateProgress-Steuerelemente. Jedes Steuerelement zeigt den Aktualisierungsstatus für ein zugeordnetes UpdatePanel-Steuerelement an.

<%@ 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>

Im folgenden Beispiel wird dargestellt, wie dem <ProgressTemplate>-Element eine Schaltfläche hinzugefügt wird, auf die der Benutzer klicken kann, um das asynchrone Postback abzubrechen. Alle neuen Postbacks, die während eines anderen Postbacks ausgeführt werden, werden abgebrochen.

<%@ 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>

Im vorherigen Beispiel ruft das onClick-Attribut eines HtmlButton-Steuerelements im <ProgressTemplate>-Element die AbortPostBack-JavaScript-Funktion auf. Weitere Informationen finden Sie unter der abortPostBack-Methode und der isInAsyncPostBack-Eigenschaft der PageRequestManager-Klasse.

Angeben des Inhaltslayouts

Wenn die DynamicLayout-Eigenschaft den Wert true hat, nimmt das UpdateProgress-Steuerelement anfänglich keinen Platz in der Seitenanzeige ein. Stattdessen wird die Seite dynamisch so geändert, dass der Inhalt des UpdateProgress-Steuerelements angezeigt wird, wenn er benötigt wird. Zur Unterstützung der dynamischen Anzeige wird das Steuerelement als <div>-Element gerendert, dessen display-Stileigenschaft anfänglich auf none festgelegt ist.

Wenn die DynamicLayout-Eigenschaft den Wert false hat, nimmt das UpdateProgress-Steuerelement Platz in der Seitenanzeige ein, auch wenn es nicht sichtbar ist. In diesem Fall wird für das <div>-Element des Steuerelements die display-Stileigenschaft auf block und visibility zunächst auf hidden festgelegt.

Platzieren von UpdateProgress-Steuerelementen auf der Seite

Sie können UpdateProgress-Steuerelemente innerhalb oder außerhalb von UpdatePanel-Steuerelementen platzieren. Ein UpdateProgress-Steuerelement wird angezeigt, wenn das UpdatePanel-Steuerelement, dem es zugeordnet ist, durch ein asynchrones Postback aktualisiert wird. Dies gilt auch dann, wenn das UpdateProgress-Steuerelement sich innerhalb eines anderen UpdatePanel-Steuerelements befindet.

Wenn sich ein UpdatePanel-Steuerelement innerhalb eines anderen UpdatePanel befindet, führt ein Postback, das aus dem untergeordneten Bereich stammt, dazu, dass alle dem untergeordneten Bereich zugeordneten UpdateProgress-Steuerelemente angezeigt werden. Außerdem werden alle dem übergeordneten Bereich zugeordneten UpdateProgress-Steuerelemente angezeigt. Wenn ein Postback aus einem direkt untergeordneten Steuerelement des übergeordneten Bereichs stammt, werden nur die UpdateProgress-Steuerelemente angezeigt, die dem übergeordneten Bereich zugeordnet sind. Dies entspricht der Logik beim Auslösen von Postbacks.

Festlegen der Anzeige von UpdateProgress-Steuerelementen

Sie können programmgesteuert bestimmen, wann ein UpdateProgress-Steuerelement angezeigt wird, indem Sie die JavaScript-Ereignisse beginRequest und endRequest der PageRequestManager-Klasse verwenden. Zeigen Sie im beginRequest-Ereignishandler das DOM-Element an, das das UpdateProgress-Steuerelement darstellt. Blenden Sie das Element im endRequest-Ereignishandler aus.

In folgenden Fällen müssen Sie ein Clientskript bereitstellen, um ein UpdateProgress-Steuerelement ein- und auszublenden:

  • Während eines Postbacks von einem Steuerelement, das als asynchroner Postbacktrigger für das UpdatePanel registriert wird, dem das UpdateProgress-Steuerelement jedoch nicht zugeordnet ist.

  • Während Postbacks von Steuerelementen, die mit der RegisterAsyncPostBackControl-Methode des ScriptManager-Steuerelements programmgesteuert als asynchrone Postback-Steuerelemente registriert werden. In diesem Fall kann das UpdateProgress-Steuerelement nicht automatisch feststellen, ob ein asynchrones Postback ausgelöst wurde.

Codebeispiele

Die folgenden Abschnitte enthalten Codebeispiele zum Erstellen und Verwenden von [T:System.Web.UI.]UpdateProgress-Steuerelementen.

Lernprogramme

Klassenreferenz

In der folgenden Tabelle sind die wichtigsten Klassen für die Arbeit mit der [T:System.Web.UI.]UpdateProgress-Klasse aufgelistet.

Klasse

Beschreibung

UpdateProgress

Stellt visuelles Feedback im Browser bereit, wenn der Inhalt von UpdatePanel-Steuerelementen aktualisiert wird.

UpdatePanel

Gibt Teile einer Webseite an, die an Teilaktualisierungen von Seiten teilnehmen können.

ScriptManager

Verwaltet das Teilrendering von Seiten. Das ScriptManager-Steuerelement registriert Skriptkomponenten, die an den Browser gesendet werden sollen, und überschreibt das Seitenrendering, sodass nur bestimmte Bereiche der Seite gerendert werden.

PageRequestManager

Koordiniert das Teilrendering von Seiten im Browser. Die PageRequestManager-Klasse tauscht Informationen mit dem Server asynchron aus und macht Ereignisse sowie Methoden für benutzerdefinierte Clientskripts verfügbar.

Weitere Themen

Übersicht über den Lebenszyklus von ASP.NET-Seiten

Siehe auch

Aufgaben

UpdatePanel-Steuerelement – Einführung

UpdateProgress-Steuerelement – Einführung

Programmieren von UpdateProgress-Steuerelementen in Clientskript

Konzepte

Übersicht über das UpdatePanel-Steuerelement