« Volver
in ASP.NET Web API asp.net read.

[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: publicclass Cliente 2: { 3: publicint ClienteId { get; set; } 4: publicstring Nombre { get; set; } 5: publicstring Email { get; set; } 6: publicbool 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: publicclass ClienteController : ApiController 2: { 3: privatereadonly List clientes = new List() 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 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: publicclass RouteConfig 2: { 3: publicstaticvoid 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: protectedvoid 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 clientesh1> 3: <hr/> 4: <tableid="tblData"> 5: <thead> 6: <tr> 7: <th>Cliente Idth> 8: <th>Nombreth> 9: <th>Emailth> 10: <th>Estadoth> 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: 2:

6. Creando la plantilla

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

1:

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:

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.

comments powered by Disqus