AJAX en ASP.NET 2.0 con Page Methods

12. December 2009 11:56 by Oscar.SS in Desarrollo Web  //  Tags:   //   Comments (0)

En el artículo anterior de esta serie vimos la potencia y facilitdad que nos ofrece un control UpdatePanel combinado con un ScriptManager. Pero no es oro todo lo que reluce. ¿Que sucede si tenemos una página con muchos controles pero solo queremos actualizar por AJAX uno de ellos?.

Tenemos que tener en cuenta que cuando utilizamos un UpdatePanel estamos enviando al servidor todo el HTML de la página. Es decir, no solo estamos enviando el contenido del UpdatePanel, enviamos también todos los controles que encuentran fuera. Y esto aumenta mucho el tráfico hacia el servidor. Además, en el servidor se disparan todos los eventos del ciclo de vida de la página y de todos los controles que contenga. Lo que recarga las funciones realizadas por el servidor.

Eso si, el servidor gracias al UpdatePanel y a las librerías cliente que nos ofrece el ScriptManager, solo envía el HTML necesario para actualizar los controles que se encuentren dentro del UpdatePanel.

Estas consideraciones debemos tenerlas en cuenta si estamos implementado AJAX en una página muy pesada con mucho controles. La implementación de los métodos de página o Page Methods nos ofrece la posibilidad de tener más control sobre la forma de actualizar la página a cambio de perder un poco de automatización.

 

 

 

Código Cliente

Lo primero que tenemos que hacer es habilitar la funcionalidad de los métodos de página en el control ScriptManager por medio de la propiedad EnablePageMethods.

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        
<Scripts>
            
<asp:ScriptReference Path="funcionesPageMethods.js" />
        </
Scripts>
    
</asp:ScriptManager> 

Por otro lado, hemos añadido una referencia al archivo JavaScript que contendrá las funciones necesarias para el envío y recogida de datos de forma asíncrona. Este es el código.

//Funcion que llama al método de la página de forma asíncrona.
function EnviarDatos() {

    
//$get('') == document.getElementById('')
    
var nombreSeleccionado $get("listaNombres").value;
    
    
//Llamada al metodo de la página.
    
PageMethods.ObtenerDatos(nombreSeleccionado, RecogerRespuesta, RecogerErrores);
}


//Funcion que recoge los datos desde el servidor.
function RecogerRespuesta(datosRecibidos)
{
    $
get("txRespuesta").innerText datosRecibidos;
}


//Función que recoge los posibles errores.
function RecogerErrores(error) {

    
alert("Error: " + error.get_message());
}

Ya estamos acostumbrados a este tipo de implementación, una función para enviar los datos asíncronos, otra para recogerlos y una función para recoger los errores que se produzcan durante la llamada. Lo único que merece la pena resaltar es esta linea.

 PageMethods.ObtenerDatos(nombreSeleccionado, RecogerRespuesta, RecogerErrores);

 

La clase PageMethods intrínseca de la librería ASP.NET AJAX nos permite llamar a la función ObetenerDatos() que es un método estático que se encuentra en nuestra página.

 

Código Servidor

En el código de servidor solo tendremos que implementar el método que se encarga de recoger los datos desde el cliente y enviarlos asíncronamente una vez manipulados de vuelta al cliente. 

    [System.Web.Services.WebMethod]
    
public static string ObtenerDatos(string nombreSelec)
    {
        
//Antes de enviar la petición simulamos una tarea larga.
        
System.Threading.Thread.Sleep(5000);
        
        return 
ManejarDatos.ObtenerCategoria(nombreSelec, rutaDatos);
    
}

Como vemos este método tiene que ser static y estar decorado con el atributo System.Web.Services.WebMethod.

 

Código de descarga 

El código completo mencionado en este artículo se encuentra en la carpeta AJAX_NET_3.5/Retro_Llamdas/AJAX_PageMethods del siquiente enlace. Para probar la aplicación ejecutar la página AJAX_PageMethods.aspx de la carpeta mencionada.

 

AJAX_ASP.NET.rar (15,45 kb)

Recent Comments

Comment RSS

Month List