10 de febrero de 2010

jQuery AJAX y JSON Array

En este post veremos el código de ejemplo de una petición AJAX (usando jQuery) que nos devolverá una colección de objetos complejos.

Hace varios meses escribí un articulo (AJAX jQuery en ASP.Net) donde comentaba las bases del uso de AJAX con jQuery, pero en aquel artículo usamos un ejemplo bien sencillo para una mejor comprensión.
En este post intento ser un poco mas práctico y explicaremos un ejemplo de petición AJAX más parecido a lo que nos encontramos en la vida real, aunque eso sí, un poco más complejo (pero solo un poco, muy poco…)

Ejemplo jQuery AJAX con Array JSON

En nuestro ejemplo de hoy, la página hará una petición AJAX a un PageMethod que devolverá como resultado una colección de la clase Contacto. No devolverá ni un string, ni int, ni DateTime … sino una lista de objetos que veremos como tratarlos en el lado del cliente (AJAX JSON Array).
jQuery Ajax JSON Array
Nuestra página (.aspx) inicialmente solo tendrá un botón (Obtener Contactos). Al hacer clic en este se lanzará la petición jQuery AJAX que retornará una lista de objetos del tipo Contacto. La lista de contactos la transformaremos en un Array JSON que podremos manipular perfectamente en el lado del cliente.

Pero pasemos a ver el código de este ejemplo AJAX.

Ejemplo jQuery AJAX, ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQAjaxArrayJSon.aspx.cs" 
         Inherits="jQuery_Ajax_JQAjaxArrayJSon" %>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head id="Head1" runat="server">   
    <script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js" ></script>

    <script type = "text/javascript">
      jQuery(document).ready(function() {
        $('#btnObtContactos').click(getContactos);
      });

      function getContactos() {
        $.ajax({
          type: "POST",
          url: "JQAjaxArrayJSon.aspx/ObtenerContactos",
          data: "{}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (response) {
            var contactos = (typeof response.d) == 'string' ?
                               eval('(' + response.d + ')') :
                               response.d;

            $('#tablaContactos').empty();
            $('#tablaContactos').append('<tr>
                                           <td><b>ID</b></td><td><b>Nombre</b></td>
                                           <td><b>Telefono</b></td><td><b>EMail</b></td>
                                         </tr>');
           
            for (var i = 0; i < contactos.length; i++) {
              $('#tablaContactos').append('<tr>' +
                                    '<td>' + contactos[i].IdContacto + '</td>' +
                                    '<td>' + contactos[i].Nombre + '</td>' +
                                    '<td>' + contactos[i].Telefono + '</td>' +
                                    '<td>' + contactos[i].Email + '</td>' +
                                  '</tr>');
            }
          },
          error: function (result) {
            alert('ERROR ' + result.status + ' ' + result.statusText);
          }
        });
      }
    </script>
  </head>
  <body>
    <form id="form1" runat="server">
    <input type="button" id="btnObtContactos" value="Obtener Contactos" /> <br/><br/>

    <table id='tablaContactos'></table>
    </form>
  </body>
</html>

 

Ejemplo jQuery AJAX, Código C#

public partial class jQuery_Ajax_JQAjaxArrayJSon : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e) {}

  [WebMethod]
  public static List<Contacto> ObtenerContactos()
  {
    return new List<Contacto>
            {
                new Contacto { IdContacto=14, Nombre="Pedro", Telefono="601 01 01 01",
                               Email = "pedrog@gmail.com" },
                new Contacto { IdContacto=15, Nombre="Maria", Telefono="601 01 01 02",
                               Email = "maria69@gmail.com"  },
                new Contacto { IdContacto=16, Nombre="Juana", Telefono="601 01 01 03",
                               Email = "juana33@gmail.com"  }
            };
  }
}

public class Contacto
{
  public int IdContacto { get; set; }
  public string Nombre { get; set; }
  public string Telefono { get; set; }
  public string Email { get; set; }
}

Pero comentemos un poco el ejemplo AJAX ASP.NET que hemos expuesto:

Lo primero que hicimos en el ASPX fue asociar al evento click del botón btnObtContactos, la función getContactos().

  $('#btnObtContactos').click(getContactos);

Esta función es la que hace la llamada jQuery AJAX, pero detallemos más en las opciones usadas en esta llamada AJAX:

$.ajax() Opciones

  • type: "POST": Con esto estamos especificando el tipo de petición AJAX (HTTP Verb) que haremos al servidor (GET o POST). En nuestro caso hemos usado el método POST.
  • url: "JQAjaxArrayJSon.aspx/ObtenerContactos": Esta propiedad contiene la dirección url del método donde está alojado nuestro servicio web (url / método a invocar). En nuestro caso es un PageMethod (ObtenerContactos) que hemos definido en la propia pagina (JQAjaxArrayJSon.aspx) por simplicidad.
  • data: "{}": Esta propiedad contiene los datos que serán enviados al servidor. En nuestro caso como el PageMethod (ObtenerContactos) no necesita ningún parámetro, pues no enviamos dato alguno. Si por ejemplo, quisiéramos enviar algún dato en la petición AJAX, podríamos hacer algo como esto:
    data: "{'nombre': 'Derbis', 'apellidos': 'Corrales Varela'}"
  • contentType: "application/json; charset=utf-8": Esta propiedad contiene el formato en el que estamos pasando nuestro parámetros al servidor.
  • dataType: "json": Esta propiedad contiene el tipo de dato que esperamos recibir desde el servicio invocado. En nuestro caso JSON evalúa la respuesta y nos retorna un objeto javascript.
  • Por último seteamos success y error, asociándole las funciones que deben ejecutarse al terminarse de procesar la petición AJAX, si todo fue bien se ejecutará la función success, de lo contrario ejecutará la asociada a error. En la función anónima asociada a success lo que hacemos es obtener el Array JSON y llenar la tabla tablaContactos, pero no comentaré más de esto pues no es el objetivo de este artículo.

Luego de esto solo queda comentar el código C#, donde está el PageMethod ObtenerContactos, que no hace nada complicado, solo crea una lista de contactos (List<Contacto>) que devuelve.

Nota: En este ejemplo utilizamos un  PageMethod para hacer la llamada jQuery AJAX, pero también podríamos haber usado un Web Services, WCF, o una simple página. 

 

 

Artículos Relacionados:

30 comentarios:

  1. muy bueno gracias me sirvio muchisimo

    ResponderEliminar
  2. Que buen Articulo me fue de mucha utilidad Gracias

    ResponderEliminar
  3. Muy intresante:

    Aquí explico un problemilla muy común en AJAX.

    http://no-suelo.blogspot.com/2010/09/bueno-seguro-que-habeis-tenido-el.html

    ResponderEliminar
  4. Aquí podés ver detalladamente como hacer la llamada:

    http://no-suelo.blogspot.com/2010/09/llamada-ajax-con-jquery-parametros.html

    ResponderEliminar
  5. Muy bueno esta el post lo agradesco por conpartir sus experiencias

    ResponderEliminar
  6. Bien documentado, pero tengo una duda, como lo haces a la inversa, es decir, enviar desde javascript una colección hacia un WebService y como se trataría, soy nuevo en esto gracias

    ResponderEliminar
  7. probé este codigo y no me funciono, estoy ocupando asp.net 2005 que podrá ser???

    ResponderEliminar
  8. Disculpa ami no me funcionoo y no he enconttrado la solucion me podrias ayudar?

    ResponderEliminar
  9. Como descargo este ejemplo... saludos

    ResponderEliminar
  10. me sale un error :S ....
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
    aca en esta seccion...

    ResponderEliminar
  11. Quiero descargar el ejemplo :( ?

    ResponderEliminar
  12. Hola a todo los amantes de la tecnologia. En este mundo de desarrollo con aspx y jquery soy novato. me gustaria que pongan para poder bajar y usar como ejemplo. PROLUCAST-NET

    ResponderEliminar
  13. me esta dando error en la parte que pones [WebMethod]

    ResponderEliminar
  14. Molt senzill, clar i detallat. Gràcies!!

    ResponderEliminar
  15. Muy buen post; me fué de mucha utilidad. Gracias!!!

    ResponderEliminar
  16. Me fué muy util. ¡Gracias!

    ResponderEliminar
  17. para el problema del [WebMethod]

    usar lo siguiente:
    using System.Web.Services;

    ResponderEliminar
  18. Excelentisimo... batalle mucho con esto y al fin lo logre muchas gracias bro.. sacaste un 100!!... me haz ayudado demasiaod

    ResponderEliminar
  19. Hola que tal, sabes como hacerlo a la inversa, es decir; tener el arreglo de objetos y enviarlo al metodo del webservice? saludos!

    ResponderEliminar
  20. Hola! Gracias por el articulo. Tengo un problema luego de implementar esta tecnica...
    Al agregar una fila a una table por AJAX, la misma se borra si hay un postback, como tengo que hacer para que se guarde al ir y volver al servidor?

    ResponderEliminar
  21. el archivo .aspx me responde lo siguiente:
    ExceptionType: "System.InvalidOperationException"
    Message: "Error de autenticación."
    StackTrace: null
    Alguien sabe por que?
    Muchas gracias

    ResponderEliminar