Transcript Spring 2009 Connections Conference Template

Using jQuery Templates with
ASP.NET
Stephen Walther
Superexpert.com
[email protected]
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: [email protected]
Phone: 800 691 - 7140
Your Feedback is Important
Please fill out a session evaluation form.
Thank you!