UpdateProgress-Steuerelement – Einführung

Artikel
10/22/2014

Aktualisiert: November 2007

In diesem Lernprogramm verwenden Sie UpdateProgress-Steuerelemente, um den Status von Teilaktualisierungen von Seiten anzuzeigen. Wenn eine Seite UpdatePanel-Steuerelemente enthält, können Sie ebenfalls UpdateProgress Steuerelemente einschließen, um Benutzer laufend über den Status von Teilaktualisierungen von Seiten zu informieren. Sie können ein UpdateProgress-Steuerelement verwenden, um den Status von Teilaktualisierungen für die gesamte Seite anzuzeigen. Alternativ können Sie ein UpdateProgress-Steuerelement für jedes UpdatePanel-Steuerelement einschließen. Beide Vorgehensweisen werden in diesem Lernprogramm gezeigt.

Vorbereitungsmaßnahmen

Zur Implementierung dieser Prozeduren in Ihrer eigenen Entwicklungsumgebung ist Folgendes erforderlich:

Microsoft Visual Studio 2005 oder Visual Web Developer Express Edition.
Eine AJAX-fähige ASP.NET-Website.

Verwenden eines einzelnen UpdateProgress-Steuerelements

Verwenden Sie zunächst ein einzelnes UpdateProgress -Steuerelement, um den Status aller Teilaktualisierungen auf der Seite anzuzeigen.

So verwenden Sie ein einzelnes UpdateProgress-Steuerelement für die ganze Seite

Erstellen Sie eine neue Seite, und wechseln Sie in die Entwurfsansicht.
Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf das ScriptManager-Steuerelement, um es der Seite hinzuzufügen.
Doppelklicken Sie auf das UpdatePanel-Steuerelement, um es der Seite hinzuzufügen.
Doppelklicken Sie auf das UpdateProgress-Steuerelement, um es der Seite hinzuzufügen.
Fügen Sie im UpdateProgress-Steuerelement den Text Verarbeitung... hinzu.
Fügen Sie im UpdatePanel-Steuerelement ein Label-Steuerelement und ein Button-Steuerelement hinzu.
Legen Sie die Text-Eigenschaft des Label-Steuerelements auf Startseite gerendert fest.
Doppelklicken Sie auf das Button-Steuerelement, um einen Handler für das Click-Ereignis der Schaltfläche hinzuzufügen.

Fügen Sie dem Click-Handler folgenden Code hinzu, der zunächst eine künstliche Verzögerung von drei Sekunden erzeugt und anschließend die aktuelle Uhrzeit anzeigt.

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();       
}

Hinweis:
In diesem Lernprogramm wird mithilfe des Handlers für das Click-Ereignis absichtlich eine Verzögerung erzeugt. In der Praxis würde keine Verzögerung ausgelöst werden. Eine Verzögerung wäre vielmehr die Folge von zu hohem Datenverkehr auf dem Server oder von Servercode, der eine lange Verarbeitungszeit erfordert (z. B. eine Datenbankabfrage mit einer langen Laufzeit).

Speichern Sie die Änderungen. Drücken Sie anschließend STRG+F5, um die Seite in einem Browser anzuzeigen.

Klicken Sie auf die Schaltfläche.

Nach einer kurzen Verzögerung wird die Statusmeldung angezeigt. Wenn der Handler für das Click-Ereignis beendet ist, wird die Statusmeldung ausgeblendet und die im Bereich angezeigte Zeitangabe aktualisiert.

Das Beispiel ist so angelegt, dass der Bereich der Seite, der das UpdatePanel darstellt, deutlicher angezeigt wird.

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

Verwendung mehrerer UpdateProgress-Steuerelemente

Ein UpdateProgress-Steuerelement auf der Seite kann eine Statusmeldung für alle UpdatePanel-Steuerelemente auf der Seite anzeigen. Asynchrone Postbacks, die aus einem UpdatePanel-Steuerelement stammen, veranlassen das UpdateProgress-Steuerelement, die entsprechende Meldung anzuzeigen. Postbacks von Steuerelementen, die als Trigger für den Bereich dienen, zeigen die Meldung ebenfalls an.

Sie können das UpdateProgress-Steuerelement einem einzelnen UpdatePanel-Steuerelement zuordnen, indem Sie die AssociatedUpdatePanelID-Eigenschaft des Statussteuerelements festlegen. In diesem Fall zeigt das UpdateProgress-Steuerelement nur dann eine Meldung an, wenn ein Postback aus dem zugeordneten UpdatePanel-Steuerelement stammt.

Im nächsten Verfahren werden zwei UpdateProgress-Steuerelemente einer Seite hinzugefügt, von denen jedes einem anderen UpdatePanel-Steuerelement zugeordnet ist.

So verwenden Sie mehrere UpdateProgress-Steuerelemente auf einer Seite

Erstellen Sie eine neue Seite, und wechseln Sie in die Entwurfsansicht.
Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf das ScriptManager-Steuerelement, um es der Seite hinzuzufügen.
Doppelklicken Sie zweimal auf das UpdatePanel-Steuerelement, um der Seite zwei Instanzen des Steuerelements hinzuzufügen.
Fügen Sie in jedem UpdatePanel-Steuerelement ein Label-Steuerelement und ein Button-Steuerelement hinzu.
Legen Sie die Text-Eigenschaft beider Label-Steuerelemente auf Anfangs gerenderter Bereich fest.
Doppelklicken Sie auf jedes Button-Steuerelement, um jeder Schaltfläche einen Handler für das Click-Ereignis hinzuzufügen.

Fügen Sie jedem Click-Handler folgenden Code hinzu, der zunächst eine künstliche Verzögerung von drei Sekunden erzeugt und anschließend die aktuelle Uhrzeit anzeigt.

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();       

}

Wechseln Sie in die Entwurfsansicht.
Klicken Sie in das erste UpdatePanel-Steuerelement, und fügen Sie ein UpdateProgress-Steuerelement hinzu.
Fügen Sie im UpdateProgress-Steuerelement den Text Panel1 wird aktualisiert hinzu.

Hierdurch wird die ProgressTemplate -Eigenschaft festgelegt.
Wählen Sie das UpdateProgress-Steuerelement aus, und legen Sie im Eigenschaftenfenster die AssociatedUpdatePanelID-Eigenschaft auf UpdatePanel1 fest.
Klicken Sie in das zweite UpdatePanel-Steuerelement, und fügen Sie ein zweites UpdateProgress-Steuerelement hinzu.
Legen Sie den Text des UpdateProgress-Steuerelements auf Panel2 wird aktualisiert und seine AssociatedUpdatePanelID-Eigenschaft auf UpdatePanel2 fest.
Speichern Sie die Änderungen. Drücken Sie anschließend STRG+F5, um die Seite in einem Browser anzuzeigen.
Klicken Sie auf die Schaltfläche im ersten Bereich.

Nach einer kurzen Verzögerung wird die dem ersten Bereich zugeordnete Statusmeldung angezeigt. Das andere UpdateProgress-Steuerelement wird nicht angezeigt.

Klicken Sie auf die Schaltfläche im zweiten Bereich.

Die dem zweiten Bereich zugeordnete Statusmeldung wird angezeigt.

Hinweis:
Wird eine neues asynchrones Postback gestartet, während ein früheres ausgeführt wird, wird das erste Postback standardmäßig abgebrochen. Weitere Informationen hierzu finden Sie unter Einem bestimmten asynchronen Postback Vorrang gewähren.

Das Beispiel ist so angelegt, dass der Bereich der Seite, der das UpdatePanel darstellt, deutlicher angezeigt wird.

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

Zusammenfassung

In diesem Lernprogramm wurden zwei Verwendungsmöglichkeiten des UpdateProgress-Steuerelements vorgestellt. Die erste Möglichkeit besteht darin, der Seite ein UpdateProgress-Steuerelement hinzuzufügen, das keinem bestimmten UpdatePanel-Steuerelement zugeordnet ist. In diesem Fall zeigt das Steuerelement eine Statusmeldung für alle UpdatePanel -Steuerelemente an. Die zweite Verwendungsmöglichkeit für eine Statusanzeige besteht darin, mehrere UpdateProgress -Steuerelemente hinzuzufügen und jedes einem anderen UpdatePanel -Steuerelement zuzuordnen.

Siehe auch

UpdateProgress-Steuerelement – Einführung

Vorbereitungsmaßnahmen

Verwenden eines einzelnen UpdateProgress-Steuerelements

So verwenden Sie ein einzelnes UpdateProgress-Steuerelement für die ganze Seite

Verwendung mehrerer UpdateProgress-Steuerelemente

So verwenden Sie mehrere UpdateProgress-Steuerelemente auf einer Seite

Zusammenfassung

Siehe auch

Aufgaben

Konzepte

Referenz

Zusätzliche Ressourcen