Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com

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 ● Github.com ● ASPNETCDN.com (Recommended) ● 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 ● jQuery Documentation ● Boris Moore’s Blog ●

Download the Sample Code Visit Stephen Walther’s blog to download the sample code for this talk: ●

Website: Phone:

Your Feedback is Important Please fill out a session evaluation form. Thank you!