AJAX 4.0 Client Templates

Exploring ASP.NET & Web Development

AJAX 4.0 Client Templates

By Don Kiely

Data is king in just about any kind of Windowsapplication, especially ASP.NET applications. That is part of the reason why somany of the new technologies that come out of Microsoft are related to data anddatabases. Even seemingly non-data-based technologies are emerging with data accessfeatures.

The newest example of this trend is the latest previewrelease of AJAX 4.0, which is inching its way to a final release. Of severalnew data access features, probably none is more interesting than AJAX clienttemplates. Templates are a form of data binding on the client, in which thebrowser is able to directly bind user interface components to various types ofWeb services.

Using AJAX calls behind the scenes, the browserdynamically builds and renders the page, and it can even respond to datachanges without a postback. Microsoft had two primary goals when designingclient templates: performance and simplicity. I m happy to report that theyachieved both goals, admirably.

The data has to pass over the network to the client there s no getting around that but the rendering process seems to be quitefast (plenty quick enough to present the user with a responsive UI). And onceyou have the data service defined and ready to use, it is almost trivial tocreate the interface that binds to the data and displays it.

Let s take a look at a simple example. I m going to use anADO.NET data service called AdventureWorksAdo.svc, which provides access to theSQL Server 2005 version of the AdventureWorks sample database. (This databasebecame far more complex in its SQL Server 2008 version, based on entities andother high falutin features that are irrelevant to this example. I ll keepthings simple here.) It s not directly relevant to this example, but theservice is based on an entity framework data model of the database. The pagewill display details about AdventureWorks products. To make it painfully clearthat there is no server-side code in this example, I ll build the sample in an.html page rather than .aspx. First up is the page header info, where Ireference the AJAX 4.0 script files, here stored in a script subdirectory:

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   type="text/css" />

Notice that, as of AJAX 4.0 Preview 3, client templatessupport is included in a separate JavaScript file. You can, of course, combinemultiple script files using script combining. The next step is to create aninstance of the new AJAX DataView client-side control, which acts somewhat likea datasource control in regular server-side ASP.NET. The code that sets this upis in an AJAX pageLoad function in the page. It specifies the ADO.NET dataservice name (AdventureWorksAdo.svc) and the query used to extract the data,here retrieving all products with a ProductSubcategoryID of 1 (Mountain Bikes).The data will be bound to the productListView, which you ll see in a moment isan unordered list:

 function pageLoad() { $create(Sys.UI.DataView,    { dataSource: new Sys.Data.AdoNetDataSource(),   serviceUri: "AdventureWorksAdo.svc",query:    "Product?$filter=ProductSubcategory/ProductSubcategoryIDeq 1" }, {}, {}, $get("productListView")); // noevents or references, so empty bag }

The interesting part is where you define the HTML to whichthe data is bound. Here I m using an unordered list within a div. The code hereuses two template fields, one each for the Name and ListPrice fields. Butnotice that you can write JavaScript in the template, here to format the listprice as currency. That is one of the big benefits of using templates:

 {{ Name}} {{parseFloat(ListPrice).localeFormat("C") }}

Notice the sys-template style class applied to the ulelement. Here is the definition from the styles file:

.sys-template { display: none; visibility: hidden; }

This prevents the user from seeing the templatesthemselves in the page before the browser has a chance to render the data intheir place. That s all there is to using client templates in an AJAXifiedpage. You can go way beyond this simple example, of course. Microsoft hasobviously used its collective experience with data access components both thehits and misses to come up with a nice feature for the next release of AJAX.

Security should be a concern, and Microsoft has addressedthis in the way that they implemented templates. There is no stringconcatenation behind the scenes; the code uses only parameterized queries. But onlytime will tell if this is sufficient to prevent, or slow down, injectionattacks. One thing bothers me about the feature, and this probably comes frommy lingering pain from classic ASP applications: the intermixing of code andmarkup. It s not quite as bad as server-side scripting in an ASP page, but itcertainly harkens back to those bad old days. But this is probably not aserious shortcoming in client templates, and it is certainly a new featureworth exploring.

Don Kiely, MVP,MCSD, is a senior technology consultant, building custom applications as wellas providing business and technology consulting services. His development workinvolves tools such as SQL Server, Visual Basic, C#, ASP.NET,and Microsoft Office. He writes regularly for several trade journals, andtrains developers in database and .NETtechnologies. You can reach Don at mailto:[email protected]and read his blog at http://www.sqljunkies.com/weblog/donkiely/.