JQT is a new client templating API for jQuery.

(The goal of this blog entry is to provide you with enough information to start working with .net.) 

The jQuery Templates plugin was developed by the Microsoft ASP.NET team in collaboration with the open-source jQuery team.
when you create new ASP.NET Web Forms and ASP.NET MVC projects with VS 2010, the core jQuery library is now automatically added to your project.

jQuery Template Support:-

Client-side templates enable jQuery developers to easily generate and render HTML UI on the client.  Templates support a simple syntax that enables either developers or designers to declaratively specify the HTML they want to generate.  Developers can then programmatically invoke the templates on the client, and pass JavaScript objects to them to make the content rendered completely data driven.  These JavaScript objects can optionally be based on data retrieved from a server.

How do jQuery Templates work?


 The jQuery Template is applied to data objects or arrays and is rendered into the HTML using jQuery functions for DOM manipulation. The data objects/arrays are JSON data format. For those that don’t know, JSON stands for JavaScript Object Notation and is very lightweight data-interchange format. JQuery Template is for JSON data same as XSLT is for XML data.

jQuery Client Templates:-

You create client-side jQuery templates by embedding content within a <script type=”text/html”> tag.  For example, the HTML below contains a <div> template container, as well as a client-side jQuery “contactTemplate” template (within the <script type=”text/html”> element) that can be used to dynamically display a list of contacts:

The {{= name }} and {{= phone }} expressions are used within the contact template above to display the names and phone numbers of “contact” objects passed to the template.

We can use the template to display either an array of JavaScript objects or a single object. The JavaScript code below demonstrates how you can render a JavaScript array of “contact” object using the above template. The render() method renders the data into a string and appends the string to the “contactContainer” DIV element.

When the page is loaded, the list of contacts is rendered by the template.  All of this template rendering is happening on the client-side within the browser:

More info is available on  WebSpace