Programmieren von UpdateProgress-Steuerelementen in Clientskript

Artikel
10/22/2014

Aktualisiert: November 2007

In diesem Lernprogramm erweitern Sie das UpdateProgress-Steuerelement um Clientverhalten, indem Sie ECMAScript (JavaScript)-Code schreiben. Im Code wird die PageRequestManager-Klasse verwendet, die in der Microsoft AJAX Library enthalten ist. Im UpdateProgress-Steuerelement fügen Sie eine Schaltfläche hinzu, die es Benutzern ermöglicht, ein asynchrones Postback abzubrechen. Im Rahmen dieser Aufgabe wird die Statusmeldung mithilfe eines Clientskripts ein- oder ausgeblendet.

In diesem Thema wird davon ausgegangen, dass Sie mit dem UpdateProgress-Steuerelement vertraut sind. Andernfalls wiederholen Sie das Thema UpdateProgress-Steuerelement – Einführung.

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.

So brechen Sie ein asynchrones Postback im Clientskript ab

Erstellen Sie eine neue ASP.NET-Webseite, und wechseln Sie in die Entwurfsansicht.
Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf die Steuerelemente ScriptManager, UpdatePanel und UpdateProgress, um der Seite eine Instanz von jedem dieser Steuerelemente hinzuzufügen.
Fügen Sie aus der Registerkarte Standard der Toolbox ein Label-Steuerelement zum UpdatePanel-Steuerelement hinzu, und legen Sie die Text-Eigenschaft der Bezeichnung auf Bereich gerendert fest.
Fügen Sie ein Button-Steuerelement zum UpdatePanel-Steuerelement hinzu, und legen Sie dessen Text-Eigenschaft auf Aktualisieren fest.
Fügen Sie im UpdateProgress-Steuerelement den Text Verarbeitung läuft... ein.
Fügen Sie aus der Registerkarte HTML der Toolbox ein HtmlButton-Steuerelement zum UpdateProgress-Steuerelement hinzu, und legen Sie dessen Value-Attribut auf Abbrechen fest.
Doppelklicken Sie auf die Schaltfläche Aktualisieren, um einen Ereignishandler für deren Click-Ereignis hinzuzufügen.

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

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = 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).

Fügen Sie unter dem <asp:ScriptManager>-Element das folgende Skript hinzu:

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

Das Skript ruft die aktuelle Instanz der PageRequestManager-Klasse ab. Danach erstellt es eine Funktion, die die abortPostBack-Methode aufruft, um ein asynchrones Postback abzubrechen.

Legen Sie das onclick-Attribut des HtmlButton-Steuerelements auf CancelAsyncPostBack fest, den Namen des im vorherigen Schritts erstellten Handlers.

<input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

<input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

Fügen Sie dem <head>-Element den folgenden Style-Block hinzu:

<style type="text/css">    
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

<style type="text/css">
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

Mit den Stileinstellungen wird das UpdateProgress-Steuerelement so konfiguriert, dass es unten links im Browserfenster angezeigt wird.

Speichern Sie die Änderungen. Drücken Sie dann STRG+F5, um die Seite in einem Browser anzuzeigen.
Klicken Sie auf Aktualisieren.

Die Statusmeldung wird nach einer kurzen Verzögerung angezeigt. Warten Sie, bis die Teilaktualisierung von Seiten beendet ist, damit sich die Meldung im UpdatePanel-Steuerelement ändert und die Zeit angezeigt wird.

Hinweis:

Die Zeit für die Verzögerung konfigurieren Sie, indem Sie die DisplayAfter-Eigenschaft festlegen. Der Standardwert beträgt 500 Millisekunden.

Hinweis:
Die Zeit für die Verzögerung konfigurieren Sie, indem Sie die DisplayAfter-Eigenschaft festlegen. Der Standardwert beträgt 500 Millisekunden.

Klicken Sie erneut auf Aktualisieren, und klicken Sie danach sofort auf Abbrechen, um die Teilaktualisierung von Seiten zu beenden.

Sie sehen, dass die Zeit im UpdatePanel nicht aktualisiert 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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">    
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button2"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

Anzeigen des Aktualisierungsfortschritts mithilfe eines Clientskripts

In den folgenden Szenarien wird das UpdateProgress-Steuerelement nicht automatisch angezeigt:

Das UpdateProgress-Steuerelement ist einem bestimmten UpdatePanel zugeordnet, das asynchrone Postback stammt jedoch von einem Steuerelement, das sich nicht innerhalb dieses UpdatePanel befindet.
Das UpdateProgress-Steuerelement ist keinem UpdatePanel-Steuerelement zugeordnet. Das asynchrone Postback stammt nicht von einem Steuerelement, das sich nicht innerhalb eines UpdatePanel befindet und kein Trigger ist. Die Aktualisierung wird z. B. im Code ausgeführt.

Im folgenden Verfahren wird dargestellt, wie ein UpdateProgress-Steuerelement angezeigt wird, wenn das asynchrone Postback nicht aus dem zugeordneten UpdatePanel-Steuerelement stammt. Bei diesem Verfahren wird davon ausgegangen, dass Sie den ersten Teil dieses Lernprogramms abgeschlossen haben.

So zeigen Sie ein UpdateProgress-Steuerelement programmgesteuert an

Wechseln Sie in der zuvor erstellten Seite in die Entwurfsansicht.
Wählen Sie das UpdateProgress-Steuerelement aus, und legen Sie im Fenster Eigenschaften die AssociatedUpdatePanelID-Eigenschaft auf UpdatePanel1 fest.
Fügen Sie ein Button-Steuerelement außerhalb der Steuerelemente UpdatePanel und UpdateProgress hinzu.
Legen Sie die Text-Eigenschaft der Schaltfläche auf Trigger und deren ID auf Panel1Trigger fest.
Wählen Sie das UpdatePanel-Steuerelement aus, und klicken Sie im Fenster Eigenschaften auf die Auslassungszeichen (…) im Feld für die Triggers-Eigenschaft.

Das Dialogfeld UpdatePanelTrigger-Auflistungs-Editor wird angezeigt.
Erstellen Sie ein AsyncPostBackTrigger-Objekt, und legen Sie dessen ControlID-Eigenschaft auf Panel1Trigger fest.
Klicken Sie auf OK, um den Auflistungs-Editor zu schließen.
Doppelklicken Sie auf die Schaltfläche Trigger, um einen Ereignishandler für deren Click-Ereignis hinzuzufügen.

Fügen Sie dem Click-Handler den folgenden Code hinzu, der künstlich eine Verzögerung von drei Sekunden erzeugt. Anschließend wird die Serverzeit und eine Meldung angezeigt, die besagt, dass das Postback durch einen Trigger verursacht wurde.

Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString() & " - trigger"
End Sub

protected void Panel1Trigger_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString() + " - trigger";
}

Fügen Sie in der Quellansicht das folgende Clientskript unter dem bereits auf der Seite vorhandenen <script>-Block hinzu.

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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

Das Skript führt folgende Schritte aus:

Es definiert einen Handler für das initializeRequest-Ereignis der PageRequestManager-Klasse. Der Handlercode bricht alle asynchronen Postbacks ab, die bereits ausgeführt werden. Wenn das Postback dagegen aus dem Panel1Trigger<div>-Element stammt, zeigt der Code die UpdateProgress-Vorlage an.
Es definiert einen Handler für das endRequest-Ereignis der PageRequestManager-Klasse. Wenn das Postback aus dem Panel1Trigger<div>-Element stammt, blendet der Handlercode das Statussteuerelement aus.

Das folgende Beispiel zeigt den gesamten Skriptblock.

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

Speichern Sie die Änderungen. Drücken Sie anschließend STRG+F5, um die Seite in einem Browser anzuzeigen.
Klicken Sie auf die Schaltfläche Aktualisieren.

Die Statusmeldung wird nach einer kurzen Verzögerung angezeigt. Warten Sie, bis die Teilaktualisierung von Seiten beendet ist, damit die Meldung im UpdatePanel-Steuerelement die Zeit anzeigt.

Klicken Sie auf die Schaltfläche Trigger.

Beachten Sie, dass die Statusmeldung 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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
    Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString() & " - trigger"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        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 == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Panel1Trigger_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString() + " - trigger";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        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 == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>

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

Zusammenfassung

In diesem Lernprogramm haben Sie erfahren, wie Sie das Verhalten des UpdateProgress-Steuerelements durch JavaScript-Code erweitern können. Sie können Ereignisse und Methoden der PageRequestManager-Klasse verwenden, um ein asynchrones Postback abzubrechen und ein UpdateProgress-Steuerelement programmgesteuert ein- bzw. auszublenden.

Programmieren von UpdateProgress-Steuerelementen in Clientskript

Vorbereitungsmaßnahmen

So brechen Sie ein asynchrones Postback im Clientskript ab

Anzeigen des Aktualisierungsfortschritts mithilfe eines Clientskripts

So zeigen Sie ein UpdateProgress-Steuerelement programmgesteuert an

Zusammenfassung

Siehe auch

Konzepte

Referenz

Zusätzliche Ressourcen