[ASP.NET] jQuery Templates
En el blog de Scoot hay un extenso artículo sobre esta nueva contribución de Microsoft a esta fantástica librería como es jQuery.
Me voy a centrar en este artículo en las templates de cliente:
¿Que són?
Pues digamos que es como una mezcla de código javascript y HTML que nos permiten generar código HTML a través de un objeto o array de objetos javascript, algo como esto:
<script id="productTemplate" type="text/html">
<div>
Product Id: {{= id }} <br />
Title: {{= title }} <br />
Description: {{= description }} <br />
Price: € {{= price }}
</div>
</script>
En este caso el objeto que vamos a represnetar (Product) tiene 4 propiedades (id, title, description, price) que están representadas dentro de los corchetes.
En el ejemplo que os voy a mostrar, los datos se están consumiendo de un servicio REST desarrollado con WCF.
Lo primero es la página aspx:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>JQuery</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>How to use jQuery Templates</h2>
<h1>List of Products</h1>
<div id="productsContainer">
</div>
<script id="productTemplate" type="text/html"> 1:
2: <div>
3: Product Id: {{= id }} <br />
4: Title: {{= title }} <br />
5: Description: {{= description }} <br />
6: Price: € {{= price }}
7: </div>
</script>
<br/>
<br/>
<input id="btnGetProducts" type="button" value="Get Products from WCF Service!!!" />
</asp:Content>
Una vez que tenemos la página, añadimos en la master la referencia a los scripts:
<script src="../../Scripts/jquery-1.4.2.js" type="text/javascript" />
<script src="../../Scripts/Common.js" type="text/javascript" />
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript" />
La librería jquery.tmpl.js la podéis descargar de aquí: http://github.com/jquery/jquery-tmpl
Ahora vamos con el código del fichero Common.js:
var serviceUrl = 'http://localhost:49766/ProductService.svc';
var getAllMethod = '/products/json';
var postMethod = '/products/json';
var deleteMethod = '/products/{id}/json';
$(document).ready(function() {
$('#btnGetProducts').click(getProducts);
});
function getProducts() {
var noCache = Date();
$.getJSON(serviceUrl + getAllMethod, { 'noCache': noCache }, function process(details) {
details.length = details.length ? details.length : 0;
$('#opProducts').children().remove();
if (details.length == 0) {
alert('No Products!!!');
}
else {
alert(details);
$("#productTemplate").render(details).appendTo("#productsContainer");
}
});
}
Lo interesante en este código es esta línea:
$("#productTemplate").render(details).appendTo("#productsContainer");
donde haciendo uso del método render al que le pasamos el array de objetos que nos devuelve el servicio REST, para que lo renderize con la template y lo añada al div productsContainer dando como resultado lo siguiente:
Y todo esto desde la parte cliente ¿No os parece acojonante?
Un saludo y atentos al siguiente ;)