ASP.NET AJAX Async Page_Load

Ya es por todos sobradamente conocido los grandes beneficios que nos aporta ASP.NET AJAX a nuestras aplicaciones web. Pero no solo de Postbacks vive el hombre, que pasa si yo no solo quiero recargar partes de mi página web en un postback, sino cargar la primera vez las partes de la página asincronamente?

Pues de eso precisamente pretendo hablar hoy, imaginaros la típica web con diferentes apartados y que es muy posible que más de un apartado hagan que nuestra página tarde mucho en cargar, siempre tendremos la posibilidad de mostrar una barra de progreso en nuestra web, pero porque no utilizar la potencia de ASP.NET Ajax para cargar independientemente cada parte y que el resto de nuestra página se cargue con normalidad.

Para demostrar esto he creado una página web dividida en dos partes:

1. Nuestro ScritManager para que nuestra aplicación ASP.NET AJAX funcione.
2. Un UpdatePanel con un DataList en su interior que será nuestra parte asincrona.
3. Una Label y un botón que actualizará nuestro updataPanel de la forma clásica.

El funcionamiento del ejemplo es muy simple, la página carga el texto de la label y el botón. Al mismo tiempo carga los datos de la lista asincronamente mostrando una progressbar.

No he querido complicar demasiado el ejemplo y recuperaremos los datos desde el cliente mediante los Pagemethods.

1. Activamos los PageMethods: <asp ScriptManager ID =»ScriptManager1″ runat=»server» EnablePageMethods=»True»>
2. Creamos un método público y estático y utilizamos el atributo WebMethod para que sea accesible desde el cliente como si fuera un webservice. Luego le definimos que los datos se tienen que serializar de forma compatible con Json con ResponseFormat./div>
3. Para simular mejor esta situación he añadido un sleep Threading que retrasa la carga 10 segundos.

[WebMethod()]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
static public List<string> CagarDatosAsinc()
{
    System.Threading.Thread.Sleep(10000);
    var datos = new List<string>();

    for (int x = 0; x < 4; x++)
      datos.Add("Dato - " + x);

    return datos;
}

Para hacer posible la idea tenemos que utilizar código en el cliente que se encargue de cargar la lista asincronamente y no influya en el resto de la página.

onload = function actualizar() {
   $get('progres').setyle.display = "inline";
   PageMethods.CargarDatosAsinc(atalizarOK, actualizarFail);
}

function actualizarOK(result) {
   var updatePanel = $get('UpdatePanel1');
   updatePanel.innerHTML = '<table id="DataList1_ct100_Image2"
     cellspacing="0" border="0" style="border-collapse:collapse;">';

   for (var i = 0; i < result.length; i++) {
     updatePanel.innerHTML += '<tr><td>';
     updatePanel.innerHTML += '<img id="DataList1_ct100_Image2"
        src="user1_information.gif" />';

    updatePanel.innerHTML += '<span id="DataList1_ct100_Ñabel13">' +
        result[i] + '</span></br>';
    updatePanel.innerHTML += '</td></tr>';
   }

   updatePanel.innerHTML += '</table';
   updatePanel.innerHTML += '</br>Datos Cargados
      Asincronamente al abrir el documento.';

}

function actualizarFail(error) {
   $get('Label1').innerHTML = "Intentelo más tarde.";
}

• La primera función Actualizar es la encargada de llamar a nuestro método del servidor y enlazarla con el evento load de la página para que nuestra idea surja efecto y se cargue la lista la primera vez.
• La función actualizarOK es la encargada de pintar los datos si todo ha ido correcto.
• La función actualizarFAIL es la encargada de tratar los posibles errores.

El ejemplo funcionando.

El texto de la página y el botón se han cargado perfectamente mientras que la lista se está cargando…

Una vez finalizada la carga se muestran los datos correctamente. Y si forzamos un postback con el botón y actualizamos el updatepanel ya no se lanzará nuestro código de precarga.

Bueno espero que esta propuesta os haya parecido interesante, os dejo el proyecto para que podáis jugar con el y espero que lo podáis utilizar en vuestros proyectos ;-).

Happy Coding