Tips de Desarrollo Web

Escrito por Juan David Nicholls

NAVEGACIÓN

Javascript Ajax y WebForms

4. julio 2013 23:39 / Nicholls / ASP.NET . C# . HTML5 . Javascript . jQuery / Comentarios (0)

 

En ASP.NET es muy fácil realizar peticiones Ajax, tanto Get y Post mediante jQuery, empleando ya sea Handlers (.ashx), como Servicios basados en SOAP (.asmx y WCF), como Servicios basados en HTTP (mediante WebAPI).

SOAP es un un protocolo estándar que define cómo dos objetos en diferentes procesos pueden comunicarse por medio de intercambio de datos XML.

HTTP es un protocolo de comunicación basado en texto que se utiliza para solicitar páginas web desde un servidor web y enviar respuestas de nuevo a un navegador web. Cuando se solicita una página web, el navegador envía una solicitud al servidor Web.

  • Handlers .ashx

Un controlador HTTP (.ashx) es básicamente un proceso que se ejecuta en respuesta a una solicitud realizada a una aplicación Web ASP.NET. La respuesta puede ser una imagen, un html, un json, un xml, etc.

EJEMPLO #1: (El usuario ingresa su edad y el Servidor válida si es mayor o menor de edad y responde con un mensajito de modo asíncrono). No se harán validaciones, pero es un factor muy importante a tener en cuenta que no se nos puede olvidar. 

Creamos un WebForm (.aspx)

Sin título

Agregamos un campo de entrada (<input>) y un enlace (<a>) que se comportará como botón gracias a jQuery.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html>
  6. <head runat="server">
  7.     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  8.     <title></title>
  9. </head>
  10. <body>
  11.     <form id="form1" runat="server">
  12.         <input id="edad" type="text" value="" />
  13.         <a id="aceptar" href="#">Validar</a>
  14.     </form>
  15.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
  16.     <script type="text/javascript">
  17.         $("#aceptar").click(function (event) {
  18.             event.preventDefault();
  19.             $.post("Handler.ashx", {
  20.                 edad: $("#edad").val()
  21.             }, function (msg) {
  22.                 alert(msg.mensaje);
  23.             });
  24.         });
  25.     </script>
  26. </body>
  27. </html>
 
Nota : En este ejemplo estamos realizando un POST, si quisiéramos realizar un GET se puede de la siguiente manera
  1. $.getJSON("Handler.ashx?edad=" + $("#edad").val(), function (msg) {
  2.     alert(msg.mensaje);
  3. });
La diferencia entre un POST y un GET se basa en como se envían los datos, en el POST los datos se colocan en el cuerpo del mensaje de la solicitud, mientras que en el GET los datos se adjuntan a la URL como parte de la cadena de consulta. Por lo tanto un POST es más seguro y la cantidad de datos que se pueden enviar es mucho mayor.
 
Ahora agregamos nuestro Handler
 
Agregamos un Handler
 
El Handler será como el siguiente
 
  1. <%@ WebHandler Language="C#" Class="Handler" %>
  2.  
  3. using System;
  4. using System.Web;
  5.  
  6. public class Handler : IHttpHandler
  7. {
  8.     public void ProcessRequest(HttpContext context)
  9.     {
  10.         int edad = Convert.ToInt32(context.Request["edad"].ToString());
  11.         context.Response.ContentType = "application/json";
  12.         if (edad > 18)
  13.         {
  14.             context.Response.Write(string.Format("{{ \"mensaje\" : \"{0} es mayor\" }}", edad));
  15.         }
  16.         else
  17.         {
  18.             context.Response.Write(string.Format(@"{{ ""mensaje"" : ""{0} es menor"" }}", edad));
  19.         }
  20.         context.Response.End();
  21.     }
  22.  
  23.     public bool IsReusable
  24.     {
  25.         get
  26.         {
  27.             return false;
  28.         }
  29.     }
  30.  
  31. }
Podemos observar que a la petición le llegará la edad ingresada por el Usuario y se retornará un mensaje en json dependiendo si es mayor o menor. Con solo esto ya tendremos nuestra aplicación comunicándose con nuestro servidor mediante ajax. Aunque es un ejemplo muy simple, en el Handler se podría hacer CRUD a una base de datos y retornar datos, etc.
 
  •  Servicios Web .asmx

Estos Servicios a diferencia de los Handlers, solo responden a una petición en formato JSON o XML, según se indique en el código y por defecto es en XML. En un mismo archivo .asmx pueden existir varios métodos web.

Por lo tanto vamos a realizar el EJEMPLO anterior de los Handlers pero con los Servicios Web.

Agregamos un WebService .asmx dentro del sitio Web.

Sin título

El cual se verá de la siguiente manera

  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 string GetData(int edad)
  26.     {
  27.         if (edad > 18)
  28.         {
  29.             return string.Format("{{ \"mensaje\" : \"{0} es mayor\" }}", edad);
  30.         }
  31.         else
  32.         {
  33.             return string.Format(@"{{ ""mensaje"" : ""{0} es menor"" }}", edad);
  34.         }
  35.     }
  36.    
  37. }

Y para que nuestro WebForm Default.aspx consuma este WebService solo tenemos que cambiar nuestro script para definir que los datos se enviaran en formato JSON mediante el método genérico AJAX proporcionado por jQuery, por lo tanto se vera de la siguiente manera:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html>
  3. <html>
  4. <head runat="server">
  5.     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  6.     <title></title>
  7. </head>
  8. <body>
  9.     <form id="form1" runat="server">
  10.         <input id="edad" type="text" value="" />
  11.         <a id="aceptar" href="#">Validar</a>
  12.     </form>
  13.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
  14.     <script type="text/javascript">
  15.         $("#aceptar").click(function (event) {
  16.             event.preventDefault();
  17.             $.ajax({
  18.                 type: "POST",
  19.                 url: "WebService.asmx/GetData",
  20.                 data: "{edad:" + $("#edad").val() + "}",
  21.                 contentType: "application/json; charset=utf-8",
  22.                 dataType: "json",
  23.                 success: function (msg) {
  24.                     if (msg.hasOwnProperty('d')) {
  25.                         msg = msg.d;
  26.                     }
  27.                     var json = JSON.parse(msg);
  28.                     alert(json.mensaje);
  29.                 },
  30.                 error: function (xhr, status, error) {
  31.                     alert("Upps! Hubo un error");
  32.                 }
  33.             });
  34.         });
  35.     </script>
  36. </body>
  37. </html>
 
Etiquetas : , , , ,
blog comments powered by Disqus