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 http://StephenWalther.com jQuery Documentation ● http://api.jquery.com/category/plugins/templates/ http://api.jquery.com/category/plugins/templates/ Boris Moore’s Blog ● http://www.BorisMoore.com/ 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 http://StephenWalther.com

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

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