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 Windows application, especially ASP.NET applications. That is part of the reason why so many of the new technologies that come out of Microsoft are related to data and databases. Even seemingly non-data-based technologies are emerging with data access features.

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

Using AJAX calls behind the scenes, the browser dynamically builds and renders the page, and it can even respond to data changes without a postback. Microsoft had two primary goals when designing client templates: performance and simplicity. I m happy to report that they achieved 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 quite fast (plenty quick enough to present the user with a responsive UI). And once you have the data service defined and ready to use, it is almost trivial to create the interface that binds to the data and displays it.

Let s take a look at a simple example. I m going to use an ADO.NET data service called AdventureWorksAdo.svc, which provides access to the SQL Server 2005 version of the AdventureWorks sample database. (This database became far more complex in its SQL Server 2008 version, based on entities and other high falutin features that are irrelevant to this example. I ll keep things simple here.) It s not directly relevant to this example, but the service is based on an entity framework data model of the database. The page will display details about AdventureWorks products. To make it painfully clear that 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 I reference the AJAX 4.0 script files, here stored in a script subdirectory:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

<title>ClientTemplate</title> <link href="styles/adventureworks.css" rel="stylesheet"

type="text/css" /> <script type="text/javascript" src="script/MicrosoftAjax.js"></script>

Notice that, as of AJAX 4.0 Preview 3, client templates support is included in a separate JavaScript file. You can, of course, combine multiple script files using script combining. The next step is to create an instance of the new AJAX DataView client-side control, which acts somewhat like a datasource control in regular server-side ASP.NET. The code that sets this up is in an AJAX pageLoad function in the page. It specifies the ADO.NET data service 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 is an unordered list:

function pageLoad() { $create(Sys.UI.DataView,

{ dataSource: new Sys.Data.AdoNetDataSource(),

serviceUri: "AdventureWorksAdo.svc", query:

"Product?$filter=ProductSubcategory/ProductSubcategoryID

eq 1" }, {}, {}, $get("productListView")); // no

events or references, so empty bag } </script>

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

<li>{{ Name}} {{ parseFloat(ListPrice).localeFormat("C") }} </li> </ul> </div>

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

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

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

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

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

Comments

Plain text