[ASP.NET] ASP.NET y las Microsoft jQuery Templates I – Introducción

Una de los plugins que más me gustan de jQuery son las Microsoft jQuery Templates, y en resumen con este plugin lo que podemos realizar es crear HTML dinámico en el cliente, en este primer post voy a mostrar un ejemplo bastante sencillo para entender cual es la filosofía de este plugin y como trabajarlo, pero vendrán al menos dos artículos más en los cuales vamos a ir extendiendo y complementando este tema.

Así que iniciemos:

1. Archivos JavaScript

Para poder trabajar con estos templates, debemos agregar al menos dos archivos JavaScript, el primero será el plugin de jQuery y e segundo será el archivo propio del plugin, y por supuesto referenciarlo en nuestra página:

   1:  <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
   2:  <script src="js/jquery.tmpl.js" type="text/javascript"></script>

2. Definir el contenedor

La idea de este ejemplo es mostrar información sobre departamentos y sus municipios, para ello vamos a utilizar una tabla, pero en este caso solo definimos la tabla y la primera fila que contiene el nombre de la columna:

   1:  <table border="1" cellspacing="2" cellpadding="2" id="tableDepartamentos">
   2:          <tr>
   3:              <td>Cod Departamento</td>
   4:              <td>Departamento</td>
   5:              <td>Cod Municipio</td>
   6:              <td>Municipio</td>
   7:          </tr>
   8:  </table>

3. Definir la plantilla

Ahora es momento de definir la plantilla, esta es en resumen el HTML que se va a generar, nótese que para definir el dato que se va a enlazar se utiliza ${nombre}, además la definimos en el head dentro de las etiquetas script, donde su type debe ser: text/x-jquery-tmpl

   1:  <script type="text/x-jquery-tmpl" id="TemplateDepto">
   2:      <tr>
   3:          <td>${CodDep}</td>
   4:          <td>${Dep}</td>
   5:          <td>${CodMun} </td>
   6:          <td>${Mun}</td>
   7:      </tr>
   8:  </script>

4. Enlazando datos

Y llego el momento de enlazar datos a la plantilla, esto lo realizamos con código cliente, y en este primer post vamos a tener datos fijos (en el siguiente vamos a usar datos desde una base de datos, usaremos Entity Framework, Linq y plantillas T4), entonces el código sería:

   1:  <script language="javascript" type="text/javascript">
   2:      $(document).on("ready", function(){
   3:          var datos = [
   4:               { CodDep: "05", Dep: "Antioquia", CodMun: "05001", Mun: "Medellín" },
   5:               { CodDep: "05", Dep: "Antioquia", CodMun: "05002", Mun: "Abejorral" },
   6:               { CodDep: "05", Dep: "Antioquia", CodMun: "05004", Mun: "Abriaquí" },
   7:               { CodDep: "05", Dep: "Antioquia", CodMun: "05021", Mun: "Alejandría" }
   8:           ];
   9:          $("#TemplateDepto").tmpl(datos).appendTo("#tableDepartamentos");
  10:      });
  11:  </script>

Lo interesante del código, primero validamos que la página este lista (línea 2), recuerda que desde jQuery 1.7 utilizamos on (si no lo sabes mira este link), luego declaramos la variable datos la cual contiene 4 registros (línea 3 – 8) para hacerlo sencillo, y finalmente en la línea 9 a la plantilla (ver paso 3) utilizando el método tmpl le asignamos la fuente de datos y se lo añadimos a nuestra tabla (ver paso 2)

Una vez listo, al ejecutar el ejemplo vamos a tener algo así:

Imagen1

Espero les haya gustado el post, como les comente antes en el próximo artículo vamos a realizar otro ejemplo un poco más complicado, ya que los datos los vamos a traer desde una base de datos, vamos a utilizar Entity Framework, generaremos unas plantillas T4, usaremos Linq para realizar consultas y un WebService para comuniciar el cliente con el servidor…

Como siempre les dejo el ejemplo para su descarga:

Descarga el ejemplo!

6 comments

Leave a Reply

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