[ASP.NET] Cargando datos con WebAPI y JSRender

Hace algún tiempo, realice algunos post sobre las Microsoft jQuery Templates (míralos acá: post I, post II, post III) y en resumen lo que podíamos realizar era obtener datos de alguna fuente como puede ser un servicio y mostrarlos en el cliente, todo esto utilizando JavaScript, lamentablemente ese proyecto se ha quedado atrás… y ahora tenemos una nueva y muy buena alternativa, JSRender, JSRender tiene la misma filosofía de las jQuery Templates pero con mejores características, así que quiero mostrarles un pequeño ejemplo de como lo podemos usar en conjunto con WebAPI.. como ya sabrán WebAPI esta muy de moda y no des para menos, realmente es muy bueno y me ha gustado bastante, así que manos a la obra:

1. El modelo

Como primera medida vamos a crear una clase Cliente que va a actuar como el modelo:

   1:  public class Cliente
   2:  {
   3:      public int ClienteId { get; set; }
   4:      public string Nombre { get; set; }
   5:      public string Email { get; set; }
   6:      public bool Activo { get; set; }
   7:  }

2. El controlador

En este caso vamos a crear un controlador WebAPI, recuerden que WebAPI no solo esta disponible para ASP.NET MVC, también es posible utilizarla con ASP.NET Web Forms. Añadimos un nuevo ítem de tipo Web API Controller y como nombre le damos ClienteController, y allí  para este ejemplo solo vamos a tener una función llamada GetAll la cual retornará todos los clientes existentes.

   1:  public class ClienteController : ApiController
   2:  {
   3:      private readonly List<Cliente> clientes = new List<Cliente>()
   4:      {
   5:          new Cliente{ ClienteId = 1, Nombre = "Julio Avellaneda", Email = "julito_gtu@hotmail.com", Activo = true},
   6:          new Cliente{ ClienteId = 2, Nombre = "Juan Ruiz", Email = "juanruiz@hotmail.com", Activo = true},
   7:          new Cliente{ ClienteId = 3, Nombre = "Nathalia Torres", Email = "nata@hotmail.com", Activo = false},
   8:          new Cliente{ ClienteId = 4, Nombre = "Julio Avellaneda", Email = "julito_gtu@hotmail.com", Activo = true},
   9:          new Cliente{ ClienteId = 5, Nombre = "Juan Ruiz", Email = "juanruiz@hotmail.com", Activo = true},
  10:          new Cliente{ ClienteId = 6, Nombre = "Nathalia Torres", Email = "nata@hotmail.com", Activo = false},
  11:          new Cliente{ ClienteId = 7, Nombre = "Julio Avellaneda", Email = "julito_gtu@hotmail.com", Activo = true},
  12:          new Cliente{ ClienteId = 8, Nombre = "Juan Ruiz", Email = "juanruiz@hotmail.com", Activo = true},
  13:          new Cliente{ ClienteId = 9, Nombre = "Nathalia Torres", Email = "nata@hotmail.com", Activo = false}
  14:      };
  15:   
  16:      public IEnumerable<Cliente> GetAll()
  17:      {
  18:          return clientes;
  19:      }
  20:  }

3. Configurando WebAPI

Una vez que tenemos listo el controlador, lo que necesitamos hacer es configurar el ruteo para poder llamar a los métodos del controllador, así que lo primero que haremos es crear una clase con un método estático y luego llamarlo en el evento Application_Start de el Global.asax:

   1:  public class RouteConfig
   2:  {
   3:      public static void RegisterRoutes()
   4:      {
   5:          RouteTable.Routes.MapHttpRoute(
   6:              name: "DefaultApi",
   7:              routeTemplate: "api/{controller}/{id}",
   8:              defaults: new { id = RouteParameter.Optional }
   9:          );
  10:      }
  11:  }

Y en el Global.asax:

   1:  protected void Application_Start(object sender, EventArgs e)
   2:  {
   3:      RouteConfig.RegisterRoutes();
   4:  }

4. Creando el HTML

Una vez que tenemos todo listo, vamos a crear una página para mostrar los datos:

   1:  <div>
   2:      <h1>Listado de clientes</h1>
   3:      <hr />
   4:      <table id="tblData">
   5:          <thead>
   6:              <tr>
   7:                  <th>Cliente Id</th>
   8:                  <th>Nombre</th>
   9:                  <th>Email</th>
  10:                  <th>Estado</th>
  11:              </tr>
  12:          </thead>
  13:          <tbody></tbody>
  14:      </table>
  15:  </div>

Para el ejemplo tenemos definida una tabla en la cual mostraremos los datos.

5. Referenciando Scripts

Ahora, vamos a añadir referencias a dos archivos JavaScript, uno será jQuery y le otro jsrender, sin embargo acá quiero dejar claro que a diferencia de muchos plugin jsrender NO necesita de jQuery, simplemente lo he añadido ya que me facilita el acceso al DOM y a eventos del lado del cliente:

   1:  <script src="Scripts/jquery-1.8.2.js"></script>
   2:  <script src="Scripts/jsrender.js"></script>

6. Creando la plantilla

Ahora es tiempo de crear la plantilla que usará jsrender para mostrar los datos:

   1:  <script type="text/x-jsrender" id="DataTemplate">
   2:      <tr><td>{{:ClienteId}}</td><td>{{:Nombre}}</td><td>{{:Email}}</td><td>{{:Activo}}</td></tr>
   3:  </script>

Lo primero que se debe tener presente es que el tipo del script debe ser text/x-jsrender, y le debemos definir un id para luego poder referenciarla, el cuerpo de la plantilla simplemente es una pequeña parte del body de una tabla (recuerdan que en el HTML definimos una tabla, paso 4), y con la sintaxis: {{:NOMBRE_CAMPO}} es que se define cual es el dato que se desea mostrar.

7. Enlazando datos:

Finalmente, llego la hora de enlazar la plantilla con los datos proporcionados por WebAPI, para este trabajo nos apoyaremos en jQuery y su facilidad para llamar servicios:

   1:  <script type="text/javascript">
   2:      $(document).on("ready", function () {
   3:          $.getJSON("/api/cliente",
   4:              function (data) {
   5:                  $("#tblData tbody").html($("#DataTemplate").render(data));
   6:          });
   7:      })
   8:  </script>

Como el servicio nos devuelve los datos en formato JSON por brevedad se hace uso de $.getJSON, como primer parámetro le pasamos la URL que debe llamar, y en segundo lugar la función de callback, en dicha función lo que hacemos es cargarle un HTML al cuerpo de la tabla, pero como en este caso es una plantilla lo primero es referenciarla por medio de su ID y luego le decimos los datos a cargar con render(data).

Ahora si ejecutamos la aplicación tenemos:

image

Espero les sea de utilidad, les dejo el código con el ejemplo.

Descarga el ejemplo.

You may also like...

7 Responses

  1. This piece of writing provides clear idea for the new viewers of blogging,
    that in fact how to do blogging and site-building.

  1. October 10, 2012

    [...]   [ASP.NET] Cargando datos con WebAPI y JSRender   [...]

  2. October 10, 2012

    [...] [ASP.NET] Cargando datos con WebAPI y JSRender [...]

  3. October 16, 2012

    [...] [ASP.NET] Cargando datos con WebAPI y JSRender [...]

  4. October 22, 2012

    [...] vimos una introducción a JSRender y como podemos cargar los datos utilizando WebAPI (mira el post), y hoy quiero mostrarles dos características adicionales de JSRender para manejar las plantillas [...]

  5. December 19, 2012

    [...] [ASP.NET] Cargando datos con WebAPI y JSRender [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: