Recently, Microsoft ASP.NET Ajax 1.0 has attracted more and more developers’ attention. Why? Because it’s an Ajax-based solution from Microsoft for ASP.NET 2.0 web development! It came to the AJAX stage late in the game, but it brought with it an integral package of new Ajax-based web development technologies that integrate an extensive set of client script libraries with the rich, server-based development platform of ASP.NET 2.0! In this series, I will try to dissect the key techniques in the data binding architecture inside Microsoft ASP.NET Ajax 1.0 Framework. In part 1, we will mainly explore the data binding architecture from the point of view of theory, while in part 2, we'll build two distinct samples (the data sources coming from web services and a SQL Server 2005 database, respectively) to study the practical application of the data binding techniques.

First, let's take a look at the ASP.NET AJAX framework architecture (Figure 1):

Figure 1: The ASP.NET AJAX Framework architecture

Generally, as far as ASP.NET AJAX (called 'MS AJAX' later in this series) framework is concerned, we refer to the three components as follows:

·         ASP.NET AJAX Essential Components, which corresponds to the assemblies System.Web.Extensions.dll and System.Web.Extensions.Design.dll with three files: MicrosoftAjax.js, MicrosoftAjaxTimer.js, and MicrosoftAjaxWebForms.js inside them.

·         ASP.NET AJAX Control Toolkit (with no hint about it in Figure 1), which provides both ready-to-run samples and a powerful SDK to simplify creating custom ASP.NET AJAX controls and extenders.

·         ASP.NET AJAX Futures January CTP (recently replaced by a May release, with the January one still available), which corresponds to the assembly Microsoft.Web.Preview.dll which contains three files: PreviewScript.js, PreviewGlitz.js, and PreviewDragDrop.js.

The ASP.NET 2.0 AJAX Futures January CTP provides additional features and functionality that work alongside the ASP.NET AJAX Extensions. Together, these releases enable development scenarios supported in the earlier ASP.NET AJAX CTP releases in addition to newly added functionality.

To follow along with the samples in this series, you must first have ASP.NET 2.0 AJAX Extensions 1.0 installed on your computer. Next, you can easily install the ASP.NET 2.0 AJAX Futures January CTP by downloading ASPAJAXCTP.msi and running it on your computer. Please carefully read the release notes which are displayed following installation for more information on using the ASP.NET 2.0 AJAX Futures January CTP with your applications.

Author's Note: Recently, Microsoft has just released another newer version named ASP.NET Futures May 2007 ("Futures") which contains an early developer preview of features (especially the previous ASP.NET AJAX Futures January CTP—discussed here), as well as provides new features including ASP.NET Silverlight server controls, new functionality for ASP.NET AJAX Extensions, dynamic data controls, enhancements to dynamic languages, and more.

Now, since our main interests lie in the ASP.NET AJAX Futures January CTP, let's do further research into it.

Undoubtedly, data plays a core role in nearly every application. One of the most noted features of MS AJAX is that applications update the web page asynchronously with the data fetched from the server, such as the client-side JavaScript can connect with web services directly. In early times, in order to obtain data from inside web services to be supplied to applications we have to first create a server-side application, such as a web form, and achieve the communication with the web services letting the system generate the necessary proxies. But now, with the client-side JavaScript libraries of the MS AJAX framework, you can access your required web services directly from the browser side. Further, this process can be surrogated by the client-side data source controls implicit getting the required data and transfer it to visual controls via data binding. This is so important that the client can exchange data with the server without any intermediate ties, which greatly simplifies the development.

From Figure 1 above, careful readers should have noticed a component—Base Class Library (which corresponds to the file PreviewScript.js) which is the core of ASP.NET AJAX Futures January CTP. This library consists of the namespaces and classes shown in Figure 2.

Figure 2: The Base Class Library components

Seen from the above figure, all the client-side controls bond to the database and those responsible for obtaining datasets from web services are all defined inside namespace Sys.Preview.Data. All the stuffs included in namespace Sys.Preview.Data are: IData, DataRowState, SortDirection, ServiceType, DataColumn, DataRow, DataRowView, DataRowCollection, DataTable, DataView, DataFilter, PropertyFilter, DataSource, XMLDataSource. OK let's study the most important ones of them one by one.

DataSource control

You have to manage data in most of your web applications—I mean retrieving and displaying data to users and saving them back to a database after modification. This is a common task that we have to perform in almost every project, so ASP.NET abstract it as a build-in object, DataSource. MS AJAX client side script library, as well as ASP.NET, has the same concept of DataSource. Figure 3 shows the advanced data binding controls in MS AJAX vs. their possible ADO.NET 2.0 counterparts.

Figure 3: The MS AJAX client-side DataSource-related controls compared with their ADO.NET 2.0 counterparts

Author's Note: In the new AJAX Futures CTP (January 2007), DataSet was deleted inexplicably (I've fine combed all the related *.js files but only found DataSetConverter supported in PreviewScript.js).

There are two kinds of DataSource in the AJAX Futures CTP:

·         Sys.Data.DataSource—represents a tabular data structure such as the result of a query to the database, similar to object SQLDataSource in ASP.NET 2.0. This control can be used as the client side data source of ListView and ItemView controls. You can load data from the server and save the changes back to the server after the user modifies them.

·         Sys.Data.XMLDataSource—represents a hierarchy data structure such as an XML file, similar to the XMLDataSource object in ASP.NET 2.0. This control can be used as the client side data source of XSLTView control. This is a read only data source that you can only read data and show it to user but not save the modifications back to the server.

Note that in this series, we'll only explorer the former.

Since all the client-side advanced data binding controls are included inside file PreviewScript.js, let me give another figure (Figure 4) to describe the relationships between them although some of them are to be observed later.

Figure 4: The hierarchical relations between the controls we are interested in

The following Listing 1 is the prototypes and descriptors defined inside the DataSource control:

Listing 1: Prototypes and descriptors defined inside control DataSource

Sys.Preview.Data.DataSource.prototype</span> = {
    _data: null,
    _initialData: null,
    _autoLoad: false,
    _serviceURL: "",
    _loadMethod: "",
    _serviceType: Sys.Preview.Data.ServiceType.DataService,
    _isReady: true,
    _dataChangedDelegate: null,
    _request: null,
    _timeout: 0,
    //……omitted
    _onDataAvailable: Sys$Preview$Data$DataSource$_onDataAvailable,
    get_data: Sys$Preview$Data$DataSource$get_data,
    set_data: Sys$Preview$Data$DataSource$set_data,
    get_initialData: Sys$Preview$Data$DataSource$get_initialData,
    set_initialData: Sys$Preview$Data$DataSource$set_initialData,
    get_isDirtyAndReady: Sys$Preview$Data$DataSource$get_isDirtyAndReady,
    get_isReady: Sys$Preview$Data$DataSource$get_isReady,
    _set_isReady: Sys$Preview$Data$DataSource$_set_isReady,
    get_loadMethod: Sys$Preview$Data$DataSource$get_loadMethod,
    set_loadMethod: Sys$Preview$Data$DataSource$set_loadMethod,
    get_parameters: Sys$Preview$Data$DataSource$get_parameters,
    get_serviceURL: Sys$Preview$Data$DataSource$get_serviceURL,
    set_serviceURL: Sys$Preview$Data$DataSource$set_serviceURL,
    get_serviceType: Sys$Preview$Data$DataSource$get_serviceType,
    set_serviceType: Sys$Preview$Data$DataSource$set_serviceType,
    get_rowCount: Sys$Preview$Data$DataSource$get_rowCount,
    initialize: Sys$Preview$Data$DataSource$initialize,
    onDataPropertyChanged: Sys$Preview$Data$DataSource$onDataPropertyChanged,
    onRequestComplete: Sys$Preview$Data$DataSource$onRequestComplete,
    onLoadComplete: Sys$Preview$Data$DataSource$onLoadComplete,
    ready: Sys$Preview$Data$DataSource$ready,
    load: Sys$Preview$Data$DataSource$load,
    save: Sys$Preview$Data$DataSource$save
}
Sys.Preview.Data.DataSource.descriptor</span> = {
    properties: [ { name: 'data', type: Object },
                  { name: 'autoLoad', type: Boolean },
                  { name: 'initialData', type: String },
                  { name: 'isDirtyAndReady', type: Boolean, readOnly: true },
                  { name: 'isReady', type: Boolean, readOnly: true },
                  { name: 'loadMethod', type: String },
                  { name: 'rowCount', type: Number, readOnly: true },
                  { name: 'serviceURL', type: String },
                  { name: 'parameters', type: Object, readOnly: true },
                  { name: 'serviceType', type: Sys.Preview.Data.ServiceType } ],
    methods: [ { name: 'load' },
               { name: 'save' } ],
    events: [ { name: 'dataAvailable', readOnly: true } ]
}
Sys.Preview.Data.DataSource.registerClass('Sys.Preview.Data.DataSource', Sys.Component);

According to my analysis, all stuffs within the prototype block can be used with JavaScript programming, while only those within the descriptor block can be used in xml-script declarative programming (we mainly discuss this approach).

Events defined in DataSource—dataAvailable

The only self-defined and most important event is dataAvailable. This event is triggered when data inside the DataSource control are loaded completely. We can grab a typical case for this event from the example Tasklist shipped with MS AJAX, as follows:

Listing 2: Typical usage for event dataAvailable inside control DataSource

        <components>
            <dataSource id="listsDataSource" serviceURL="TaskListDataService.asmx" />
            <dataSource id="itemsDataSource" serviceURL="TaskItemDataService.asmx">
                <dataAvailable></span>
                    <invokeMethodAction target="listsDataSource" method="load" /></span>
                </dataAvailable></span>
            </dataSource>

Here, two DataSource controls are defined declaratively. When the second DataSource itemsDataSource are loaded completely, the load method of the first DataSource is then invoked.

Methods self-defined (no including those defined in the parent) in DataSource

Here's the definition for method save of control DataSource in file PreviewScript.js:

Listing 3

function Sys $Preview $Data $DataSource $save()
{
  //……omitted
  if (this._serviceType ==  = Sys.Preview.Data.ServiceType.DataService)
  {
    var method = "SaveData";
    var params =
    {
      changeList: changes, parameters: this._parameters, loadMethod:
        this._loadMethod
    };
    var onComplete = Function.createDelegate(this, this.onLoadComplete);
    var onError = Function.createDelegate(this, this.ready);
    this._request = Sys.Net.WebServiceProxy.invoke(this._serviceURL, method,
      false, params, onComplete, onError, this, this._timeout);
  }
  else
  {
    throw Error.createError("Save is not supported in Handler mode.");
  }
}   

Obviously seen from the code above, only when the type of property serviceType is set to type DataService can method save be available. This is of great importance when we define web services to be consumed from the client side later. And as for the mysterious method—SaveData, we'll discuss it in Part 2.

Properties defined in DataSource

Next comes another DataSource related control—DataView.

DataView control

Generally, we can get data from server side and store them in client side by using DataSource and then modify the data we get on client side using DataTable (discussed later on) object. However, sometimes we need to do some decorations before showing, for example, we may need to page our data if it contains thousands of rows, or our user may be only interested in some of the data. That’s the reason why the framework has to introduce the DataView and DataFilter objects.

Properties defined in DataView

Notice that DataView object has only one self-defined method—sort. This method will apply the sort operation according to sortColumn property and sortDirection property. Also, you should remember that you may need two additional controls in namespace Sys.Preview.UI.Data—DataNavigator and SortBehavior to help you with the paging and sorting issues. Here for integrality, we also give a short introduction to the DataFilter object.

Class Sys.Preview.Data.DataFilter is designed as the abstract base class of all the filters. It provides an abstract method filter for the derived class to implement its specified filter rules.

The Futures January CTP also provides one built-in filter—PropertyFilter, which is used for filtering the items by one specified property and its value.

Author's Note: First, this DataView control is quite different from that of ADO.NET 2.0. Second, since our samples in this series are mainly using ListView and ItemView, you can get an example related to DataView from here. And although this one is the former Atlas related, don't worry—you only need a slight modification with it according to the new samples provided in this series.

DataTable control

Now comes another important control—DataTable, which implements the Sys.Data.IData interface. By examining the source code of the samples shipped with MS Ajax, we can easily find that many important controls, such as DataSource, DataView, ItemView, and ListView all use the DataTable control to hold their data. So, when you work with data binding in MS AJAX, you will regularly deal with this control. And still for brevity, we just enumerate its events, properties and methods.

Events defined in DataTable

Properties defined in DataTable

Methods defined in DataTable

Here, we still choose to cut a long story short, leaving the examples telling you everything.

DataColumn control

The DataTable class contains a collection of DataColumn objects and a collection of DataRow objects. Since the client-side DataColumn and DataRow controls are designed to simulate their ADO.NET 2.0 counterparts—DataColumn and DataRow, we can easily figure out their relations from the foregoing Figure 3. Yes, quite similar to the database counterpart, the DataColumn here also possesses the properties listed below.

Properties defined in DataColumn

Note that the DataColumn control does not supply any events methods and only provides a few property related get-and-set methods, such as get_columnName(), get_dataType(), get_defaultValue() etc. General speaking, only these properties are enough for use in practical development.

DataRow control

As with the DataColumn control above, the DataRow control only exposes three properties in its descriptor block of its definition—only the three ones can be used in xml-script declarative mode.

Properties exposed in the descriptor block of DataColumn

Also, the DataRow control provides a few property related get-and-set methods and support only one event—propertyChanged which will get fired when one of the above properties is changed.

So much is for the discussion with controls in namespace Sys.Preview.Data. Now, let's continue to examine those inside another namespace—Sys.Preview.UI.Data.

ItemView control

We need to display user a detailed view about our items in a collection, such as the details about your product in a shopping application. The MS AJAX client-side control ItemView provides this feature for you, just like the ASP.NET server control DetailsView behaviors, but it runs totally on the client side. The ItemView class and ListView class both inherit from base class—Sys.UI.Data.DataControl, which provides the basic functionalities of a DataControl, including many additional properties.

There are several client-side controls in namespace Sys.Preview.UI.Data, such as DataControl (the parent control of ItemView and ListView), DataNavigator, ItemView, ListView, XSLTView, etc.

Here, we merely concentrate on two controls—ItemView and ListView. In practice, as the ASP.NET server control GridView is to ObjectDataSource, so is the MS AJAX client-side control ItemView (or ListView) to DataSource. And also, there exist similar data bindings between the two couples. The following table lists the commonly used and self-defined properties with their short explanations in column two.

Commonly used methods in ItemView

Please note all the operations above are at client side, which just modify the client side data. So if you want to commit the changes to server, you have to call the methods in DataSource.

Obviously, the ItemView is always used to display one record on the client side, while the ListView control discussed next is for listing records within a range satisfying some condition.

ListView control

In most of the current web applications you often have to find a way to show user a table of data. Just as the ASP.NET GridView server control does, MS AJAX ListView control provides the same behavior on client side in the AJAX way. Although you can use traditional ASP.NET 2.0 GridView server control and then simply add an MS AJAX UpdatePanel to let your GridView work in the AJAX way, but this is with low efficiency and not the ‘pure’ MS AJAX way. You may need to use the full client-side MS AJAX control ListView to make things better. Do not be afraid, this is just as simple as the GridView with similar concepts such as ItemTemplate, but keep in mind there’s no IntelliSense provided by the IDE, and so you must pay more attention on typing the code.

Author's Note: In the new Visual Studio "Orcas" JavaScript Intellisense is supported for MS AJAX.

Commonly used properties in ListView

As with ItemView, to use a ListView, you have to provide MS AJAX some templates above to let it know how to render your content. In practice, these templates are generally corresponding to some special HTML elements, such as "<div>", so be careful.

Indeed, enough of theory debate now. So, let's roll up our sleeves and write a simple example!

1. Create an ASP.NET AJAX CTP-Enabled Web Site

Launch Visual Studio 2005 and then select menu item "File | New Website…" to create a new website using the template named "ASP.NET AJAX CTP-Enabled Web Site", and name the project AJAXCTPDev311 (select Visual C# as the built-in language). After that, the system should automatically added references to the necessary assemblies—Microsoft.Web.Preview.dll and System.Web.Extensions.dll. And also, you can see a ScriptManager server control automatically added to the page. Simply put, this server control acts as the headquarters of whole ASP.NET AJAX framework.

Next, with a little modification, page Default.aspx finally looks like Figure 5:

Figure 5: The design-time sample web page

With nothing explained, let's first look at the source code behind this aspx page:

Listing 4

<head runat="server">
    <title>Client-Side Data Binding Test</title>
</head>
<body style="font-size: 12pt">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" >
            <Services>
                <asp:ServiceReference Path="BookDataService.asmx" />
            </Services>
            <Scripts>
                <asp:ScriptReference Assembly="Microsoft.Web.Preview"
 Name="PreviewScript.js" />
            </Scripts>
        </asp:ScriptManager>
        <div style="text-align: left">
            <span style="color: #0000cc"><span style="font-size: 24pt">
                <span>
                    Client-Side Data Binding Test</span>
                    <br />
            </span></span>
                
        </div>
        <br />
          
          <div id="header">
          <input type="button"
 id="Button5" value="Get Book by Title" />
          <br />
      </div>
          
        <div id="Book titles to be listed here">
        </div>
        <div id="Books"></div>
        <div style="display:none;">
          <div id="LayoutTemplate">
            <div id="ItemTemplateParent">
              <div id="ItemTemplate">
                  <span id="BookTitle"></span>
              </div>
            </div>
          </div>
          <div id="emptyTemplate">
                        empty...
          </div>
        </div>    
 
        <script type="text/xml-script">
          <span lang=PT><page
 xmlns="http://schemas.microsoft.com/xml-script/2005">
<span lang=PT>            <components>
            <dataSource id="BooksDataSource" serviceURL="BookDataService.asmx"
 />
            
              <button id="Button5" >
                <click>
                    <invokeMethodAction target="BooksDataSource"
 method="load" />
                </click>
              </button>
              
              <listView id="Books" itemTemplateParentElementId="ItemTemplateParent">
              <bindings>
                  <binding dataContext="BooksDataSource" dataPath="data"
 property="data" />
                </bindings>
                <layoutTemplate>
                  <template layoutElement="LayoutTemplate" />
                </layoutTemplate>
                <itemTemplate>
                  <template layoutElement="ItemTemplate">
                    <label id="BookTitle">
                      <bindings>
                        <binding dataPath="Title" property="text" />
                      </bindings>
                    </label>
                  </template>
                </itemTemplate>
                <emptyTemplate>
                  <template layoutElement="emptyTemplate" />
                </emptyTemplate>
              </listView>
              
            </components>
          </page>
        </script>
    </form>
</body>

Here, several points should be noticed:

1.    The necessary .asmx and .js files references should be added as the sub sections under ScriptManager;

2.    We've defined several span and div HTML elements (in bold) which serve as the placeholder of the MS AJAX client-side control—ListView. As stated before, ListView has provided serveral useful templates—layoutTemplate, itemTemplate, separatorTemplate, emptyTemplate, and a necessary property—itemTemplateParentElementId (specifying the parent element of temTemplate and separatorTemplate; this way, the itemTemplate and separatorTemplate related elements can be rendered repeatedly inside it);

3.    Next comes the declarative programming (we'll discuss it more thoroughly in Part 2). To return data to be shown in the ListView control from web services we must use the DataSource control to specify the service URL;

4.    We've defined the ListView architecture, with the necessary templates in response to their former HTML counterparts;

5.    In step 4, we've also set up the bindings to the properties inside the web service;

6.    Last but not least, careful readers should also notice that here we've use declarative mode to invoke the button click event handler, which in turn invokes the load method of DataSource control BooksDataSource.

2. Create a Web Service

Next, we'll write a web service to be consumed from the browser side through declarative mode (and of course OK by manual JavaScript programming). Here, we let the service returns an array of object Book.

Right click the project and choose "Add new item" and create a new Web Service named BookDataService.asmx. Next, in file BookDataService.cs, we are to create our WebMethod—GetTitles. Listing 5 shows the crucial code snippet:

Listing 5

using System.Collections.Generic;
using System.ComponentModel;
…………
using System.Data;
using System.Web.Script.Services;
using Microsoft.Web.Preview.Services;
 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]</span>
public class BookDataService : <span class=Bold>DataService</span>
{
 
    public BookDataService()
    {
        //InitializeComponent(); 
    }
    [DataObjectMethod(DataObjectMethodType.Select)]</span>
    public Book[] GetTitles()</span>
    {
        List<Book _data = new> List<Book>();
        _data.Add(new Book("Hello,this is Title 1"));
        _data.Add(new Book("Hello,this is Title 2"));
        _data.Add(new Book("Hello,this is Title 3"));
        _data.Add(new Book("Hello,this is Title 4"));
 
        return _data.ToArray();
    }
    public class Book
    {
        private string _title;
        public Book(){}
        
        [DataObjectField(true)]</span>
        public string Title
        {
            get { return _title; }
            set { _title = value; }
        }
        public Book(string title)
        {
            _title = title;
        }
    }
}

Here, there are also some points to be emphasized:

1.    According to the official info, we must put the attribute ScriptService before the Web Service so as for the client side to call it;

2.    We have our web service derived from a special WebService—DataService, which holds some mystery to be discussed in Part 2;

3.    Next, please note that method GetTitles is decorated with a peculiar attribute DataObjectMethod (defined in namespace 'System.ComponentModel'), which with its two arguments—the first being a DataObjectMethodType that allows you to indicate whether the method is used to Delete, Insert, Select, Fill or Update an item; The second attribute (a Boolean value) is used to indicate whether a certain method is the default for its type of operation. For more details on this attribute, you can refer to this article.

4.    We have seen that attribute is a good way of decorating business objects for data binding in point 3. Here appears another attribute—DataObjectField. This attribute has three arguments to allow you to specify whether the property is a primary key and an identity, its length in bytes, and whether or not it's nullable respectively (please look up DataObjectFieldAttribute in MSDN for more details).

OK, we just know that WebMethod GetTitles will return an array of object Book.

3. Consume the Web Service

In fact, this task has already been accomplished. Really it is. According to the explanation of method load of control DataSource, when you click the button Button5, the method load of data source BooksDataSource is invoked, and then WebMethod GetTitles is called with the help of modifier '[DataObjectMethod(DataObjectMethodType.Select)]'. It seems everything becomes so coincidental, and in the end the ListView Books is filled with the data returned by WebMethod GetTitles, with the only property Title bond properly.

4. Running the sample

Without any trouble, press F5 and you will launch the sample. Click the button and you will see the runtime screenshot like Figure 6. Although the outcome is rather simple, we have indeed gone a long way!

Figure 6: The runtime screenshot

5. The last sentence to mention

To properly run this sample, you also have to add the following necessary converters within web.config, or else you'll get nothing.

Listing 6

<system.web.extensions>
  <scripting>
   <webServices>
     <jsonSerialization>
       <converters>
          <add name="DataSetConverter"
 type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter,
 Microsoft.Web.Preview"/>
           <add name="DataRowConverter"
 type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter,
 Microsoft.Web.Preview"/>
           <add name="DataTableConverter"
 type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter,
 Microsoft.Web.Preview"/>
      </converters>
     </jsonSerialization>
   </webServices>
   </scripting>
</system.web.extensions>

For now, we've finished a simple sample in a hurry!

[Download Sample]

In the first article of this series, we've given an outline for the data binding architecture in MS AJAX Framework. Then we have looked through the main client-side controls used to achieve data binding and their relations. Finally, a simple sample is provided to put in practice the most components discussed in this article. In the second article of this series, we will examine two more complex samples to further grasp the idea with MS AJAX client-side data binding.