ASP.NET

This article will give you a highlight on implementing “Live Binding”, a feature for the upcoming version of ASP.NET AJAX.

Introduction

Many of you may already be familiar with the upcoming version of ASP.NET AJAX, version 4.0. The release was out on March 12, 2009. The key features for this version are:

* ADO.NET Data Services support
* WCF and ASMX Web service integration
* ASP.NET AJAX Client Templates
* Declarative instantiation of client-side controls and behaviors
* Observable pattern for plain JavaScript objects
* Live Bindings
* Markup Extensions
* DataView control and DataContext component
* Command Bubbling
* Change tracking and identity management
* Support for managing complex links and associations between entities from multiple entity sets or tables
* Extension methods allowing change tracking and read-write client-server scenarios using other JSON services, including RESTful or JSONP based services

This preview version can be downloaded from here. This writing is mostly for highlighting the "Live Binding" feature introduced in this release of ASP.NET AJAX. This will also cover some operations on DataView control and DataContext component.
What is Live Binding?

Live binding is having the data bound in real-time. Meaning when there's any change in the data source, the changes are reflected to the data bound interface instantly and vice versa. For example if you have an interface component, like a table, bound to a data source, like an array, any change to that array from the code is reflected in the view table instantly. If you are using an edit template for updating the data of a selected row of the table, the data in the table will get updated as you change a field in your edit form if both the table and the form use "Live Binding". Pretty cool, right?
Inside Live Binding

This is all done through client-side script, JavaScript. But how does it come in action? The core of the live binding is the implementation of an "Observer" pattern. The observer pattern enables an object to be notified about changes that occur in another object. This is not an event handler based pattern which we often misuse as an observer pattern. ASP.NET AJAX 4.0 implements this pattern completely. It adds observer functionality to ordinary JavaScript objects or arrays so that they raise change notifications when they are modified through the Sys.Observer interface.
Live Binding in Action

To implement live binding, you will need the ASP.NET AJAX 4.0 framework included in your file. After downloading from here, you'll need to reference them to your file. You can use a conventional
2.
4.



Or you can use ScriptReferences under a ScriptManager tag:

1.
2.
3. 4. Path="~/scripts/MicrosoftAjax.js" />
5. 6. Path="~/scripts/MicrosoftAjaxTemplates.js" />
7. 8. Path="~/scripts/MicrosoftAjaxAdoNet.js" />
9.
10.



You can see from these references that there are 3 files in this package, an updated MicrosoftAjax.js file and 2 new files: MicrosoftAjaxTemplates.js (for the client template support) and MicrosoftAjaxAdoNet.js (for ADO.NET utilities support).

The key components used for the Live Binding are Templates, the DataView control and the DataContext class. The AdoNetDataContext class is also there for additional ADO.NET support.
DataView Control and DataContext class

This control can bind to any JavaScript object, array or even ASP.NET AJAX component. To use a DataView control in your page, the following declarative initialization process is needed:

1. 2. sys:activate="*">



The value of the "activate" attributes are the comma separated IDs for the HTML components in which the observer is applied to check for changes. Using an * here implies to activate all the HTML components to be observable. But this might get the page rendering speed to be slower.

Data can be provided to a DataView control for live binding in a number of ways.

1. Setting the data property of the control decoratively: A declarative binding can be done through assigning a value to the data property as follows:

1.

2.
• 
  3.

  {{ Name }}

  
  4.
  {{ Address }}
  
  5.

6.

• {{ Name }}

  {{ Address }}

2. Setting the data property of the control through code: This approach can be implemented as follows:

1.
9.

10.
• 
  11.

  {{ Name }}

  
  12.
  {{ Address }}
  
  13.

14.

• {{ Name }}

  {{ Address }}

3. Using WCF or ASP.NET web service as dataProvider: A WCF or ASP.NET web service can be specified in the dataProvider property of the control.

1.

2. dataview:autofetch="true"
3. dataview:dataprovider=employeeService.svc"
4. dataview:fetchoperation="GetEmployeeList">
5.
• 
  6.

  {{ Name }}

  
  7.
  {{ Address }}
  
  8.

9.

• {{ Name }}

  {{ Address }}

When the DataView control’s dataProvider property is set, the DataView control will use the provider (in this case, the Web service) to fetch data by using the operation specified in the fetchOperation property.

4. Using DataContext classes as dataProvider: The DataContext class can be used as follows:

1.
6.

7. dataview:autofetch="true"
8. dataview:dataprovider="{{ dataContext }}"
9. dataview:fetchoperation="GetEmployeeList">
10.
• 
  11.

  {binding Name}

  
  12.
  {binding Address}
  
  13.

14.

• {binding Name}

  {binding Address}

If you are using an ADO.NET data service, you should use the AdoNetDataContext class instead of the more general-purpose DataContext class.
One-way/One-time Binding

In the above examples you see a binding syntax like this: { { expression } } This is a one-way/one-time data binding as the expression is evaluated only once, at the time of template rendering. With one-way/one-time binding, if the source data changes after the template has been rendered, the rendered value will not be automatically updated. An example for this is:

1.

{{ Name }}

{{ Name }}

Two-way Live Binding

Another syntax is available to ensure the target value is updated with the change of source value, which is like this: { expression } In two-way live binding, the binding works in both directions. If the target value is changed (in this case, the value in the UI), the source value is automatically updated (in this case, the underlying data item). Similarly, if the source value is changed (in this case, if the underlying data value is updated externally), the target value (the value in the UI) is updated in response. As a result, target and source are always in sync.

In the following example, if the user modifies the values in the text boxes, the values in the h3 and div elements will change automatically.

1.

{{ Name }}

2.
3.
4.

{{ Name }}

The live-binding syntax is similar to binding syntax in WPF (XAML). It can be used for binding between UI and data, as in the above examples, as well as directly between UI elements, between data and properties of declaratively attached controls and components, and so on.

Additional Features

The syntax also provides functions for converting data values to rendered values, or converting back from values entered in UI to an appropriately formatted data value. The following example shows how to provide conversion functions:

1.



This similar syntax can be used to specify binding mode as well.

1.



The default binding behavior for text-boxes and other input controls is two-way and for all other controls is one-way.
Summary

With the live binding through templates, it will ease the client-side development
lot smoother for handling large amount of data. With these new features coming in the ASP.NET AJAX 4.0, life will become more fun in development. Let’s wait and see what more is coming in ASP.NET 4.0.