[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!

You may also like...

6 Responses

  1. January 26, 2012

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

  2. February 29, 2012

    [...] "jqmodal", embeddedHeight: "400", embeddedWidth: "425", themeCSS: "" }); . [ASP.NET] ASP.NET y las Microsoft jQuery Templates I … . [ASP.NET] ASP.NET y las [...]

  3. October 6, 2012

    [...] 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 [...]

  4. October 10, 2012

    [...] 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 [...]

  5. December 19, 2012

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

  6. January 4, 2013

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

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: