Tuesday, July 7, 2009

ASP.NET AJAX 4.0 Template Programming - Part II

The source code for this article can be downloaded from http://udooz.net/index.php?option=com_docman&task=doc_download&gid=2&Itemid=5.

This article is continuation of ASP.NET AJAX 4.0 Template Programming Part 1. In this part, I explain the different data binding options in ASP.NET AJAX 4.0 templates. Just a recap that I've consumed an ADO.NET data services to fetch AdventureWorks's Product table records. In this article, I explain how to update/add new record from client side.


Template supports the following bindings:

  • One-time - The expression is evaluated only once when the template rendering happen
  • One-way Live Binding - The expression is evaluated and update the value, if items in the data source changed
  • Two-way Live Binding - If the data source value changed, the value in the expression updated. And if the value in the expression is updated, it will update data source also.

The below diagram depicts the binding.


In the above diagram, the red dashed arrow shows one-time data binding. Once the data from data source has been fetched by DataView using AdoNetDataContext. The one-way live binding has been shown as purple shadowed arrow. The purpose shadow here is whenever a data updated at data source, it is being updated to data view through AdoNetDataContext. The two-way live binding has been shown as green shadowed two-head arrow. In this case, data context should have the knowledge about update operation on data source and provide an interface to data view to send the modified values.

The these three bindings, ASP.NET AJAX provides the following expression convention:

  • {{ }} - One-time (can be used on any HTML controls for example

    {{ Name }}

  • { binding } - One-way if other than user input HTML controls for example { binding Name }
  • {binding } - Two-way if INPUT HTML controls for example
Here, the input controls binds the values using sys:value attribute for two-way binding. Before going into the updatable data source, let us see how can we design master-detail layout to display Product name and Product details.

Master-Detail Layout

See full detail: http://www.codeproject.com/KB/aspnet/aspnet_template_2.aspx