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

Posted on Actualizado enn


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 comentarios sobre “[ASP.NET] ASP.NET y las Microsoft jQuery Templates I – Introducción

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

    Jquery | TagHall escribió:
    02/29/2012 en 11:16

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

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

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

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:04

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

    Resumen Post 2012 « MVPs de LATAM escribió:
    01/04/2013 en 12:57

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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s