4.03.2010

Invocando un Servicio Web desde JavaScript en ASP.NET

En una de las tareas que normalmente uno tiene que llevar a cabo, me encontré con la necesidad de invocar un servicio Web –asmx – desde javascript en mi página cliente. Los detalles del porque tenía que llevar a cabo esta tarea de esta forma son irrelevantes para el propósito del post, sin embargo me parece que la solución del problema puede serle útil a muchos de ustedes.

En primera instancia, vamos a crear un servicio web muy simple y le vamos a llamar WebServiceObtenerValor.asmx. Este servicio web simplemente recibe un string, lo concatena con el string de respuesta y se retorna la respuesta. Por supuesto, aquí pudimos haber ido a traer datos a una base de datos, a leer un archivo de configuración, cargar una imagen, etc. El código del servicio se ve a continuación.

using System.Web.Services;

[WebService(Namespace = "http://www.formsevolution.net")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebServiceObtenerValor : WebService {
[WebMethod]
public string ObtenerValor( string parametro) {
return "Obteniendo el Valor solicitado:" + parametro;
}
}


Un punto importante a destacar es el uso del atributo [System.Web.Script.Services.ScriptService] el cual nos permite que este servicio sea invocado desde el script manager de Ajax.NET de manera asincrona.



El siguiente paso es configurar el script manager del lado del cliente en la página aspx. Para esto, vamos a agregar una referencia al servicio desde el ScriptManager utilizando el ServiceReference presente dentro del ScriptManager.



<asp:ScriptManagerID="ScriptManager1"runat="server">

    <
Services>        <asp:ServiceReferencePath="~/WebServiceObtenerValor.asmx" />

    </
Services>

</
asp:ScriptManager>




El último paso es crear los métodos en java script para procesar el llamado, inicialmente vamos a agregar dos controles de tipo HTML – un textbox y un botón – y los vamos a utilizar para hacer el llamado. El evento click del botón va a tener el llamado al web service, y vamos a utilizar el DOM para obtener el valor del texto que acabamos de escribir.



image



En la invocación del servicio, al ser este asincrónico, debemos indicar donde se espera la respuesta del servicio en caso de que sea exitosa, donde esperar un timeout o donde esperar un error. En todos los casos vamos a desplegar una alerta con la respuesta recibida, sin embargo, podríamos hacer con los datos retornados lo que como desarrolladores necesitemos en la página.



    <script language="javascript" type="text/javascript">
// <!CDATA[

function Button1_onclick() {
ret = WebServiceObtenerValor.ObtenerValor(document.getElementById('Text1').value, OnComplete, OnTimeOut, OnError);
return (true);
}

function OnComplete(arg) {
alert(arg);
}

function OnTimeOut(arg) {
alert('Timeout invocando el servicio');
}

function OnError(arg) {
alert('Error en la invocación del servicio');
}
// ]]>
</script>



Technorati Tags: ,,

6 comentarios:

Anónimo dijo...

Si aveces es necesario llamar un servicio web desde el cliente mediante javascript, para ello como bien tu dices, el servicio debe estar habilitado para soportar este tipo de llamadas. Aqui te adjunto tambien un link de un video que se trata de lo mismo. Espero que les sirva. http://www.asp.net/learn/3.5-videos/video-231.aspx

Andres dijo...

Hola, muy util tu post...
Sin el más mínimo ánimo de analizar o criticar la solución de invocar un Web Service desde Javascript, me sería útil saber por qué lo ocupaste pues me interesa saber escenarios desde los cuales aplicaría una solución así...

Saludos y gracias...

Claudio dijo...

Andres, a veces por un tema de velocidad, refresco y lectura de datos un poco mas rapido, es util conocer esta tecnica, ya que es un consumo directo al servicio desde javascript(desde el mismo navegador) sin tener la necesidad de pasar por el servidor donde esta alojada la pagina aspnet, es decir se ahorra un paso en el flujo de los datos.
por sierto pueden ver aqui tambien http://www.asp.net/learn/3.5-videos/video-231.aspx

Diego Rojas dijo...

Realmente el escenario más practico es cuando se usa un activex que tiene una clase que lo representa en el servidor. El ejecutar activex en el cliente tiene su problematica ( permisos etc ) y si lo tienes en el server y la funcionalidad te sirve desde allá entonces puedes crear un servicio y lo invocas desde el js

Federico dijo...

Muy claro y practico. Aquel que duda de lo necesario de esto es porque aun no realizo aplicaciones complejas o no tuvo la problematica de los anchos de banda.

Diego Rojas dijo...

Gracias Federico por leer el blog y por tus comentarios. Y definitivo, hay que tener un problema de ancho de banda o desempeño para utilizar una característica como esta.
Saludos