En un post anterior, mostré como crear un servicio web con Windows Communication Foundation. Para consumir el mismo, vamos a implementar un pequeño cliente JSON con JQuery.
Creamos un proyecto ASP.NET Web Application:
Antes de comenzar con nuestro código, necesitamos la librería de JQuery, la cual podemos descargar en este enlace para posteriormente añadirla a nuestra solución.
Por otro lado, vamos a crear un nuevo archivo JScript, llamado JSON.js, donde implementaremos la funcionalidad que llamará a nuestro servicio y recogerá el resultado. Nuestro proyecto quedaría de la siguiente manera:
He utilizado la página Default.aspx para mostrar dos textbox y poder solicitar los valores al usuario, además de dos botones con los que llamaremos al servicio.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ClienteJSON._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head runat="server"> <title>Cliente JSON</title> </head> <body> <div id="Calculos"> <div> <div> <label id="lblNumeroUno"> Introduce número:</label> <input type="text" id="txtNumUno" /> </div> <div> <label id="lblNumeroDos"> Introduce otro número:</label> <input type="text" id="txtNumDos" /> </div> <div> <input type="button" id="btnSumar" value="Sumar" /> <input type="button" id="btnRestar" value="Restar" /> </div> </div> </div> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="JSON.js"></script> </body> </html>
Por último, sólo nos quedaría invocar al servicio web y mostrar el resultado que nos aporta, en función de si queremos Sumar o Restar los número que introducimos a través de la interfaz. Abrimos el archivo JSON.js e introducimos lo siguiente:
$("#btnSumar").bind("click", function(e) {
var params = { "a": $('#txtNumUno').val(), "b": $('#txtNumDos').val() };
$.ajax({
type: "GET",
url: "http://localhost/WCF/Service.svc/json/Suma",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert("Resultado Suma: " + msg.d.Result);
}
});
});
$("#btnRestar").bind("click", function(e) {
var params = { "a": $('#txtNumUno').val(), "b": $('#txtNumDos').val() };
$.ajax({
type: "GET",
url: "http://localhost/WCF/Service.svc/json/Resta",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert("Resultado Resta: " + msg.d.Result);
}
});
});La verdad es que, teniendo JQuery, es bastante simple realizar este tipo de funcionalidad. He utilizado el método Bind, para asignarles el evento a cada uno de nuestros botones. De esta manera, no tenemos que introducir ningún código de javascript en nuestro aspx. Más adelante me gustaría enfocarme en la manera de funcionar de esta librería.
En el mismo sitio donde bindeamos el evento click a nuestro botón, creamos la función que se va a ejecutar.
Utilizamos la variable params para montar nuestra cadena de parámetros. Hay que tener en cuenta que el nombre de cada parámetro se debe corresponder con el que tienen en el servicio web (en este caso a y b).
Creamos un objeto ajax con los atributos type (el tipo de HTTP Verb que vamos a utilizar), la url donde se aloja nuestro servicio, seguido del método que vamos a invocar, en data le pasamos los parámetros necesarios para el cálculo solicitado, contentType indica cómo va a evaluar JQuery la respuesta y cómo nos la va a devolver (En el caso de JSON evalúa la respuesta como tal y nos retorna un objeto javascript), dataType es el formato en el que estamos pasando nuestro parámetros y en la parte success se adjunta la función que se lanzará cuando haya terminado el proceso en caso de éxito. En un principio, esto es lo mínimo que debemos usar.
Si arrancamos la aplicación, ya tenemos nuestra Suma y nuestra Resta funcionando con un servicio web en WCF y su cliente en JSON.
¡Saludos!