Cliente JSON para WCF – Return(GiS);

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”

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

15 comentarios sobre “Cliente JSON para WCF”

Deja un comentario Cancelar respuesta