Performancing Metrics

Cliente JSON para WCF - Return(GiS);

Return(GiS);

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!

Attachment: ClienteJSON.rar
Posted: 30/10/2009 8:26 por Gisela | con 15 comment(s)
Archivado en: ,,
Comparte este post:

Comentarios

PabloNetrix ha opinado:

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

# October 30, 2009 11:23 AM

Gisela ha opinado:

Muchas gracias por el comentario PabloNetrix :)

Me alegra que pienses así :D

¡Saludos!

# October 30, 2009 4:37 PM

Juan ha opinado:

Excelente post Gisela, me sirvió de mucha ayuda. Seguí así.

Saludos.

# January 14, 2010 8:51 PM

Gisela ha opinado:

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!

# January 14, 2010 9:17 PM

Roger ha opinado:

Hola Gis, esta  muy interesante el blog seria posible que publiques tambien el source.

Saludos

# August 8, 2010 1:03 AM

Gisela ha opinado:

Hola Roger,

En el apartado Attachment del post puedes encontrar el link para descargar el source del ejemplo. Sería el siguiente:

geeks.ms/.../ClienteJSON.rar

Muchas gracias por tu comentario :)

¡Saludos!

# August 8, 2010 1:19 AM

Bohorkez ha opinado:

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.

# August 20, 2010 8:53 PM

Gisela ha opinado:

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:

geeks.ms/.../los-eventos-en-jquery.aspx

¡Saludos!

# August 20, 2010 9:02 PM

Bohorkez ha opinado:

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!

# August 20, 2010 9:15 PM

Gisela ha opinado:

Gracias a ti por tus comentarios :)

¡Saludos!

# August 21, 2010 5:36 PM

YCR ha opinado:

Muy bueno Gracias!!!

# June 1, 2011 2:03 AM

Gisela ha opinado:

Gracias por tu comentario YCR, me alegra que te sea de utilidad :)

¡Saludos!

# June 8, 2011 11:26 AM

José Antonio ha opinado:

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

# July 9, 2011 4:49 PM

Gisela ha opinado:

Gracias por tu comentario José Antonio :)

¡Saludos!

# July 10, 2011 6:09 PM

angelaraca ha opinado:

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

# June 20, 2012 9:43 PM