Freigeben über

Abbrechen eines asynchronen Postbacks

  • Artikel

Aktualisiert: November 2007

Asynchrone Postbacks werden in ASP.NET unter Verwendung von UpdatePanel-.NET-Webserversteuerelementen auf der Seite implementiert. Aufgrund des UpdatePanel-Steuerelements ist es nicht mehr erforderlich, bei jedem Postback die gesamte Seite zu aktualisieren. Dadurch wird die Benutzerfreundlichkeit verbessert. Im Browser verwaltet die Sys.WebForms.PageRequestManager-Klasse in der Microsoft AJAX Library Ereignisse im Lebenszyklus von Clientseiten für asynchrone Postbacks. Sie können asynchrone Postbacks anpassen, indem Sie Ereignisse behandeln, die von der PageRequestManager-Klasse verfügbar gemacht werden.

In diesem Lernprogramm verwenden Sie das initializeRequest-Ereignis der PageRequestManager-Klasse, um das aktuell ausgeführte asynchrone Postback abzubrechen.

Informationen zur Reihenfolge von Ereignissen, die in der PageRequestManager-Klasse ausgelöst werden, finden Sie unter Arbeiten mit PageRequestManager-Ereignissen.

Vorbereitungsmaßnahmen

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

  • Microsoft Visual Studio 2005 oder Microsoft Visual Web Developer Express Edition.

  • Eine AJAX-fähige ASP.NET-Website.

Erstellen eines Skripts, das Postbacks abbricht

Beginnen Sie mit dem Erstellen von ECMAScript-Code (JavaScript), mit dem das asynchrone Postback im Browser verwaltet wird.

So erstellen Sie JavaScript-Code, um ein Postback abzubrechen

  1. Fügen Sie in der ASP.NET-Website eine neue JScript-Datei hinzu, und nennen Sie sie CancelPostback.js.

  2. Fügen Sie dieser Datei das folgende Skript hinzu:

    var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';

Sys.Application.add_load(ApplicationLoadHandler)
function ApplicationLoadHandler(sender, args)
{
     Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckStatus);
}
function CheckStatus(sender, args)
{
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'CancelRefresh') {
     prm.abortPostBack();
  }
  else if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'RefreshButton') {
     args.set_cancel(true);
     ActivateAlertDiv('visible', 'Still working on previous request.');
 }
  else if (!prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'RefreshButton') {
     ActivateAlertDiv('visible', 'Retrieving headlines.');
  }
}
function ActivateAlertDiv(visString, msg)
{
     var adiv = $get(divElem);
     var aspan = $get(messageElem);
     adiv.style.visibility = visString;
     aspan.innerHTML = msg;
}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';

Sys.Application.add_load(ApplicationLoadHandler)
function ApplicationLoadHandler(sender, args)
{
     Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckStatus);
}
function CheckStatus(sender, args)
{
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'CancelRefresh') {
     prm.abortPostBack();
  }
  else if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'RefreshButton') {
     args.set_cancel(true);
     ActivateAlertDiv('visible', 'Still working on previous request.');
 }
  else if (!prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'RefreshButton') {
     ActivateAlertDiv('visible', 'Retrieving headlines.');
  }
}
function ActivateAlertDiv(visString, msg)
{
     var adiv = $get(divElem);
     var aspan = $get(messageElem);
     adiv.style.visibility = visString;
     aspan.innerHTML = msg;
}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    Mit diesem Skript werden die folgenden Aufgaben ausgeführt:

    • Definieren eines Handlers für das load-Ereignis der Sys.Application-Klasse. Dieser Handler wiederum registriert einen Handler mit dem Namen CheckStatus für das initializeRequest-Ereignis der PageRequestManager-Klasse.

    • Definieren des CheckStatus-Handlers, um zu überprüfen, ob derzeit ein asynchrones Postback ausgeführt wird. Wenn dies der Fall ist, wird der Name des Elements ermittelt, von dem das Postback ausgelöst wurde.

    • Definieren einer ActivateAlertDiv-Funktion, mit der die Sichtbarkeit eines <div>-Elements gesteuert wird, das zum Anzeigen von Meldungen dient.

Verwenden des Skripts mit einem UpdatePanel-Steuerelement

In diesem Verfahren verwenden Sie das erstellte Skript auf einer Seite, die ein UpdatePanel-Steuerelement enthält. Das Skript bricht das Postback ab, wenn der Benutzer während des asynchronen Postbacks auf einen Link klickt.

So erstellen Sie eine Seite, auf der die Benutzer ein Postback abbrechen können

  1. Erstellen Sie eine neue ASP.NET-Webseite mit einer einzelnen Datei mit dem Namen Default.aspx, und wechseln Sie in die Entwurfsansicht.

  2. Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf das ScriptManager-Steuerelement, um es der Seite hinzuzufügen.

  3. Doppelklicken Sie in der Toolbox auf das UpdatePanel-Steuerelement, um es der Seite hinzuzufügen.

  4. Wechseln Sie in die Quellansicht, und fügen Sie einem <style>-Block im <head>-Element der Seite die folgenden Stilregeln hinzu:

        <style type="text/css">
    body {
        font-family: Tahoma;
    }
    #UpdatePanel1{
       width: 400px;
       height: 200px;
       border: solid 1px gray;
    }
    div.AlertStyle {
      font-size: smaller;
      background-color: #FFC080;
      width: 400px;
      height: 20px;
      visibility: hidden;
    }
    </style>

        <style type="text/css">
    body {
        font-family: Tahoma;
    }
    #UpdatePanel1{
       width: 400px;
       height: 200px;
       border: solid 1px gray;
    }
    div.AlertStyle {
      font-size: smaller;
      background-color: #FFC080;
      width: 400px;
      height: 20px;
      visibility: hidden;
    }
    </style>

    Die Stilregeln definieren die Höhe und die Breite des <div>-Elements, das vom UpdatePanel-Steuerelement dargestellt wird. Die Regeln definieren außerdem die Darstellung des geschachtelten <div>-Elements, das eine Statusmeldung anzeigt.

  5. Fügen Sie im <ContentTemplate>-Element des <asp:UpdatePanel>-Elements das folgende Markup hinzu:

    <asp:DataList ID="HeadlineList" >
    <HeaderTemplate>
    <strong>Headlines</strong>
    </HeaderTemplate>
    <ItemTemplate>
         <%# Eval("Value") %>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
    <FooterStyle HorizontalAlign="right" />
</asp:DataList>
<p style="text-align:right">
<asp:Button ID="RefreshButton" 
            Text="Refresh" 

            OnClick="NewsClick_Handler" />
</p>
<div id="AlertDiv" class="AlertStyle">
<span id="AlertMessage"></span> 
&nbsp;&nbsp;&nbsp;&nbsp;
<asp:LinkButton ID="CancelRefresh" >
Cancel</asp:LinkButton>                      

    <asp:DataList ID="HeadlineList" >
    <HeaderTemplate>
    <strong>Headlines</strong>
    </HeaderTemplate>
    <ItemTemplate>
         <%# Eval("Value") %>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
    <FooterStyle HorizontalAlign="right" />
</asp:DataList>
<p style="text-align:right">
<asp:Button ID="RefreshButton" 
            Text="Refresh" 

            OnClick="NewsClick_Handler" />
</p>
<div id="AlertDiv" class="AlertStyle">
<span id="AlertMessage"></span> 
&nbsp;&nbsp;&nbsp;&nbsp;
<asp:LinkButton ID="CancelRefresh" >
Cancel</asp:LinkButton>

    Mit dem Markup werden die folgenden Aufgaben ausgeführt:

    • Es wird ein DataList-Steuerelement definiert, dessen Elemente an ein Value-Feld gebunden sind, das später in diesem Verfahren als SortedList-Objekt definiert wird.

    • Es wird ein Button-Steuerelement definiert, das ein asynchrones Postback bewirkt.

    • Es wird ein <div>-Element definiert, das während eines asynchronen Postbacks zum Anzeigen einer Meldung verwendet wird. Das <div>-Element enthält außerdem ein LinkButton-Steuerelement, das das Abbrechen des Postbacks ermöglicht.

  6. Fügen Sie im <script >-Element den folgenden Servercode als Click-Ereignishandler hinzu, der für die Schaltfläche Aktualisieren im UpdatePanel-Steuerelement vorgesehen ist.

    Protected Sub NewsClick_Handler(ByVal sender As Object, ByVal e As EventArgs)
    System.Threading.Thread.Sleep(2000)
    HeadlineList.DataSource = GetHeadlines()
    HeadlineList.DataBind()        
End Sub

    protected void NewsClick_Handler(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(2000);
    HeadlineList.DataSource = GetHeadlines();
    HeadlineList.DataBind();
}

    Die Datenbindung im Code dient dazu, eine Liste von Überschriften im DataList-Steuerelement zu lesen und anzuzeigen.

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

  7. Fügen Sie innerhalb des <script>-Elements den folgenden Code für das Load-Ereignis der Seite hinzu:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If Not (IsPostBack) Then
        HeadlineList.DataSource = GetHeadlines()
        HeadlineList.DataBind()
    End If
End Sub

    protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        HeadlineList.DataSource = GetHeadlines();
        HeadlineList.DataBind();
    }
}

    Der Code überprüft, ob es sich bei der aktuellen Anforderung um ein Postback handelt. Ist dies nicht der Fall, wird das DataList-Steuerelement an eine Liste von Überschriften gebunden. (Während asynchroner Postbacks erfolgt die Datenbindung in der NewClick_Handler-Methode, die Sie im vorherigen Schritt erstellt haben.)

  8. Fügen Sie innerhalb des <script>-Elements den folgenden Code hinzu, um Überschriften zu generieren:

    ' Helper method to simulate news headline fetch.
Private Function GetHeadlines() As SortedList
    Dim headlines As New SortedList()
    headlines.Add(1, "This is headline 1.")
    headlines.Add(2, "This is headline 2.")
    headlines.Add(3, "This is headline 3.")
    headlines.Add(4, "This is headline 4.")
    headlines.Add(5, "This is headline 5.")
    headlines.Add(6, "(Last updated on " & DateTime.Now.ToString() & ")")
    Return headlines
End Function

    // Helper method to simulate news headline fetch.
private SortedList GetHeadlines()
{
    SortedList headlines = new SortedList();
    headlines.Add(1, "This is headline 1.");
    headlines.Add(2, "This is headline 2.");
    headlines.Add(3, "This is headline 3.");
    headlines.Add(4, "This is headline 4.");
    headlines.Add(5, "This is headline 5.");
    headlines.Add(6, "(Last updated on " + DateTime.Now.ToString() + ")");
    return headlines;
}

    Die Überschriften in diesem Lernprogramm werden als statische Liste erstellt. In einer realen Anwendung würden sie dynamisch generiert.

  9. Wechseln Sie in die Entwurfsansicht, und vergewissern Sie sich, dass die Seite der folgenden Abbildung entspricht.

  10. Wählen Sie das ScriptManager-Steuerelement aus.

  11. Wählen Sie im Fenster Eigenschaften die Scripts-Eigenschaft aus, und klicken Sie auf die Auslassungszeichen (…), um das Dialogfeld ScriptReference-Auflistungs-Editor zu öffnen.

  12. Klicken Sie auf Hinzufügen, um einen Skriptverweis hinzuzufügen.

  13. Legen Sie die Path-Eigenschaft des Skriptverweises auf die zuvor erstellte JavaScript-Datei CancelPostback.js fest.

    Durch das Hinzufügen eines Skriptverweises mithilfe der Scripts-Auflistung von ScriptManager wird sichergestellt, dass das Skript geladen wird, nachdem die Microsoft AJAX Library geladen wurde.

  14. Klicken Sie zum Schließen des Dialogfelds ScriptReference-Auflistungs-Editor auf OK.

  15. Speichern Sie die Änderungen, und drücken Sie STRG+F5, um die Seite in einem Browser anzuzeigen.

  16. Klicken Sie auf die Schaltfläche Aktualisieren, und warten Sie, bis der Bereich aktualisiert wird.

    Es wird eine Meldung mit einer Option zum Abbrechen des Postbacks angezeigt.

  17. Klicken Sie nochmals auf die Schaltfläche Aktualisieren. Klicken Sie nach der Anzeige der Meldung erneut auf die Schaltfläche Aktualisieren, und warten Sie, bis der Bereich aktualisiert wird.

    In der Meldung wird Ihnen nun mitgeteilt, dass die vorherige Aktualisierung noch nicht abgeschlossen ist. Die zweite Aktualisierung wird somit ignoriert.

  18. Klicken Sie nochmals auf die Schaltfläche Aktualisieren, und wenn die Meldung angezeigt wird, klicken Sie auf den Link Abbrechen, um das Postback abzubrechen.

    Dieses Mal ändert sich die im UpdatePanel-Steuerelement angezeigte Uhrzeit nicht, da das asynchrone Postback abgebrochen wurde.

    <%@ Page Language="VB" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    Protected Sub NewsClick_Handler(ByVal sender As Object, ByVal e As EventArgs)
        System.Threading.Thread.Sleep(2000)
        HeadlineList.DataSource = GetHeadlines()
        HeadlineList.DataBind()        
    End Sub
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not (IsPostBack) Then
            HeadlineList.DataSource = GetHeadlines()
            HeadlineList.DataBind()
        End If
    End Sub
    ' Helper method to simulate news headline fetch.
    Private Function GetHeadlines() As SortedList
        Dim headlines As New SortedList()
        headlines.Add(1, "This is headline 1.")
        headlines.Add(2, "This is headline 2.")
        headlines.Add(3, "This is headline 3.")
        headlines.Add(4, "This is headline 4.")
        headlines.Add(5, "This is headline 5.")
        headlines.Add(6, "(Last updated on " & DateTime.Now.ToString() & ")")
        Return headlines
    End Function
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Canceling Postback Example</title>
    <style type="text/css">
    body {
        font-family: Tahoma;
    }
    #UpdatePanel1{
       width: 400px;
       height: 200px;
       border: solid 1px gray;
    }
    div.AlertStyle {
      font-size: smaller;
      background-color: #FFC080;
      width: 400px;
      height: 20px;
      visibility: hidden;
    }
    </style>
</head>
<body>
    <form id="form1" >
        <div >
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="CancelPostback.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel  ID="UpdatePanel1" runat="Server" >
            <ContentTemplate>
                <asp:DataList ID="HeadlineList" >
                    <HeaderTemplate>
                    <strong>Headlines</strong>
                    </HeaderTemplate>
                    <ItemTemplate>
                         <%# Eval("Value") %>
                    </ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                    <FooterStyle HorizontalAlign="right" />
                </asp:DataList>
                <p style="text-align:right">
                <asp:Button ID="RefreshButton" 
                            Text="Refresh" 

                            OnClick="NewsClick_Handler" />
                </p>
                <div id="AlertDiv" class="AlertStyle">
                <span id="AlertMessage"></span> 
                &nbsp;&nbsp;&nbsp;&nbsp;
                <asp:LinkButton ID="CancelRefresh" >
                Cancel</asp:LinkButton>                      
            </ContentTemplate>
        </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    protected void NewsClick_Handler(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
        HeadlineList.DataSource = GetHeadlines();
        HeadlineList.DataBind();
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            HeadlineList.DataSource = GetHeadlines();
            HeadlineList.DataBind();
        }
    }
    // Helper method to simulate news headline fetch.
    private SortedList GetHeadlines()
    {
        SortedList headlines = new SortedList();
        headlines.Add(1, "This is headline 1.");
        headlines.Add(2, "This is headline 2.");
        headlines.Add(3, "This is headline 3.");
        headlines.Add(4, "This is headline 4.");
        headlines.Add(5, "This is headline 5.");
        headlines.Add(6, "(Last updated on " + DateTime.Now.ToString() + ")");
        return headlines;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Canceling Postback Example</title>
    <style type="text/css">
    body {
        font-family: Tahoma;
    }
    #UpdatePanel1{
       width: 400px;
       height: 200px;
       border: solid 1px gray;
    }
    div.AlertStyle {
      font-size: smaller;
      background-color: #FFC080;
      width: 400px;
      height: 20px;
      visibility: hidden;
    }
    </style>
</head>
<body>
    <form id="form1" >
        <div >
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="CancelPostback.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel  ID="UpdatePanel1" runat="Server" >
            <ContentTemplate>
                <asp:DataList ID="HeadlineList" >
                    <HeaderTemplate>
                    <strong>Headlines</strong>
                    </HeaderTemplate>
                    <ItemTemplate>
                         <%# Eval("Value") %>
                    </ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                    <FooterStyle HorizontalAlign="right" />
                </asp:DataList>
                <p style="text-align:right">
                <asp:Button ID="RefreshButton" 
                            Text="Refresh" 

                            OnClick="NewsClick_Handler" />
                </p>
                <div id="AlertDiv" class="AlertStyle">
                <span id="AlertMessage"></span> 
                &nbsp;&nbsp;&nbsp;&nbsp;
                <asp:LinkButton ID="CancelRefresh" >
                Cancel</asp:LinkButton>                      
            </ContentTemplate>
        </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

Zusammenfassung

Dieses Lernprogramm zeigt das Erstellen von JavaScript-Code, mit dem ein asynchrones Postback abgebrochen wird. Das Skript stellt einen Handler für das initializeRequest-Ereignis der PageRequestManager-Klasse bereit. Im initializeRequest-Ereignis können Sie feststellen, durch welches Element das Postback verursacht wurde und ob bereits ein Postback ausgeführt wird. Sie können dann die entsprechende Aktion ausführen. Im Lernprogramm wird mit dem Code ein <div>-Element angezeigt, das eine Schaltfläche zum Abbrechen enthält.

Wenn der Status des UpdatePanel-Steuerelements automatisch angezeigt werden soll, können Sie das UpdateProgress-Steuerelement verwenden. Weitere Informationen finden Sie unter UpdateProgress-Steuerelement – Einführung.

Siehe auch

Aufgaben

Programmieren von UpdateProgress-Steuerelementen in Clientskript

Konzepte

Arbeiten mit PageRequestManager-Ereignissen

Referenz

Sys.WebForms.PageRequestManager-Klasse

Sys.WebForms.PageRequestManager initializeRequest-Ereignis