![Page 2: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/2.jpg)
Agenda
• Basics• template tags, template composition, wrapped
templates, remote templates, template items
• jQuery Templates + Web Forms• jQuery Templates + MVC• jQuery Templates + WCF Service
![Page 3: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/3.jpg)
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
![Page 4: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/4.jpg)
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.
![Page 5: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/5.jpg)
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
![Page 6: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/6.jpg)
Basics
Walkthrough: Using templates to display a list of products
![Page 7: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/7.jpg)
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
![Page 8: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/8.jpg)
Template Tags
Walkthrough: Using {{if}} and {{each}}
![Page 9: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/9.jpg)
Template Composition
Walkthrough: Building one template from multiple templates with the {{tmpl}} tag.
![Page 10: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/10.jpg)
Remote Templates
Walkthrough: Loading a remote template with an Ajax call.
● Tip: Don’t use remote templates – use user controls or partials instead
![Page 11: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/11.jpg)
Wrapped Templates
Walkthrough: Transforming a list of products with a wrapped template
![Page 12: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/12.jpg)
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.
![Page 13: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/13.jpg)
Template Items
Walkthrough: Swapping a view template and edit template by using update()
![Page 14: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/14.jpg)
Templates + Web Forms
Walkthrough: Using jQuery templates with a ListView control.
![Page 15: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/15.jpg)
Templates + MVC
Walkthrough: Using jQuery templates with an MVC controller action.
![Page 16: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/16.jpg)
Templates + WCF Data Services
Walkthrough: Displaying Netflix data with templates.
![Page 17: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/17.jpg)
Templates + WCF Data Services
Walkthrough: Creating a simple CRUD application using templates + WCF Data Services.
![Page 18: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/18.jpg)
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/
![Page 19: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/19.jpg)
Download the Sample Code
Visit Stephen Walther’s blog to download the sample code for this talk:
● http://StephenWalther.com
![Page 20: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/20.jpg)
Website: http://Superexpert.com Email: [email protected]: 800 691 - 7140
![Page 21: Using jQuery Templates with ASP.NET Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649dd95503460f94ace30b/html5/thumbnails/21.jpg)
Your Feedback is Important
Please fill out a session evaluation form.
Thank you!