AJAX en ASP.NET 2.0 con Script CallBacks

23. October 2009 22:14 by Oscar.SS in Desarrollo Web  //  Tags:   //   Comments (2)

Con la llegada de ASP.NET 2.0 se puso a nuestra disposición otra técnica para realizar llamadas en segundo plano desde el cliente. Esta técnica es denominada Script CallBacks. La ventaja más notable de esta forma de implementar AJAX es que nos evita tener que escribir tanto código cliente. En concreto, nos evita tener que escribir todo el código JavaScript para crear, configurar y enviar los datos al servidor con XMLHTTPRequest, tal y como vimos en el post anterior. Naturalmente si tendremos que utilizar código cliente para manipular los datos una vez devueltos por el servidor.

Comencemos recordando la interfaz de usuario que teníamos en el ejemplo anterior.

  

 

Código Servidor

Antes de nada, debemos saber que la técnica de Script CallBacks se apoya en la interfaz ICallbackEventHandler. Por lo tanto debemos implementar esta interfaz en la página que recibe la llamada asíncrona. Más tarde veremos cuales son los métodos de esta interfaz.

Ya hemos comentado antes que no necesitamos escribir todo el JavaScript a mano para enviar los datos asíncronamente al servidor. Pero entoces...¿como enviamos los datos?. En realidad, desde el cliente si llamaremos e inviaremos los datos al servidor pero todo esto lo configuraremos desde el propio servidor. Veamos como.

         this.listaNombres.Attributes["onchange"ObtenerFuncionCliente();

En primer lugar, asignamos al evento onchange de la lista de nombres una cadena que será devuelta por la función ObtenerFuncionCliente(). Esta cadena contiene el nombre de una función JavaScript proporcionada por ASP.NET. Esta función cliente será la encargada de realizar la llamada asíncrona y de enviar los datos al servidor. La función toma la forma siguiente:

 

WebForm_DoCallback("Control", "DatosEnviados", "FuncionRecogerDatos", "idLlamada", "FuncionRecogerErrores", "Asíncrono")

 

  • Control (string). Nombre del control que implementa la interfaz ICallbackEventHandler.
  • DatosEnviados (string). Cadena con los datos enviados desde el cliente al servidor.
  • FuncionRecogerDatos (string). Nombre de la función cliente que será la encargada de recoger y manipular debidamente los datos recibidos desde el servidor.
  • idLlamada (string). Parámetro opcional, un identificador único de esta llamada. Sirve para diferenciarla de otras llamadas en contextos de llamadas múltiples. Puede ser null.
  • FuncionRecogerErrores (string). Nombre de la función cliente encargada de recoger y manipular los errores producidos.
  • Asíncrono (bool). Determina si la llamada será realizada de forma asíncrona o no.
Pero como ya hemos comentado, esta función de JavaScript y todos sus parámetros serán configurados con código servidor.
  
    private string ObtenerFuncionCliente()
    {
        
//Obtener los parámetros de la función cliente.
        
var control = this;

        string 
datoRecibido = string.Format("document.getElementById('{0}').value"this.listaNombres.ClientID);
        
        string 
FuncionCliente "RecogerRespuestaCallBack";

        string 
idLlamada "null";

        string 
FuncionClienteError "MostrarError";

        bool 
llamadaAsincrona = true;

        
//Configurar la función cliente con los parámetros anteriores.
        
string funcionConfigurada Page.ClientScript.GetCallbackEventReference(
            control, datoRecibido, FuncionCliente, idLlamada, FuncionClienteError, llamadaAsincrona)
;

        
//Devolvemos la instrución JavaScript con el nombre de la función que realiza la llamada.
        
return string.Format("javascript:{0}", funcionConfigurada);
    
}

El método GetCallbackEventReferecen() devuelve una referencia a la función cliente WebForm_DoCallback() que hemos comentado antes. Entendamos lo que hemos hecho hasta ahora.

En la primera petición a nuestra página, esta devolverá entre todo el código HTML un fragmento de JavaScript con la función WebForm_DoCallback() y todos sus parámetros. Esta función sera la encargada de enviar los datos al servidor cuando se produzca el evento onchange.

 

La interfaz ICallbackEventHandler implementa únicamente dos métodos: 

  • RaiseCallbackEnvent(). Esta función será llamada automaticamente cuando se reciba una llamada en segundo plano desde el cliente.
  • GetCallbackResult(). Devuelve una cadena con los datos y llama automaticamente a la función JavaScript encargada de recoger los datos en el cliente.

    public void RaiseCallbackEvent(string datosCliente)
    {
        datoRecibido 
datosCliente;
    
}

    
public string GetCallbackResult()
    {
        
string rutaDatos Server.MapPath("~/App_Data/datos.xml");

        
//Antes de enviar la petición simulamos una tarea larga.
        
System.Threading.Thread.Sleep(5000);

        return 
ManejarDatos.ObtenerRespuesta(datoRecibido, rutaDatos);
    
}

Código Ciente
Poco queda por decir. Ahora solo tendremos que implementar las dos funciones Java Script que especificamos al configurar los parámetros del método GetCallbackEventReferecen(). Una función para recoger y mostrar los datos al usuario y otra para el control de los posibles errores que se produzcan.
//Funcion que es llamada automaticamente para procesar la respuesta del servidor.
function RecogerRespuestaCallBack(xmlReturn, idLlamada) {
    
try {
       
//CargarXmlString() parsea una cadena en un documento XML.
        
var datosReturn CargarXmlString(xmlReturn).getElementsByTagName("categoria");
        
var resp document.getElementById("txRespuesta");
        
resp.innerText datosReturn[0].childNodes[0].nodeValue;
    
}
    
catch (ex) {
        MostrarError(ex)
;
    
}

}


//Funcion llamada automaticamente cuando se produce un error.
function MostrarError(ex) {
    alert(
"Error: " + ex);
}

 

Código de descarga 

El código completo mencionado en este artículo se encuentra en la carpeta AJAX_NET_2.0 del siquiente enlace. Para probar la aplicación ejecutar la página AJAX_ScriptCallBacks.aspx de la carpeta mencionada.

AJAX_ASP.NET.rar (15,45 kb)

Comments (2) -

chrystianalan@hotmail.com
chrystianalan@hotmail.com
8/5/2010 6:20:25 AM #

Al ejecutar el WebForm_DoCallback de la siguiente manera:

WebForm_DoCallback('__Page', '23114', ReceiveServerData, null, ReceiveErrorServerData, true);    

Me marca el error, *****Microsoft JScript runtime error: Object expected*****

Puedes ayudarme??????

Oscar.SS
Oscar.SS
8/5/2010 9:30:59 AM #

Chystian ese error puede dar por muchas razones. Por ejemplo, porque no encuentra el método al que está llamando. Asegúrate de que los nombres de las funciones ReceiveServerData y ReceiveErrorServerData son correctos, o que los archivos JavaScript estén bien incluidos o enlazados en la página.

De todas formás podrías dar un poco más de información para ver que es lo que te sucede. Es decir, ¿estás generando la llamada a la función WebForm_DoCallback() a pelo desde el propio Script o la están llamando desde el código servidor como en el ejemplo de este post?.

Recent Comments

Comment RSS

Month List