AJAX en ASP.NET 2.0 con Web Services

10. January 2010 15:08 by Oscar.SS in Desarrollo Web  //  Tags:   //   Comments (2)

Para terminar con esta serie ( IIIIIIIV y ahora V) de las posibilidades que nos ofrece ASP.NET y AJAX, vamos a ver como realizar una llamada asíncrona al servidor a través de un servicio web.

Conceptualmente no se diferencia en nada de otras versiones de ASP.NET. Configurando convenientemente el servicio web podremos llamar a este desde un script de cliente y todo de forma asíncrona. Con ASP.NET 2.0, como siempre, nos ayudará en esta tarea el control ScriptManager.

 

 
 
 
Código Cliente
 
En primer lugar debemos registrar por medio del ScriptManager el servicio web y también como ya es costumbre el script donde se encuentra el código que realiza la llamada.
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        
<Services>
            
<asp:ServiceReference Path="ServicioWeb.asmx" />
        </
Services>
        
<Scripts>
            
<asp:ScriptReference Path="funcionesWebService.js" />
        </
Scripts>
    
</asp:ScriptManager>

En el archivo funcionesWebService.js como ya hemos comentado se encuentra el código que envía los datos al servidor y también los recoge y manipula. A estas alturas este código, con tres funciones, una para enviar datos, otra para recogelos y la última en caso de error durante el proceso asíncrono, es de sobra conocido por todos.

//Funcion que llama al servicio web de forma asíncrona.
function EnviarDatos() {

    
//$get('') == document.getElementById('')
    
var nombreSeleccionado $get("listaNombres").value;

    
//Llamada al servicio web.
    
ServicioWeb.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());
}

 

Código Servidor

En el archivo de código de nuestro servicio web debemos implementar el método que recibirá la petición del cliente y después de hacer las operaciones oportunas devolverá los datos al script de cliente.

[System.Web.Script.Services.ScriptService]
public class ServicioWeb : System.Web.Services.WebService 
{

    
public ServicioWeb () 
    {}


    [WebMethod]
    
public string ObtenerDatos(string nombreSelect) {

        
string ruta Server.MapPath("~/App_Data/datos.xml");

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

        return 
ManejarDatos.ObtenerCategoria(nombreSelect, ruta);
    
}
    
}

Como vemos hemos decorado la clase del servicio web con el atributo System.Web.Script.Services.ScriptService, de esta forma indicamos que la clase contiene servicios que serán utilizados mediante script de cliente. También hemos, al igual que con los Page Methods, decorado el método que recibe la llamada AJAX con el atributo System.Web.Services.WebMethod para indicar que se pretende exponer este métedo como parte del servicio web.

 

Código de descarga 

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

 

AJAX_ASP.NET.rar (15,45 kb)

Comments (2) -

Oscar Gómez
Oscar Gómez
11/3/2011 3:21:09 PM #

parce muchas gracias por este aporte, anduve buscando esto por todos lados, ya los otros metodos que explicaste en post anteriores los habia probado, y se me hacian muy complicados de utilizar, pero este ultimo con el WebService configurado para trabajarlo desde el cliente me parece la mejor opción.

Suerte!

Oscar.SS
Oscar.SS
11/3/2011 3:51:47 PM #

Celebro que el articulo te sirva de ayuda.

Un saludo y gracias a ti por comentar.

Recent Comments

Comment RSS

Month List