Client Data Binding in AJAX 4.0

Exploring ASP.NET & Web Development

 

Client Data Binding in AJAX 4.0

 

By Don Kiely

 

Up to this point in the Web s development—or, at least, Microsoft s edition of the Web—the client has been the weakest part of the application. For the most part, that was okay. Web applications have the compelling benefit of being easy to deploy, and various technologies make pages in the browser pleasantly interactive. But all the heavy lifting used to take place on the server, connecting to databases, generating content to match the user s interests and permissions. The end result was an HTML page sent to the client, maybe with some JavaScript or Flash to give the look and feel of a rich client application. But for the most part, it was all smoke and mirrors. And for years, JavaScript was considered a lame programming language meant only to facilitate simple interactivity in a page rendered in a browser.

 

All that changed with the emergence of AJAX as a viable way to let the Web page truly interact with the user, making lean calls to the server to update the small bits and pieces of the page in response to user actions. Most amazing of all, JavaScript has revealed itself to be an incredibly capable programming language, able to perform complex actions on the client. It can take some wicked code to do anything useful, but a good programming framework, such as the ASP.NET AJAX client library or jQuery, can significantly simplify the code you need to write.

 

Microsoft is hooking in to the new interest in browser-based client programming in its next release of ASP.NET AJAX. As I write this, AJAX 4.0 Preview 4 is a couple of weeks old. This release focuses heavily on binding data from various sources to elements on HTML pages. This has enormous implications for working with data—reading, inserting, updating, and deleting it—from a client Web page. At the extreme, you can have a Web server pushing out static HTML pages, each of which independently connects to a data source and dynamically updates itself with data, whether a single row from a database table, or an enormous grid filled with all the data that you care to display.

 

At DevConnections in Orlando last month, I recorded a DotNetRocks show with Carl Franklin and Richard Campbell about AJAX 4.0. We talked a bit about how the data binding features in AJAX 4.0 hearken back to the revolutionary data binding features of Visual Basic 3.0 (the Visual Basic that existed long before the .NET Framework). VB 3.0 for the first time enabled rapid development of enterprise data applications. AJAX 4.0 opens up the same kinds of possibilities, but on the Web using modern data services (ironically with another interpreted language, JavaScript).

 

AJAX 4.0 provides a lot of flexible features to support data binding, but I think the three main features you ll use a lot are the new DataView and DataContext objects and client templates. The Sys.UI.DataView class in the AJAX framework provides an interface between HTML elements bound to data and the data source. It uses client templates to provide a clean, simple way to bind elements and data. The combination of client templates and the DataView component alone provide one-way binding to easily display data in a Web page. The Sys.Data.DataContext class enables two-way, live binding, letting you create pages with elements dynamically bound to updatable data. This means the user can update and save new and changed data back to the original data store.

 

Here s a sample of how some of these new features work in a page. The code uses an ADO.NET Data Service to read data from the AdventureWorks database and display the list of products in an unordered list:

 

<body xmlns:sys="javascript:Sys"

    xmlns:dataview="javascript:Sys.UI.DataView"

    sys:activate="*">

  <h1>AdventureWorks</h1>

  <div id="top">

    <ul id="productListView" class="float master sys-template"

       sys:attach="dataview"

       dataview:datasource="{{ new Sys.Data.AdoNetDataSource() }}"

       dataview:serviceuri="../AdventureWorksAdo.svc"

       dataview:query="Product">

      <li>

        {{ Name }}

        {{ parseFloat(ListPrice).localeFormat("C") }}

      </li>

    </ul>

  </div>

</body>

 

The above code uses AJAX 4.0 s declarative syntax to implement one-way binding without any code. (In an earlier article on AJAX 4.0 I used a programmatic version of this page; http://www.aspnetpro.com/newsletterarticle/2009/02/asp200902dk_l/asp200902dk_l.asp.) The attributes of the <ul> tag create and set up the DataView object, connecting it to the data service and setting a query to read products from the database. The sys-template CSS class identifies this as a client template to AJAX 4.0, and the field names surrounded by double curly brackets, such as {{ Name }}, bind to fields in the list of products. Notice that you can use JavaScript within a binding, such as is used here to convert the ListPrice field data to local currency. That s all you need to do to use data from a data service in an AJAX 4.0 page.

 

To let the user interact with data dynamically—such as to update the data both in other parts of the page as well as save it back to the database—you need to use live binding. The client template changes to the form { binding Name }, and if you bind the data to an input element on the page, such as a text box, AJAX uses two-way, live binding. To enable all these features, you need to use the DataContext object, introduced in AJAX 4.0 Preview 4 (previously it was called DataSource). DataContext is a rich object that supports properties and methods to fetch and save data, track changes to data, and interact with the data source in other ways. DataContext is kind of a combination of the DataSet and DataAdapter objects in server-side ADO.NET, but on the client in JavaScript.

 

As you can probably imagine, using the DataContext object in a page gets a bit involved, so I ll save a sample of that for a future column.

 

With great power comes great responsibility. Not every page you create should have rich interactions with data, and often you ll need to carefully consider the security implications of what you are doing. But if it makes sense for your application, rock on with AJAX 4.0 data binding to cut the server out of the action. Of course, you can use all these data binding features in regular server-side ASP.NET pages as well, getting the best of two very powerful worlds.

 

Don Kiely ([email protected]), MVP, MCSD, is a senior technology consultant, building custom applications and providing business and technology consulting services. His development work involves tools such as SQL Server, Visual Basic, C#, ASP.NET, and Microsoft Office.

 

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish