Cancelar peticiones ASP.NET AJAX

Para plantear la cancelación de una llamada asíncrona realizada con ASP.NET AJAX primero tenemos que tener en cuenta como hemos realizado esta petición, para realizar esta acción podemos elegir entre dos opciones diferenciadas.

1. El control UpdatePanel que encapsula las peticiones web de forma asíncrona.
2. Las llamadas a Métodos de Páginas o Servicios web desde el cliente.

1. UpdatePanel

Si hemos elegido la primera opción, cualquier control que realice una petición al servidor será controlada por el ScriptManager y podremos utilizar este mismo control para cancelar la tarea del cliente.

Para poder habilitar la cancelación al cliente usaré una barra de progreso la cual informará al usuario que se esta realizando una tarea y además tendrá un botón para poder cancelar este proceso.

Centrar UpdateProgress en un UpdatePanel ( JQuery )

Lo único que necesitamos es que el botón de la barra de progreso llame a una función javascript, que será la encargada de anular la petición.

[sourcecode language=»javascript»]
function Cancelarproceso() {

var proceso = Sys.WebForms.PageRequestManager.getInstance();
if (proceso.get_isInAsyncPostBack()) {
proceso.abortPostBack();
}
if ($(‘input[type=submit]’).length)
$(‘input[type=submit]’).attr(‘disabled’, false);

$("#progress").hide();
//Para no enviar el evento al servidor.
return false;
}
[/sourcecode]

Este código recupera la instancia del PageRequestManager y si es un postBack asíncrono llama a la función abortPostBack().

2. Métodos de Página

Teniendo en cuenta las penalizaciones al utilizar los UpdatePanels en el rendimiento y que solo podemos tener una llamada asíncrona a la vez, podemos optar por utilizar los métodos de página para realizar múltiples llamadas asíncronas y de una manera mas ligera.

En este ejemplo utilizo una lista para lanzar multiples llamadas al servidor y mostrar una animación para avisar al usuario que el proceso esta en marcha, de la misma manera damos la opción de anular cada llamada con un botón enlazado a cada proceso.

¿Como funciona este el control?

1. El botón actualizar recorre la lista y lanza todos los procesos que estén con el check seleccionado.
2. Creo un Array en Javascript para guardar la instancia del método de página utilizado y poderlo identificar cada una de las llamadas.

   [sourcecode language=»javascript»]
   var p = new Array();

   function lanzarprocesoAsinc(div, n) {
   var par = div + "|" + $("#" + div).attr("cr") +
   "|" + $("#" + div).attr("tran");
   p[n] = PageMethods._staticInstance.LanzarprocesoCRI(par,
   lanzarprocesoCRI_OK, lanzarprocesoCRI_KO, div);
   }
   [/sourcecode]

3. Cuando se presiona el botón de anulación se invoca una función javaScript que localiza la instancia de la petición asíncrona y anula el proceso.  Recuperamos el elemento de ejecución de la instancia y si no está marcada como abortada, la marca. Finalmente oculta la barra de progreso del elemento de la lista.

[sourcecode language=»javascript»]
function AnularProcesoAsinc(n, div) {
var executor = p[n].get_executor();
if (executor.get_started()) {
if (!executor._aborted) {
executor.abort();
$("#" + div).show("slow");
$("#"+ div+ "_W").hide("slow");
}
}
}
[/sourcecode]

Muy Importante !!!

Cuando habilitas la anulación de un proceso asíncrono tienes que tener muy claro que solo se anula la devolución del cliente. Que solo se cierra el socket de cliente del cual se reciben las respuestas. No hay repercusión en el código que se ejecuta en el servidor.

Para hacer que todo el proceso finalice, tienes que tener todo tu modelo previamente estructurado y pensar cual de estos procesos se pueden anular y cuales no. Si quieres profundizar en este sentido tienes el artículo de Dino Esposito donde explica estas situaciones mas detalladamente

Cutting Edge:Cancelación de las tareas de servidor con AJAX de ASP.NET.