Cancelando um Postback Assíncrono

Artigo
10/15/2014

Assíncronas postagens são implementadas no ASP.NET usando net UpdatePanel servidor Web controles na página.O controle UpdatePanel remove a necessidade de atualizar a página inteira com cada postback, o que melhora a experiência do usuário.No navegador, a classe Sys.WebForms.PageRequestManager no Microsoft AJAX Library gerencia eventos no ciclo de vida da página do cliente para postagens assíncronas.Você pode personalizar como postagens assíncronas ocorrem ao manipular eventos expostos pela classe PageRequestManager.

Neste tutorial, você irá usar o evento initializeRequest da classe PageRequestManager para cancelar a execução atual do postback assíncrono.

Para obter informações sobre a sequência de eventos gerado na classe PageRequestManager, consulte Trabalhando com eventos PageRequestManager.

Pré-requisitos

Para implementar os procedimentos no seu próprio ambiente de desenvolvimento você precisa:

Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express Edition.
Um site da Web ASP.NET habilitado para AJAX.

Criando Script que Cancela Postbacks

Você iniciará criando Código ECMAScript (JavaScript) que gerencia o postback assíncrono no navegador.

Para criar código de JavaScript para cancelar um postback

No site da Web ASP.NET, adicione um novo arquivo JScript e denomine-CancelPostback.js.

Adicione o seguinte script ao arquivo:

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

O script executa as seguintes tarefas:

Defines a handler for the load event of the Sys.Application class.Esse manipulador por sua vez registra um manipulador chamado CheckStatus para o evento initializeRequest da classe PageRequestManager.
Define o manipulador CheckStatus para verificar se um postback assíncrono está em execução e para determinar o nome do elemento que causou o postback.
Define uma função ActivateAlertDiv que alterne a visibilidade de um elemento <div> que é usado para exibir mensagens.

Usando o Script com um Controle UpdatePanel

Neste procedimento, você irá usar o script que é criado em uma página que contenha um controle UpdatePanel.O script cancela o postback se o usuário clica em um link enquanto o postback assíncrono está em andamento.

Para criar uma página onde os usuários podem cancelar um postback

Crie uma nova página da Web ASP.NET de arquivo único denominada Default.aspx e alterne para o modo Design.
Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.
Na caixa de ferramentas, clique duas vezes no controle UpdatePanel para adicioná-lo à página da Web.

Alterne para o modo de exibição Source e adicione as seguintes regras de estilo a um bloco <style> no elemento <head> da página:

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

As regras de estilo definem a altura e largura do elemento <div> que é processado pelo controle UpdatePanel.As regras também definem a aparência do elemento aninhado <div> que exibe uma mensagem de progresso.

Adicione a seguinte marcação dentro do elemento <ContentTemplate> do 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>

A marcação executa as seguintes tarefas:

Define um DataList controle cujos itens são vinculados a um Value campo, que será definido mais adiante nesse procedimento como um objeto SortedList.
Define um controle Button que causa um postback assíncrono.
Define um elemento <div> que será usado para exibir uma mensagem durante um postback assíncrono.O elemento <div> também contém um controle LinkButton que permite o postback ser cancelado.

In the <script > element, add the following server code as the Click event handler, which is for the Refresh button in the UpdatePanel control.

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

O código usa associação de dados para ler e exibir uma lista de títulos no controle DataList.

Observação:
O manipulador para o evento Click introduz intencionalmente um atraso para este tutorial.Na prática, você poderia não introduzir um atraso.Em vez disso, o atraso deve ser o resultado do tráfego do servidor ou do código que demora para processar, como uma consulta ao banco de dados de execução demorada .

Dentro do elemento <script>, adicione o seguinte código para o evento Load da página:

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

O código verifica se a solicitação atual é um postback.Se a solicitação não for um postback, o DataList controle é acoplado a uma lista de títulos.(Durante postbacks assíncronas, a associação de dados ocorre no método NewClick_Handler que você criou na etapa anterior.)

Dentro do elemento <script>, adicione o código para gerar títulos a seguir:

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

Os títulos este tutorial são criados como uma lista estática.Em um aplicativo real, elas poderiam ser geradas dinamicamente.

Alterne para modo de design e certifique-se que a página semelhante a figura a seguir.
Selecione o controle ScriptManager.
Na janela Propriedades, selecione a propriedade Scripts e clique no botão reticências (…) para exibir a caixa de diálogo ScriptReference Collection Editor.
Clique em Adicionar para adicionar uma referência de script.
Defina a propriedade Path da referência de script para CancelPostback.js, que é o arquivo de JavaScript que você criou anteriormente.

Adicionando uma referência de script usando a coleção Scripts do ScriptManager, certifique-se que o script é carregado depois que o Microsoft AJAX Library foi carregado.
Clique em OK para fechar a caixa de diálogo Editor de Coleção ScriptReference.
Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.
Clique no botão Refresh e espere o painel atualizar.

Uma mensagem é exibida com uma opção para cancelar o postback.
Clique no botão R efresh novamente e depois a mensagem for exibida, clique no botão Refresh novamente e espere o painel para atualizar.

O texto de mensagem muda para indicar que a atualização anterior ainda está em andamento.A segunda atualização será ignorada.

Clique no botão Refresh novamente e, quando a mensagem for exibida, clique no link Cancel para cancelar o postback.

Desta vez, o tempo exibido no controle UpdatePanel não é alterado, porque a postback assíncrono foi cancelado.

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

Revisão

Este tutorial mostra como escrever código JavaScript que cancela um postback assíncrono.O script fornece um manipulador para o evento initializeRequest da classe PageRequestManager.No evento initializeRequest, você pode determinar qual elemento causou o postback e se um postback já está em andamento.Você pode depois executar a ação apropriada.No tutorial, o código exibe um elemento <div> que contém um botão cancelar.

Para exibir o status do controle UpdatePanel automaticamente, você pode usar o controle UpdateProgress.Para obter mais informações, consulte Introdução ao Controle UpdateProgress.

Consulte também

Compartilhar via

Cancelando um Postback Assíncrono

Pré-requisitos

Criando Script que Cancela Postbacks

Para criar código de JavaScript para cancelar um postback

Usando o Script com um Controle UpdatePanel

Para criar uma página onde os usuários podem cancelar um postback

Revisão

Consulte também

Tarefas

Conceitos

Referência

Recursos adicionais