A quick introduction of using jTemplate against AJAX JSON data

 

jQuery has a few template plugins, the most widely accepted is jTemplate. jTemplate is a JQuery template engine that works with AJAX and JSON data. We can use jTemplate in the following steps:

First, download the JQuery JavaScript file and reference it in your web page:

1. <scrip src="scripts/jQuery-jtemplates.min.js" type="text/javascript"></script>

<scrip src="scripts/jQuery-jtemplates.min.js" type="text/javascript"></script>

Second, define your template:

1. <script type="text/html" id="TemplateResultsTable">  
2. {#template MAIN}  
3. <table  cellpadding="10" cellspacing="0">  
4.   <tr>  
5.     <th>Artist</th>  
6.     <th>Company</th>  
7.     <th>Title</th>  
8.     <th>Price</th>  
9.   </tr>  
10.   {#foreach $T.d as CD}  
11.     {#include ROW root=$T.CD}  
12.   {#/for}  
13. </table>  
14. {#/template MAIN}  
15. {#template ROW}  
16. <tr class="{#cycle values=['','evenRow']}">  
17.   <td>{$T.Artist}</td>  
18.   <td>{$T.Company}</td>  
19.   <td>{$T.Title}</td>  
20.   <td>{$T.Price}</td>  
21. </tr>  
22. {#/template ROW}  
23. </script> 

Please note that we define the template in a script block, which can be accessed by its id; also, $T is a reference to the data item passed to the template.

Third, call your web service in your script, designate the template and instantiate it with data.

1. $(document).ready(function() {  
2.           $.ajax({  
3.               type: "POST",  
4.               url: "CDCatalog.asmx/GetCDCatalog",  
5.               data: "{}",  
6.               contentType: "application/json; charset=utf-8",  
7.               dataType: "json",  
8.               success: function(msg) {  
9. //instantiate a template with data
10.                   ApplyTemplate(msg);   
11.               }  
12.           });  
13.       });  
14. function ApplyTemplate(msg) {  
15.       $(‘#Container’).setTemplate($("#TemplateResultsTable").html());  
16.       $(‘#Container’).processTemplate(msg);  
17. }

For more info please visit Xun Ding’s excellent article Using jQuery with ASP .NET

About these ads