Cliente JSON para WCF

En un post anterior, mostré como crear un servicio web con Windows Communication Foundation. Para consumir el mismo, vamos a crear 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 obtenerla en este enlace. Una vez descargada, agregamos el archivo 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 para recoger los valores y 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 llamar a nuestro 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 más 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!

Actualización 31/10/2009: En el archivo JSON.js, he modificado la forma de recuperar el valor de los textbox por .val(), que sería la forma correcta con JQuery. De la otra manera, $(‘#textbox’)[0].value, era un híbrido que funciona exactamente igual, pero creo que queda más elegante con .val(). ¡Saludos!

15 comentarios sobre “Cliente JSON para WCF”

  1. Voto a bríos! Pero esto que es!

    Uno de los blogs más interesantes (y prácticos) de todo el sitio, y no te pone nadie ni un comentario.

    Si está claro, que “la miel no se hizo para…” 😉 😉

    Saludos

  2. Hola Juan,

    Muchas gracias por tu comentario. Si tienes cualquier duda o necesitas alguna otra cosa relacionada, no dudes en ponerte en contacto conmigo =)

    ¡Saludos!

  3. Hola! Sé que este blog trata temas de .Net pero en el ejemplo veo que usas la función bind() de jQuery sabes cual es la diferencia entre bind() y poner solamente click()? Llevo tiempo buscando eso…

    Gracias Gisela.

  4. Hola Bohorkez,

    En primer lugar, gracias por tu comentario :) Si bien la mayoría de los ejemplos son en .NET, tengo un apartado de JQuery donde tengo algunos artículos relacionados.

    La diferencia entre bind y click es que en bind puedes indicar el evento que vas a asociar a el/los elementos e incluso asociar varios eventos a la vez (además puedes asignar eventos personalizados), por ejemplo: click, focus, etcétera. Cuando ocurre cualquiera de esos eventos la función definida se ejecutará.

    Sin embargo, cuando usas click es únicamente para dicho evento.

    Te adjunto el enlace donde hablo de ello por si te es de utilidad:

    http://geeks.ms/blogs/gtorres/archive/2009/11/11/los-eventos-en-jquery.aspx

    ¡Saludos!

  5. Más claro imposible. Jalón de orejas para mí por no darme cuenta que habías escrito un post entero sobre ese tema!!

    Gracias por tomarte el tiempo de responderme Gisela.

    Saludos!

  6. Buenisimo.
    He estado leyendo varias artículos en inglés sobre el tema y no había encontrado ninguno que hablara tan concretamente de lo que llevo varios días intentando hacer.
    Me suscribo a tu blog ya mismo y tienes un nuevo admirador

    Muchas gracias

  7. Excelente!!! estaba necesitando una explicación tan clara y presisa como esta, pero me surge un problemita cuando lo hago en un proyecto MVC 2 con el framework 4.0, alguna idea de lo que pueda pasar?

    Dentro de mi solución tengo el proyecto principal MVC y el proyecto WCF ya agregué la referencia de servicio y todo, pero por algún motivo no me consume el servicio. Lo hago tal cual tu lo muestras en este post, solo que no hago un .js sino pongo el script directamente en mi .ascx

    Cualquier ayuda es bien recibida, gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *