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">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>ClientTemplate</title>
<link href="styles/adventureworks.css" rel="stylesheet"
type="text/css" /> <script
type="text/javascript" src="script/MicrosoftAjax.js"></script>
<script type="text/javascript" src="script/MicrosoftAjaxTemplates.js"></script>
<script type="text/javascript" src="script/MicrosoftAjaxAdoNet.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:
<script type="text/javascript">
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:
<div id="top"> <ul
id="productListView" class="float master sys-template">
<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:donkiely@computer.org
and read his blog at http://www.sqljunkies.com/weblog/donkiely/.