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

[ASP.NET] Condicionales y ciclos en JSRender.

Anteriormente 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 y tener una lógica más completa en lugar de solo mostrar datos, y esas dos características son: condicionales y filtros.

Para este ejemplo vamos a seguir utilizando el ejemplo del anterior post, así que te recomiendo le des una mirada primero, te dejo el link:

Cargando datos con WebAPI y JSRender

Lo primero que haremos es añadir una nueva clase al modelo llamada Ciudad:

1: publicclass Ciudad 2: { 3: publicint CiudadId { get; set; } 4: publicstring Nombre { get; set; } 5: }

Ahora, vamos a suponer que nuestros clientes han visitado algunas ciudades, así que añadimos una nueva propiedad a la clase Cliente quedando:

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: public List Ciudades { get; set; } 8: }

Ahora en nuestro controlador modificamos la lista de clientes y le añadimos algunas ciudades a algunos clientes:

1: privatereadonly List clientes = new List() 2: { 3: new Cliente{ ClienteId = 1, 4: Nombre = "Julio Avellaneda", 5: Email = "julito_gtu@hotmail.com", 6: Activo = true, 7: Ciudades = new List(){ 8: new Ciudad { CiudadId = 1, Nombre = "Bogotá"}, 9: new Ciudad { CiudadId = 2, Nombre = "Cali"}, 10: new Ciudad { CiudadId = 3, Nombre = "Medellin"} 11: }}, 12: new Cliente{ ClienteId = 2, Nombre = "Juan Ruiz", Email = "juanruiz@hotmail.com", Activo = true}, 13: new Cliente{ ClienteId = 3, Nombre = "Nathalia Torres", Email = "nata@hotmail.com", Activo = false}, 14: new Cliente{ ClienteId = 1, 15: Nombre = "Oscar Torres", 16: Email = "oscart@hotmail.com", 17: Activo = false, 18: Ciudades = new List(){ 19: new Ciudad { CiudadId = 1, Nombre = "Bogotá"}, 20: new Ciudad { CiudadId = 2, Nombre = "Cali"}, 21: new Ciudad { CiudadId = 3, Nombre = "Medellin"}, 22: new Ciudad { CiudadId = 3, Nombre = "Pereira"}, 23: }}, 24: new Cliente{ ClienteId = 5, Nombre = "Juan Ruiz", Email = "juanruiz@hotmail.com", Activo = true}, 25: new Cliente{ ClienteId = 6, Nombre = "Nathalia Torres", Email = "nata@hotmail.com", Activo = false}, 26: new Cliente{ ClienteId = 1, 27: Nombre = "Sandra Aleman", 28: Email = "s.aleman@hotmail.com", 29: Activo = true, 30: Ciudades = new List(){ 31: new Ciudad { CiudadId = 1, Nombre = "Bogotá"}, 32: new Ciudad { CiudadId = 2, Nombre = "Cali"}, 33: }}, 34: new Cliente{ ClienteId = 8, Nombre = "Juan Ruiz", Email = "juanruiz@hotmail.com", Activo = true}, 35: new Cliente{ ClienteId = 9, Nombre = "Nathalia Torres", Email = "nata@hotmail.com", Activo = false} 36: };

Ahora,la idea es realizar dos cambios en la plantilla:

  1. Si un cliente esta activo la fila será de un color naranja (o algo parecido) y si no está activo debe ser gris.

  2. Si un cliente ha visitado ciudades en la última celda de la fila las listaremos, de lo contrario se colocará el texto“-”.

JSRender nos provee dos funciones, la primera es if para evaluar una condición y la segunda es for para recorrer una colección (si muy al estilo de C#), entonces modificando un poco la definición de la plantilla para cumplir con los dos requerimientos tenemos:

1:

Como se puede observar, lo primero que hacemos es evaluar el valor del campo Activo con {{if Activo}} que devuelve true/false según sea, también es posible hacer comparaciones como igual a, mayor o menor, luego para las ciudades de nuevo tenemos un if pero observen el uso del for en {{for Ciudades}}, allí lo que hacemos es recorrer cada elemento dentro de Ciudades y vamos mostrando el nombre. Finalmente si ejecutamos lo que tenemos es algo como (no se fijen mucho en el diseño ya que no es lo mío):

image

Espero les sea de utilidad el post, les dejo el código del ejemplo, saludos!

Descarga el ejemplo!

comments powered by Disqus