Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Microsoft JQuery Templates, ejemplo práctico

Ahora que Microsoft JQuery Templates ya es un plugin oficial de JQuery, voy a mostrar un ejemplo sencillo, sobre como ocuparlo.  Este Plugin entrega una facilidad increíble que va a estar incluido en JQuery 1.5.

Mira este artículo para estar más informado:

http://stephenwalther.com/blog/archive/2010/10/04/microsoft-templates-included-in-jquery-1-5.aspx

Entonces , veamos el ejemplo, la idea es generar asíncronamente las siguiente tablas:

 image

Para esto vamos a ir por parte, primero

La creación de la base de datos

Vamos a tener la siguiente definición de tabla:

image

Los datos en la tabla son los siguientes:

image

Con el correspondiente Contexto en Linq:

image

Creación del Servicio Web

Ya hemos creado este tipo de servicios web, vamos a devoler un objeto JSON, para esto vamos  a crear primero el WebService:

  <WebMethod()> _

    Public Function GetCarreras() As List(Of Carrera)

        Dim contexto As New ModeloDataContext

        Dim lista = From p In contexto.Carreras Order By p.Nombre Ascending

        Return lista.ToList

    End Function

Llamada al servicio: Pagina demo.htm

La llamada a este  servicio web, la vamos a hacer mediante JQuery, para esto, utilizamos el código que ya nos es familiar en el cual hacemos:

  1. Llamada a la librería jQuery
  2. Llamada a libería JQuery Templates
  3. Llamada a WebService GetCarreras
  4. Adjuntar mediante la plantilla carTemplate, la colección que retornó el WS (carreras) a el div carreraList

<script type="text/javascript"

src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script
>

 

<script type="text/javascript">

       $(document).ready(function() {

          $("#Boton").click(function(){

           $.ajax({

             type: "POST",

             url: "WSMobile.asmx/GetCarreras",

             data: "{}",

             contentType: "application/json; charset=utf-8",

             dataType: "json",

             success: function (response) {

               var carreras= response.d;

               $("#carTemplate").tmpl(carreras).appendTo("#carrerasList");

             }, 

               failure: function (msg) {

                   alert(msg);

               }

 

           });

        });

       });

    

</script>

El Div carrerasList no es más que un div normal de la siguiente manera:

<div id="carrerasList"></div> 

La plantilla carTemplates, corresponde a el Dom que hará de sección repetitiva por cuantas objetos carrera se obtengan de la colección carreras. Esta plantilla debe estar dentro del tag <script id="carTemplate" type="text/x-jquery-tmpl">

Plantilla completa

  <script id="carTemplate" type="text/x-jquery-tmpl">

     <table style="width:38%;" border="1px">

        <tr BgColor="#CCFFCC">

            <td style="width:25%;">Carrera</td>

            <td style="width:25%;">Nombre</td>

            <td style="width:25%;">Semestres</td>

            <td style="width:25%;">Foto</td>

        </tr>

        <tr>

            <td>${IdCarrera}</td>

            <td>${Nombre}</td>

 

            <td BgColor="{{if (Semestres >8)}}

                             #BBCCAA

                        {{else}}

                              #00EE11

                        {{/if}}">

            ${Semestres}</td>

            <td><img src="img/${Foto}" /></td>

        </tr>

     </table>

     <p>

   </script>

La forma de la tabla sería:

image

Como puedes ver tengo una tabla con cierto formato dentro de la plantilla, esta tabla se repetirá tantas veces como carreras existan en la BD. Es una muy sencilla forma de Iterar y generar DOM Dinámico.

También incluí los una sentencia IF que es soportada por las plantillas, como puedes ver, realiza el cambio de fondo de la celda en donde está el semestre, si es que la carrera dura más de 8 semestres.

 

Así de fácil, espero que te sirva:
Gonzalo

Posted: 6/11/2010 13:45 por Gonzalo Perez | con 10 comment(s) |
Comparte este post:

Comentarios

Eduardo ha opinado:

Hola, estoy trabajando con este plugin y me he dado cuenta de que al cargar la página si ves el código fuente no se muestran los datos generados, tan sólo el template.

Pero como podría hacer si necesito acceder a esos datos, en tu ejemplo que pasaría si agrego un botón a esa tabla para editar datos.

He tratado de recorrer el div dónde supuestamente están los datos pero sin exito.

Espero me haya dejado entender.

Saludos y buen post!

# November 12, 2010 4:54 PM

Gonzalo Perez ha opinado:

Hola Eduardo, que tal?

Tienes razón en que no va se mostrar el código en "ver código fuente", lo que puedes hacer es asignarle un Id a cada tabla, para que puedas accederla desde jquery con $("#tabla1"), puedes generar dinàmicamente el nombre :

id="tabla${IdCarrera}"

en la plantilla.

Saludos,

Gonzalo

# November 12, 2010 8:53 PM

Rodrigo Olivares ha opinado:

Excelente! Hace tiempo que esperaba esto, y que se incorpore oficialmente a jquery 1.5 mejor aun. Pregunta, también Existe funcionalidad para edición de datos o es readonly ?

# November 13, 2010 7:46 PM

Gonzalo Perez ha opinado:

Hola Rodrigo!

Que gusto verte por acá :), para la funcionalidad de edición está el concepto de DataLinker que es otro plugin para JQuery construido por Microsoft :)

# November 13, 2010 10:44 PM

Rodrigo Olivares ha opinado:

Gonzalo, puedes subir o mandarme el codigo de este ejemplo porfa?

# November 15, 2010 8:23 PM

Gonzalo Perez ha opinado:

Hola Rodrigo, a que correo??

# November 16, 2010 5:51 AM

Rodrigo Olivares ha opinado:

r.olivares.rosales at gmail.com

gracias!

# November 16, 2010 3:37 PM

Nova ha opinado:

Estoy incursionando en este plug-in y viendo que le faltan algunas cosas, nada que no se le pueda poner, como renderizar el template por ajax de forma simple.

para ver lo generado por el dom les recomiendo el firebug para firefox porque el resto de navegadores da lastima en sus intentos de parecersele, saludos  

# December 1, 2010 6:05 PM

Chalalo Land ha opinado:

Ya se acaba el año, y quería hacer un resumen, no están todos los artículos, si no los que más rescato

# December 31, 2010 2:16 AM