Leandro Boffi

Since the last march ASP.NET AJAX Preview 4 is available at codeplex. I’m getting in love with this framework, because I think that it’s taking the right direction that ajax should take. One of my favorite features of ASP.NET AJAX 4.0 is client templates and that feature is the one that I will show in this post.

Client templates allows you to transform any piece of html in your page into a template to display data, just like an asp.net repeater control, but client-side. This functionality is encapsulated into a client-side control called DataView (Sys.UI.DataView), let me show you how to use it.

The first thing to do is to create an ajax-friendly web service to use as data source, you can do that using an standard asmx asp.net webservice with the ScriptService attribute (System.Web.Script.Services.ScriptServiceAttribute) or using a WCF service with the enableWebScript behavior (System.ServiceModel.Description.WebScriptEnablingBehavior). I choose a the second choice, I explain how to do it in this post.

Imagine a geek quotes application, and this our QuotesService, It has just one method that returns all the quotes from the data base using a repository, nothing fancy, this is how it looks like:

We will consume this service from a plain html page, just to show and to be sure that no server-side work is required. The first thing to do is to include the ajax framework scripts and the web service references. If you are working with ASP.NET MVC you can do it in the same way, on the other hand if you are using ASP.NET Webforms you should use the ScriptManager control.

Now let’s create the html template for the data by using a regular table html tag:

Note that I’ve set the quotesView id for the tbody tag, that’s because it will be our DataView control. I’ve also set the class attribute value to “sys-template”, this is required to allow the DataView control to know that this is a template. Inside of each td tag I’ve set the bindings using this format: “{{ PropertyName }}”, that’s what the DataView control will replace with our data, just like an asp.net data binding, but client side.

To set the data we just need to add three lines of javascript: the one how creates the DataView control by using the $create method of asp.net ajax, the one how calls the service, and the one how sets the data using the DataView.set_data(data) method.

The pageLoad() function is raised by the Microsoft Ajax Framework when the page is ready, so we run it, and that’s all, it works, this is how it looks like:

Client templates looks good isn’t? but, guess what, It gets better, there is a way to do this without write any line of javascript, just in a declarative way.

XHML allows us to extend it, and that’s what we do in the body tag, we add two namespaces: sys and dataview. Using these namespaces we set some attributes in our standard html tbody tag, providing information that the DataView control will use to automatically do what we did before writing javascript.

Note that in the dataprovider attribute we’ve set the URI of our WCF service, and as fetchoperation the name of the service operation, if we need to provide parameters we can do it using the fetchparameters attribute, just like this: dataview:fetchparameters="{{ {parameterName:parameterValue} }}".

So that’s all! Easy, right? You can download the source code here.

Disclaimer: This post is based on ASP.NET AJAX 4.0 Preview 4, it could have differences with the final version.