ASP.NET AJAX Roadmap and Client-Side Binding

Betrand Le Roy blogged about the released the Microsoft ASP.NET Ajax Road Map

which describes some of the new proposed features of ASP.NET AJAX. One of the topics in this document centered around working with data on the client which is something I have been anticipating for quite a while. Up until now working with data on the client has been a mixed bag of solutions that never seemed to completely gel (remember the xml-script stuff) and approaching the problem with UI Templates, bi-directional data binding and new “mixed mode” controls that work with data on both the client and the server seems like an approach that finally gels.

UI Templates

Templates have been around for quite a long time in ASP.NET and moving this concept to the client makes life much easier. I can remember building up HTML fragments on the server and injecting them into a div using div.innerHTML which was always fun during data changes. A template approach (see below) simplifies this dramatically. The {{ ‘products/’ + id }} syntax which basically says put the value of the id property into this expression will take a little getting use to but is similar enough with other markup syntax like XAML that it shouldn’t be to hard to pick up. The associated JavaScript code adds a behavior to the template that associates the data, template and element to facilitate repeated data binding.

<div id=”repeater1”></div>
<div id=”template1” class=”sys-template”>
  <h2><a href=”{{ ‘products/’ + id }}”>{{name}}</a></h2>
  <p>{{description}}</p>
</div>

<script type=”text/javascript”>
  Sys.Application.add_initialize(function() {
  $create(Sys.UI.DataView, {
    template: $get(“template1”),
    data: myData
  }, {}, {}, $get(“repeater1”));
}
</script>

There are other examples in the roadmap that show how to do this all declaratively by including various xml namespaces. I like this approach better since its closer to the way XAML works which for someone who moves between the two often helps keep my mind thinking consistently.

Data Binding

I am excited to see a new approach to client-side data binding in this new roadmap. In the early SDRs I thought the xml-script stuff was odd and didn’t feel that the approach would be a viable one. I am glad to see this has been revisited. I hope this approach will limit the use of update panels for partial page refreshes and possibly be incorporated into the ASP.NET MVC stuff to provide a clean way to do more work on the client. The HTML fragment below demonstrates the binding syntax {Binding flight, mode=twoway} which is identical to how XAML does it. This type of binding allows for bidirectional binding which is an absolute must when working with client-side data. I am glossing over a lot here so read the roadmap for a lot more information on how all of this code works.

<body xmlns:sys=”javascript:Sys” xmlns:dv=”javascript:Sys.UI.DataView”>

<div id=”tripList” sys:attach=”dv” dv:data=”{{myData}}”
    dv:template=”{{$get(‘template2’)}}”></div>

<div id=”template2” class=”sys-template”
  xmlns:ac=”javascript:Sys.UI.AutoComplete”
  xmlns:wm=”javascript:Sys.UI.Watermark”
  xmlns:dp=”javascript:Sys.UI.DatePicker”>
  <input type=”text” sys:id=”{{ ‘airport’ + $index }}”
    sys:attach=”ac,wm”
    ac:serviceUrl=”airportList.asmx”
    ac:minimumPrefixLength=”{{1}}”
    wm:text=”Type the name of an airport”
    value=”{Binding airport, mode=twoWay}” />
  <input type=”text” sys:id=”{{ ‘flight’ + $index }}”
    value=”{Binding flight, mode=twoWay}” />
  <input type=”text” sys:id=”{{ ‘date’ + $index }}”
    sys:attach=”dp”
    dp:lowerBound=”{{ new Date(1970, 4, 21) }}”
    dp:upperBound=”{{ new Date(2050, 1, 1) }}”
    value=”{Binding date, mode=twoWay}” />
</div>

Client Data Sources

The roadmap also talks about support for something called “live binding” where changes to data automatically propagate to update the rendered UI.

To support this Microsoft expects to implement a Client Data Source that can:

  • specify a source of data, such as an ADO.NET Data Service.
  • request data from the source.
  • cache data.
  • save changes back to source.
  • Expose methods such as insertRow.
  • provide collection-change events on cached data.
  • Client-Side and Server-Side Data as One

if they can pull this off the client development will be totally awesome!

Client Data and Server Data

I am also glad to see that the client data approach is combined with a server data approach. Many times a pure client-side approach requires a developer to go get data from the server after the page has been rendered. This has always seemed like a inefficient approach. In the early days of ASP.NET AJAX having a combined client/server data solution was one thing I had mentioned in the SDRs. It seems the ClientDataSource, ClientDataSourceExtender and the ClientDataView server controls will solve this problem for us providing the ability to work with data from both locations using a clean approach.

Summary

I am really excited about what is coming out of the ASP.NET Team in this area and looking forward to working with the bits. With Silverlight all the rage I am glad to see that we still haven’t forgotten that for real “reach” scenarios HTML and JavaScript are still going to be needed.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>