Using jQuery Templates with ASP.NET

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

2. Agenda • Basics • template tags, template composition, wrapped templates, remote templates, template items • jQuery Templates + Web Forms • jQuery Templates + MVC • jQuery Templates + WCF Service

3. 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

4. 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.

5. 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

6. Basics Walkthrough:Using templates to display a list of products

7. 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

8. Template Tags Walkthrough:Using {{if}} and {{each}}

9. Template Composition Walkthrough:Building one template from multiple templates with the {{tmpl}} tag.

10. Remote Templates Walkthrough:Loading a remote template with an Ajax call. • Tip: Don’t use remote templates – use user controls or partials instead

11. Wrapped Templates Walkthrough:Transforming a list of products with a wrapped template

12. 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.

13. Template Items Walkthrough:Swapping a view template and edit template by using update()

14. Templates + Web Forms Walkthrough:Using jQuery templates with a ListView control.

15. Templates + MVC Walkthrough:Using jQuery templates with an MVC controller action.

16. Templates + WCF Data Services Walkthrough:Displaying Netflix data with templates.

17. Templates + WCF Data Services Walkthrough:Creating a simple CRUD application using templates + WCF Data Services.

18. 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/

19. Download the Sample Code Visit Stephen Walther’s blog to download the sample code for this talk: • http://StephenWalther.com

20. Website: http://Superexpert.com Email: Stephen.Walther@superexpert.com Phone: 800 691 - 7140

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