Tips de Desarrollo Web

Escrito por Juan David Nicholls

NAVEGACIÓN

Otra manera de responder datos con los WebServices

6. septiembre 2013 20:19 / Nicholls / ASP.NET . Javascript . C# . jQuery / Comentarios (0)

Hola a todos! El día de hoy vengo a escribirles este artículo, que aunque es muy sencillo realmente me parece muy emocionante. Y se trata de otra manera de retornar datos con nuestros queridos WebServices .asmx de una forma mucho más fácil. El otro día estaba observando un Plugin de jQuery para visualizar datos en tablas y poder realizar CRUD a nuestra Base de Datos mediante AJAX (jTable), este lo modifiqué y mientras analizaba el código que viene como ejemplo en la página para ASP.NET, no pude dejar de detallar la manera como retornaban los datos en el mismo Code-Behind de las páginas, es decir en los .aspx.cs.

Default.aspx.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Services;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  8.  
  9. public partial class EJEMPLOASPX : System.Web.UI.Page
  10. {
  11.     protected void Page_Load(object sender, EventArgs e)
  12.     {
  13.  
  14.     }
  15.  
  16.     [WebMethod(EnableSession = true)]
  17.     public static object GetDate(int Edad)
  18.     {
  19.         if (Edad > 18)
  20.         {
  21.             return new { titulo = "hola", descr = "viejo" };
  22.         }
  23.         else
  24.         {
  25.             return new { titulo = "hola", descr ="joven" };
  26.         }
  27.     }
  28. }

Como podemos observar se esta retornando datos como un WebMethod normal que ya hemos visto en los WebServices, pero además no se esta retornando un string sino un object el cual podemos modificar a nuestro gusto y no hay que hacer uso de referencias a dlls para poder enviar un JSON simple o en su defecto de varias concatenaciones para formar el string que habitualmente retornamos. Es importante observar que para que nos funcione de esta manera se necesita que el método sea estático, por lo cual lo podemos consumir de la siguiente manera.

Default.aspx
  1. <body>
  2.     <form id="form1" runat="server">
  3.         Edad<input type="number" id="edad" />
  4.         <a href="#" id="JSON">ejemplo json</a>
  5.     </form>
  6.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  7.     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
  8.     <script type="text/javascript">
  9.         $("#JSON").click(function (event) {
  10.             event.preventDefault();
  11.             $.ajax({
  12.                 type: "POST",
  13.                 url: "EJEMPLOASPX.aspx/GetDate",
  14.                 data: "{Edad:" + $("#edad").val() + "}",
  15.                 contentType: "application/json; charset=utf-8",
  16.                 dataType: "json",
  17.                 success: function (data) {
  18.                     if (data.hasOwnProperty('d')) {
  19.                         data = data.d;
  20.                     }
  21.                     console.log(data.titulo);
  22.                     console.log(data.descr);
  23.                 },
  24.                 error: function (xhr, status, error) {
  25.                     //console.log(xhr);
  26.                     //console.log(status);
  27.                     //console.log(error);
  28.                 }
  29.             });
  30.         });
  31.     </script>
  32. </body>

Woww

Como podemos observar ni siquiera hay que hacer un parser al objecto que nos responde y el cuál podemos emplear muy fácilmente como siempre lo hacemos con nuestros datos en formato JSON.

Ahora observemos que también podemos emplear esta manera para retornar datos desde nuestros propios WebServices .asmx

Default.aspx
  1. Edad<input type="number" id="edad" />
  2. <a href="#" id="JSON">ejemplo json</a>
  3. <script type="text/javascript">
  4.     $("#JSON").click(function (event) {
  5.         event.preventDefault();
  6.         $.ajax({
  7.             type: "POST",
  8.             url: "WebService.asmx/GetDate",
  9.             data: "{Edad:" + $("#edad").val() + "}",
  10.             contentType: "application/json; charset=utf-8",
  11.             dataType: "json",
  12.             success: function (data) {
  13.                 if (data.hasOwnProperty('d')) {
  14.                     data = data.d;
  15.                 }
  16.                 console.log(data.titulo);
  17.                 console.log(data.descr);
  18.             },
  19.             error: function (xhr, status, error) {
  20.                 //console.log(xhr);
  21.                 //console.log(status);
  22.                 //console.log(error);
  23.             }
  24.         });
  25.     });
  26. </script>

WebService.asmx
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Script.Services;
  6. using System.Web.Services;
  7.  
  8. /// <summary>
  9. /// Summary description for WebService
  10. /// </summary>
  11. [WebService(Namespace = "http://tempuri.org/")]
  12. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  13. // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
  14. [System.Web.Script.Services.ScriptService]
  15. public class WebService : System.Web.Services.WebService {
  16.  
  17.     public WebService () {
  18.  
  19.         //Uncomment the following line if using designed components
  20.         //InitializeComponent();
  21.     }
  22.  
  23.     [WebMethod]
  24.     [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  25.     public object GetDate(int Edad)
  26.     {
  27.         if (Edad > 18)
  28.         {
  29.             return new { titulo = "hola", descr = "viejo" };
  30.         }
  31.         else
  32.         {
  33.             return new { titulo = "hola", descr = "joven" };
  34.         }
  35.     }
  36.     
  37. }

Por lo cual han supuesto bien, esta se ha vuelto mi manera preferida de retornar datos simples de mis WebServices vía jQuery AJAX :D

Etiquetas : , , ,
blog comments powered by Disqus