[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:  public class Ciudad
   2:  {
   3:      public int CiudadId { get; set; }
   4:      public string 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:  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:      public List<Ciudad> Ciudades { get; set; }
   8:  }

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

   1:  private readonly List<Cliente> clientes = new List<Cliente>()
   2:  {
   3:      new Cliente{ ClienteId = 1, 
   4:          Nombre = "Julio Avellaneda",
   5:          Email = "julito_gtu@hotmail.com", 
   6:          Activo = true,
   7:          Ciudades = new List<Ciudad>(){
   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<Ciudad>(){
  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<Ciudad>(){
  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:  <script type="text/x-jsrender" id="DataTemplate">
   2:          {{if Activo}}
   3:              <tr class='active'><td>{{:ClienteId}}</td><td>{{:Nombre}}</td><td>{{:Email}}</td><td>{{:Activo}}</td>
   4:                  <td>
   5:                      {{if Ciudades}}
   6:                          {{for Ciudades}}
   7:                              <p>{{:Nombre}}</p>
   8:                          {{/for}}
   9:                      {{else}}
  10:                          <p>-</p>
  11:                      {{/if}}
  12:                  </td>
  13:              </tr>
  14:          {{else}}
  15:              <tr class='disable'><td>{{:ClienteId}}</td><td>{{:Nombre}}</td><td>{{:Email}}</td><td>{{:Activo}}</td>
  16:                  <td>
  17:                      {{if Ciudades}}
  18:                          {{for Ciudades}}
  19:                              <p>{{:Nombre}}</p>
  20:                          {{/for}}
  21:                      {{else}}
  22:                          <p>-</p>
  23:                      {{/if}}
  24:                  </td>
  25:              </tr>
  26:          {{/if}}
  27:      </script>

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!

You may also like...

2 Responses

  1. October 22, 2012

    [...] [ASP.NET] Condicionales y filtros en JSRender [...]

  2. December 19, 2012

    [...] [ASP.NET] Condicionales y ciclos en 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: