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:
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.
Live binding is having the data bound in LIVE. Meaning when there’s any change in the data source, the changes are reflacted to the data bound interface instantly & 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 & the form uses “Live Binding”. Pretty cool, right?
This is all done through client-side script, JavaScript. But how does it come in action? The core of the live binding is implemntation 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.
To implement live binding, you will need the Asp.Net AJAX 4.0 framework included in your file. After downloading the from here, you’ll need to referance them to your file. You can use a conventional <script> tag to reference these files:
<script type=”text/javascript” src=”../scripts/MicrosoftAjax.debug.js”></script>
<script type=”text/javascript” src=”../scripts/MicrosoftAjaxTemplates.debug.js”></script>
<script type=”text/javascript” src=”../scripts/MicrosoftAjaxAdoNet.debug.js”></script>
Or you can use ScriptReferences under a ScriptManager tag:
<asp:ScriptManager ID=”sm” runat=”server”>
<Scripts>
<asp:ScriptReference Name=”MicrosoftAjax.js” Path=”~/scripts/MicrosoftAjax.js” />
<asp:ScriptReference ScriptMode=”Inherit” Path=”~/scripts/MicrosoftAjaxTemplates.js” />
<asp:ScriptReference ScriptMode=”Inherit” Path=”~/scripts/MicrosoftAjaxAdoNet.js” />
</Scripts>
</asp:ScriptManager>
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) & MicrosoftAjaxAdoNet.js (for Ado.Net utilities support).
The key components used for the Live Binding are Templates, DataView control and DataContext class. The AdoNetDataContext class is also there for additional Ado.Net support.
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 declerative initialization process is needed:
<body xmlns:sys=”javascript:Sys” xmlns:dataview=”javascript:Sys.UI.DataView” 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.
<ul sys:attach=”dataview” class=”sys-template” dataview:data=”{{ employeeList }}”>
<li>
<h3>{{ Name }}</h3>
<div>{{ Address }}</div>
</li>
</ul>
<script type=”text/javascript”>
function pageLoad() {
employeeService.GetEmployeeList(querySuccess);
}
function querySuccess(result) {
$find(“employeeList”).set_data(result);
}
</script>
<ul id=”employeeList” sys:attach=”dataview” class=”sys-template”>
<li>
<h3>{{ Name }}</h3>
<div>{{ Address }}</div>
</li>
</ul>
<ul sys:attach=”dataview” class=”sys-template”
dataview:autofetch=”true”
dataview:dataprovider=employeeService.svc”
dataview:fetchoperation=”GetEmployeeList”>
<li>
<h3>{{ Name }}</h3>
<div>{{ Address }}</div>
</li>
</ul>
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.
<script type=”text/javascript”>
var dataContext = new Sys.Data.DataContext();
dataContext.set_serviceUri(“emplyeeService.svc”);
dataContext.initialize();
</script>
<ul sys:attach=”dataview” class=”sys-template ”
dataview:autofetch=”true”
dataview:dataprovider=”{{ dataContext }}”
dataview:fetchoperation=”GetEmployeeList”>
<li>
<h3>{binding Name}</h3>
<div>{binding Address}</div>
</li>
</ul>
If you are using an ADO.NET data service, you should use the AdoNetDataContext class instead of the more general-purpose DataContext class.
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:
<h3>{{ Name }}</h3>
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 & div element will change automatically.
<h3>{{ Name }}</h3>
<div>{{ Address }}</div>
<input type=”text” value=”{binding Name}”/>
<input type=”text” value=”{binding Address}”/>
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.
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:
<input type=”text” value=”{binding Distance, convert=toMiles, convertBack=fromMiles}”/>
This similar syntax can be used to specify binding mode as well.
<input type=”text” value=”{binding Distance, mode=oneWay}”/>
The default binding behavior for text-boxes & other input controls is two-way & for all other controls is one-way.
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 & see what more is coming in Asp.Net 4.0.
Leave a comment
You must be logged in to post a comment.