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:
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:
Los datos en la tabla son los siguientes:
Con el correspondiente Contexto en Linq:
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:
-
Llamada a la librería jQuery
-
Llamada a libería JQuery Templates
-
Llamada a WebService GetCarreras
-
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:
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