Using jQuery Templates with ASP.NET

Stephen WaltherSuperexpert.com

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

• 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: Stephen.Walther@superexpert.comPhone: 800 691 - 7140

Your Feedback is Important

Please fill out a session evaluation form.

Thank you!