Cancelar una devolución de datos asincrónica

Artículo
10/22/2014

Actualización: noviembre 2007

Las devoluciones de datos asincrónicas se implementan en ASP.NET mediante controles de servidor web UpdatePanel NET en la página. El control UpdatePanel elimina el requisito de actualización de la página entera en cada devolución de datos, lo que mejora la experiencia del usuario. En el explorador, la clase Sys.WebForms.PageRequestManager de Microsoft AJAX Library administra los eventos del ciclo de vida de la página de cliente para las devoluciones de datos asincrónicas. Puede personalizar la forma en que se producen las devoluciones de datos asincrónicas mediante la administración de eventos expuestos por la clase PageRequestManager.

En este tutorial usará el evento initializeRequest de la clase PageRequestManager para cancelar la devolución de datos asincrónica actualmente en ejecución.

Para obtener información sobre la secuencia de eventos que se provocan en la clase PageRequestManager, vea Trabajar con eventos de PageRequestManager.

Requisitos previos

Para implementar los procedimientos en su propio entorno de desarrollo, necesitará:

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express.
Un sitio web ASP.NET habilitado para AJAX.

Crear script que cancela devoluciones de datos

Para empezar, creará código ECMAScript (JavaScript) que administra la devolución de datos asincrónica en el explorador.

Para crear código JavaScript que cancele una devolución de datos

En el sitio web ASP.NET, agregue un nuevo archivo JScript y denomínelo CancelPostback.js.

Agregue el siguiente script al archivo:

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

El script realiza las siguientes tareas:

Define un controlador para el evento load de la clase Sys.Application. Este controlador registra a su vez un controlador denominado CheckStatus para el evento initializeRequest de la clase PageRequestManager.
Define el controlador CheckStatus para comprobar si se está ejecutando una devolución de datos asincrónica actualmente, y para determinar el nombre del elemento que produjo la devolución de datos.
Define una función ActivateAlertDiv que alterna la visibilidad de un elemento <div> que se usa para mostrar mensajes.

Usar el script con un control UpdatePanel

En este procedimiento usará el script que creó en una página que contiene un control UpdatePanel. El script cancela la devolución de datos si el usuario hace clic en un vínculo mientras tiene lugar la devolución de datos asincrónica.

Para crear una página donde los usuarios pueden cancelar una devolución de datos

Cree una nueva página web ASP.NET de un solo archivo denominada Default.aspx y cambie a la vista Diseño.
En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página.
En el cuadro de herramientas, haga doble clic en el control UpdatePanel para agregarlo a la página.

Cambie a la vista Código fuente y agregue las siguientes reglas de estilo al bloque <style> del elemento <head> de la 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>

Las reglas de estilo definen el alto y el ancho del elemento <div> que se representa mediante el control UpdatePanel. Las reglas también definen el aspecto del elemento <div> anidado que muestra un mensaje de progreso.

Agregue el siguiente marcado dentro del elemento <ContentTemplate> del 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>

El marcado realiza las tareas siguientes:

Define un control DataList cuyos elementos se enlazan a un campo Value, que se definirá más adelante en este procedimiento como un objeto SortedList.
Define un control Button que provoca una devolución de datos asincrónica.
Define un elemento <div> que se usará para mostrar un mensaje durante una devolución de datos asincrónica. El elemento <div> también contiene un control LinkButton que permite cancelar la devolución de datos.

En el elemento <script >, agregue el siguiente código de servidor como controlador de eventos Click, para el botón Actualizar del control 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();
}

El código usa el enlace de datos para leer y mostrar una lista de titulares en el control DataList.

Nota:
El controlador del evento Click aplica de forma intencionada un retraso a este tutorial. En la práctica, no debería incluir un retraso. Si se produce un retraso en este caso, será como resultado del tráfico del servidor o debido a que el código de servidor tarda mucho en tiempo en procesarse, como ocurre con las consultas de base de datos de ejecución prolongada.

En el elemento <script>, agregue el código siguiente para el evento Load de la 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();
    }
}
```
El código comprueba si la solicitud actual es una devolución de datos. Si la solicitud no es una devolución de datos, el control DataList se enlaza a una lista de titulares. (Durante las devoluciones de datos asincrónicas, el enlace de datos se produce en el método NewClick_Handler que creó en el paso anterior.)

En el elemento <script>, agregue el código siguiente para generar titulares:

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

Los titulares de este tutorial se crean como una lista estática. En una aplicación real se generarían dinámicamente.

Cambie a la vista Diseño y asegúrese de que la página se parece a la figura siguiente.
Seleccione el control ScriptManager.
En la ventana Propiedades, seleccione la propiedad Scripts y haga clic en el botón de puntos suspensivos (…) para mostrar el cuadro de diálogo Editor de la colección ScriptReference.
Haga clic en Agregar para agregar una referencia de script.
Establezca la propiedad Path de la referencia de script en CancelPostback.js, el archivo JavaScript creado previamente.

Al agregar una referencia de script con la colección Scripts de ScriptManager se asegura de que se carga el script después de que se cargue Microsoft AJAX Library.
Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de la colección ScriptReference.
Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.
Haga clic en el botón Actualizar y espere a que se actualice el panel.

Aparece un mensaje con una opción para cancelar la devolución de datos.
Haga clic de nuevo en el botón Actualizar y, después de que aparezca el mensaje, vuelva a hacer clic en el botón Actualizar; espere hasta que se actualice el panel.

El texto del mensaje cambia para indicar que la actualización anterior todavía está en curso. Se omite la segunda actualización.

Haga clic de nuevo en el botón Actualizar y, cuando aparezca el mensaje, haga clic en el vínculo Cancelar para cancelar la devolución de datos.

Esta vez, la hora que se muestra en el control UpdatePanel no cambia, porque se canceló la devolución de datos asincrónica.

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

Revisión

Este tutorial muestra cómo escribir código JavaScript que cancela una devolución de datos asincrónica. El script proporciona un controlador para el evento initializeRequest de la clase PageRequestManager. En el evento initializeRequest, puede determinar qué elemento produjo la devolución de datos y si una devolución de datos ya se está produciendo. De esta forma puede tomar las medidas apropiadas. En el tutorial, el código muestra un elemento <div> que contiene un botón de cancelación.

Para mostrar el estado del control UpdatePanel automáticamente, puede usar el control UpdateProgress. Para obtener más información, vea Introducción al control UpdateProgress.

Vea también

Share via

Cancelar una devolución de datos asincrónica

Requisitos previos

Crear script que cancela devoluciones de datos

Para crear código JavaScript que cancele una devolución de datos

Usar el script con un control UpdatePanel

Para crear una página donde los usuarios pueden cancelar una devolución de datos

Revisión

Vea también

Tareas

Conceptos

Referencia

Recursos adicionales