11.5. DataView
One of the coolest controls in this release is the new DataView control. DataView allows you to easily define a template that can be bound to various types of data or services. WPF/Silverlight developers might notice some similarity with the binding syntax.
11.5.1. XHTML-Compliant?
Microsoft wants you to know that it has made great efforts to ensure that declarative binding is XHTML-compliant. I'm not sure this is strictly true, but you will see a very clean way of performing it. Sebastian Lambla has a lengthy post on this subject (note that Sebastian would have been using a previous version of the AJAX libraries when this post was written): http://serialseb.blogspot.com/2009/06/in-how-many-ways-can-microsoft-ajax-4.html.
11.5.2. Hello, Microsoft AJAX
It's time to look at the new DataView functionality, so let's create a new empty ASP.NET web project called Chapter11.HelloAjax:
Create a directory called Scripts within your project.
Download the latest ASP.NET AJAX Framework from http://ajax.codeplex.com/.
Unzip the downloaded file, and copy the contents of the Scripts directory to the new project's root directory.
You don't want any of the master page stuff, so delete the Default.aspx file.
To show that the libraries are platform-independent, add a new HTML file called dataviewDeclarative.htm.
Drag Start.js to the default.htm <head> HTML section to create the following script reference to the client script loader:
<script src="Scripts/start.js" type="text/javascript"></script>
11.5.3. sys-template CSS Rule
When you retrieve data from a remote source, you don't want to display anything to the user until you have the results back, because otherwise the template could flicker, which would look poor. You will thus create a new CSS rule to hide the element until you have finished retrieving data and binding it. Because we are being lazy, simply add an inline style rule to the header as follows (obviously, external CSS files are a better way to go):
<style>
.sys-template { display: none; }
</style>The name of the class selector (.sys-template) is a convention suggested by Microsoft for this purpose; it doesn't seem a bad idea, so you might want to stick with it.
Let's also add a couple of other styles to make the examples clearer:
.dataItem
{
font-family:Arial;
font-size:20px;
}
#staticBind
{
width:700px;
}OK, you have everything set up now. It's time for some client-side binding fun.