Agenda
• Basics• template tags, template composition, wrapped
templates, remote templates, template items
• jQuery Templates + Web Forms• jQuery Templates + MVC• jQuery Templates + WCF Service
Background
• Created by Microsoft ASP.NET Team● Feedback from jQuery Core Team● Heavy community involvement
• Official jQuery Plugin● Downloadable from jQuery.com ● Documentation at api.jQuery.com
• Currently Beta
Why jQuery Templates?
● Context – A user loses context whenever there is a postback.
● Performance – You can page and sort data retrieved from the server without reloading entire page.
● Interactivity – You can create highly interactive client-side web applications.
How to Get jQuery Templates
Download from:● jQuery.com
• http://api.jquery.com/category/plugins/templates/
● Github.com• https://github.com/jquery/jquery-tmpl
● ASPNETCDN.com (Recommended)• http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js
● NuGet.org (Recommended)• Install-Package jQuery.Templates
Basics
Walkthrough: Using templates to display a list of products
Template Tags
● {{tmpl}} – Used for template composition. ● {{wrap}} – Used for wrapped templates. ● {{each}} – Used to iterate through a collection.● {{if}} – Used to conditionally display template content.● {{else}} – Used with {{if}} to conditionally display template content.● {{html}} – Used to display the value of an HTML expression without encoding the value. Using ${…}
or {{= }} performs HTML encoding automatically.● {{= }}-- Used in exactly the same way as ${…}.● {{! }} – Used for displaying comments. The contents of a {{!...}} tag are ignored
Template Tags
Walkthrough: Using {{if}} and {{each}}
Template Composition
Walkthrough: Building one template from multiple templates with the {{tmpl}} tag.
Remote Templates
Walkthrough: Loading a remote template with an Ajax call.
● Tip: Don’t use remote templates – use user controls or partials instead
Wrapped Templates
Walkthrough: Transforming a list of products with a wrapped template
Template Items
● data – The data associated with the Template Instance. For example, a product.● tmpl – The template associated with the Template Instance.● parent – The parent template item if the template is nested.● nodes – The HTML content of the template.● calls – Used by {{wrap}} template tag.● nest – Used by {{tmpl}} template tag.● wrap – Used to imperatively enable wrapped templates.● html – Used to filter content from a wrapped template. ● update – Used to re-render a template item.
Template Items
Walkthrough: Swapping a view template and edit template by using update()
Templates + Web Forms
Walkthrough: Using jQuery templates with a ListView control.
Templates + MVC
Walkthrough: Using jQuery templates with an MVC controller action.
Templates + WCF Data Services
Walkthrough: Displaying Netflix data with templates.
Templates + WCF Data Services
Walkthrough: Creating a simple CRUD application using templates + WCF Data Services.
Additional Resources
• Stephen Walther’s Blog ● http://StephenWalther.com
• jQuery Documentation● http://api.jquery.com/category/plugins/templates/
• Boris Moore’s Blog● http://www.BorisMoore.com/
Download the Sample Code
Visit Stephen Walther’s blog to download the sample code for this talk:
● http://StephenWalther.com
Website: http://Superexpert.com Email: [email protected]: 800 691 - 7140
Your Feedback is Important
Please fill out a session evaluation form.
Thank you!