Annullamento di un postback asincrono

Articolo
10/22/2014

Aggiornamento: novembre 2007

I postback asincroni sono implementati in ASP.NET utilizzando i controlli UpdatePanel .NET del server Web nella pagina. Il controllo UpdatePanel rimuove il requisito di aggiornamento dell'intera pagina con ogni postback migliorando l'esperienza utente. Nel browser, la classe Sys.WebForms.PageRequestManager della Microsoft AJAX Library gestisce gli eventi del ciclo di vita della pagina client per i postback asincroni. È possibile personalizzare come si verificano i postback asincroni gestendo gli eventi esposti dalla classe PageRequestManager.

In questa esercitazione si utilizzerà l'evento initializeRequest della classe PageRequestManager per annullare il postback asincrono in esecuzione.

Per informazioni sulla sequenza di eventi generati nella classe PageRequestManager, vedere Utilizzo di eventi PageRequestManager.

Prerequisiti

Per implementare le procedure nell'ambiente di sviluppo in uso è necessario:

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express Edition.
Un sito Web ASP.NET con supporto AJAX.

Creazione di uno script che annulla i postback

Inizialmente verrà creato il codice ECMAScript (JavaScript) che gestisce il postback asincrono nel browser.

Per creare codice JavaScript per annullare un postback

Nel sito Web ASP.NET, aggiungere un nuovo file JScript e denominarlo CancelPostback.js.

Aggiungere al file il seguente script:

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

Lo script esegue le seguenti attività:

Definizione di un gestore per l'evento load della classe Sys.Application. Questo gestore registra a sua volta un gestore denominato CheckStatus per l'evento initializeRequest della classe PageRequestManager.
Definizione del gestore CheckStatus per controllare se è in esecuzione un postback asincrono e determinare il nome dell'elemento che provoca il postback.
Definizione di una funzione ActivateAlertDiv che attiva e disattiva la visibilità dell'elemento <div> utilizzato per visualizzare messaggi.

Utilizzo dello script con un controllo UpdatePanel

In questa procedura si utilizzerà lo script creato in una pagina che contiene un controllo UpdatePanel. Lo script annulla il postback se l'utente fa clic su un collegamento mentre il postback asincrono è in preparazione.

Per creare una pagina in cui gli utenti possono annullare un postback

Creare una nuova pagina Web ASP.NET con file singolo denominata Default.aspx e passare alla visualizzazione Progettazione.
Nella scheda Estensioni AJAX della casella degli strumenti fare doppio clic sul controllo ScriptManager per aggiungerlo alla pagina.
Fare doppio clic sul controllo UpdatePanel nella casella degli strumenti per aggiungerlo alla pagina.

Passare alla visualizzazione Origine e aggiungere le regole di stile seguenti a un blocco <style> dell'elemento <head> della pagina:

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

Le regole di stile definiscono l'altezza e la larghezza dell'elemento <div> di cui il controllo UpdatePanel esegue il rendering. Le regole definiscono inoltre l'aspetto dell'elemento <div> nidificato che visualizza un messaggio di stato.

Aggiungere il markup seguente nell'elemento <ContentTemplate> dell'elemento <asp:UpdatePanel>:

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

Il markup esegue le attività indicate di seguito:

Definizione di un controllo DataList i cui elementi sono associati a un campo Value che sarà definito più avanti in questa procedura come oggetto SortedList.
Definizione di un controllo Button che provoca un postback asincrono.
Definizione di un elemento <div> che sarà utilizzato per visualizzare un messaggio durante un postback asincrono. L'elemento <div> contiene anche un controllo LinkButton che consente l'annullamento del postback.

Nell'elemento <script > aggiungere il codice server seguente come gestore per l'evento Click, che si riferisce al pulsante Aggiorna nel controllo UpdatePanel.

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

Il codice utilizza l'associazione dati per leggere e visualizzare un elenco di articoli nel controllo DataList.

Nota:
Il gestore per l'evento Click introduce intenzionalmente un ritardo per questa esercitazione. In pratica, non verrebbe introdotto un ritardo. Il ritardo sarebbe invece il risultato del traffico del server o di codice server che richiede lunghi tempi di elaborazione, ad esempio una query di database di lunga durata.

Aggiungere il codice seguente nell'elemento <script> per l'evento Load della pagina:

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

Il codice controlla se la richiesta corrente è un postback. Se la richiesta HTTP non è un postback, il controllo DataList viene associato a un elenco di articoli. (Durante i postback asincroni l'associazione dati si verifica nel metodo NewClick_Handler creato nel passaggio precedente.)

Aggiungere il codice seguente nell'elemento <script> per generare gli articoli:

' 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;
}

Gli articoli di questa esercitazione sono creati come elenco statico. In un'applicazione reale sarebbero generati dinamicamente.

Passare alla visualizzazione Progettazione e verificare che la pagina sia simile alla seguente figura:
Selezionare il controllo ScriptManager.
Nella finestra Proprietà selezionare la proprietà Scripts e fare clic sul pulsante con i puntini di sospensione (…) per visualizzare la finestra di dialogo Editor dell'insieme ScriptReference.
Fare clic su Aggiungi per aggiungere un riferimento allo script.
Impostare la proprietà Path del riferimento allo script su CancelPostback.js, ovvero il file JavaScript creato precedentemente.

Aggiungendo un riferimento allo script tramite l'insieme Scripts di ScriptManager si garantisce che lo script venga caricato dopo il caricamento della Microsoft AJAX Library.
Scegliere OK per chiudere la finestra di dialogo Editor dell'insieme ScriptReference.
Salvare le modifiche e premere CTRL+F5 per visualizzare la pagina in un browser.
Fare clic sul pulsante Aggiorna e attendere l'aggiornamento del pannello.

Verrà visualizzato un messaggio con un'opzione per annullare il postback.
Fare nuovamente clic sul pulsante Aggiorna e, dopo la visualizzazione del messaggio, fare ancora clic sul pulsante Aggiorna e attendere l'aggiornamento del pannello.

Il testo del messaggio cambierà per indicare che l'aggiornamento precedente è ancora in corso. Il secondo aggiornamento viene ignorato.

Fare nuovamente clic sul pulsante Aggiorna e, quando verrà visualizzato il messaggio, fare clic sul collegamento Annulla per annullare il postback.

Questa volta, l'ora visualizzata nel controllo UpdatePanel non cambia, perché il postback asincrono è stato annullato.

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

Verifica

In questa esercitazione viene illustrato come scrivere codice JavaScript che annulla un postback asincrono. Lo script fornisce un gestore per l'evento initializeRequest della classe PageRequestManager. Nell'evento initializeRequest è possibile determinare quale elemento ha provocato il postback e se è in preparazione un postback. È quindi possibile eseguire l'azione appropriata. Nell'esercitazione il codice visualizza un elemento <div> che contiene un pulsante di annullamento.

Per visualizzare automaticamente lo stato del controllo UpdatePanel, è possibile utilizzare il controllo UpdateProgress. Per ulteriori informazioni, vedere Introduzione al controllo UpdateProgress.

Vedere anche

Condividi tramite

Annullamento di un postback asincrono

Prerequisiti

Creazione di uno script che annulla i postback

Per creare codice JavaScript per annullare un postback

Utilizzo dello script con un controllo UpdatePanel

Per creare una pagina in cui gli utenti possono annullare un postback

Verifica

Vedere anche

Attività

Concetti

Riferimenti

Risorse aggiuntive