Template | Udooz!

03 Jul 2009 @ 12:19 AM

ASP.NET AJAX 4.0: Live Data Binding using Template

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 Part I. 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.

Bindings

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.

ASP.NET 4.0 Live 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:

{{ <data_item_name> }} – One-time (can be used on any HTML controls for example <p>{{ Name }}</p>)
{ binding <data_item_name> } – One-way if other than user input HTML controls for example <td>{ binding Name } </td)
{binding <data_item_name> } – Two-way if INPUT HTML controls for example <input type=”text” sys:value=”{{ binding Name }}” />)

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

 

<body xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView"
sys:activate="*">
  <form id="form1" runat="server">
 
<div>
      <!--Master View-->
     
<ul sys:attach="dataview" class=" sys-template"
          dataview:autofetch="true"
          dataview:dataprovider="{{ dataContext }}"
          dataview:fetchoperation="Products"
          dataview:selecteditemclass="myselected"            
          dataview:fetchparameters="{{ {$top:'5'} }}"
          dataview:sys-key="master"            
      >
         
	<li sys:command="Select">{binding Name }</li>
     </ul>
      <!--Detail View-->
     
<div class="sys-template"
          sys:attach="dataview"
          dataview:autofetch="true"
          dataview:data="{binding selectedData, source={{master}} }">
          <fieldset>
            <legend>{binding Name}</legend>
            <label for="detailsListPrice">List Price:</label>
            <input type="text" id="detailsListPrice"
                sys:value="{binding ListPrice}" />
           
            <label for="detailsWeight">Weight:</label>
            <input type="text" id="detailsWeight" sys:value="{binding Weight}" />
           
             
          </fieldset>
          <button onclick="dataContext.saveChanges()">Save Changes</button>
     </div>
 </div>
  </form>
</body>

Selectable And Editable

An unordered list shows the master details, here the product name (line 15). This line also indicates that the list item is selectable using sys:command=”Select”. For maintaining master-detail or selectable item, primary key needs to be specified. The sys-key property of data view refers that primary key. In this example, I call the primary key as “master” (line 13). Also, you can see that I’ve passed a filter option using fetchparameter property of data view (line 12). In this example, I request the ADO.NET data service to give only top five records using its filter syntax.

Whenever an item in the master list is selected, the details view needs to be notified. The widget for the details view and binding details should be identified using regular sys:attach=”dataview” and dataview’s data property. In this example, dataview:data=”{binding selectedData, source={{master}} }” specifies that binding with data view with sys-key name “master”. The fieldset is used to show set of values for a product. Here, the list price and weight can be editable.

Once an item has been edited, this needs to be notified to the data source through data context. The button with caption “Save Changes” specifies that whenver this button is clicked, save the items in the details view into data source through data context’s saveChanges() method. The corresponding data source’s update option should be set on data context’s set_saveOperation(). The following JavaScript code explains this.

 

var dataContext = new Sys.Data.AdoNetDataContext();
dataContext.set_serviceUri("AWProductDataService.svc");
dataContext.set_saveOperation("Products(master)");
dataContext.initialize();

The ADO.NET Product data service’s Products(id) method is used on set_saveOperation. An item can be updated, when Product service of ADO.NET data service is being invoked with product primary key as argument. Here, again I’m referring master layout’s “master” sys-key as primary key of Product.

The output of the above code is

ASP.NET 4.0 Live Binding

The top one is master view where Sport-100 Helmet, Red is selected and the details has been shown in the bottom page. You can edit and update the data source.

The selecteditemclass property of data view is used to show the selected item.

Tags: ASP.NET, JavaScript, template
Categories: ASP.NET Posted By: udooz
Last Edit: 27 Aug 2009 @ 08 26 PM

Email • Permalink • Comments (0)

28 Jun 2009 @ 11:29 PM

ASP.NET AJAX 4.0: Template Programming Unleashed – Part I

Download the complete source code from http://udooz.net/index.php?option=com_docman&task=doc_download&gid=1&Itemid=5.

When Microsoft released its flavour of AJAX framework named “ASP.NET AJAX” as part of ASP.NET 3.0 preview, it does not have much competency when comparing with other AJAX frameworks. But when I evaluated ASP.NET AJAX 4.0, I was really inspired the new features that are completely focused your browser technologies such as XHTML and JavaScript. Really admired the effort done by ASP.NET AJAX team. There could not be any second opinion when you see the following features:

Template based client side programming
DataView and DataContext
Live Data Binding

Template Programming

Template provides pattern to design a web UI form and enables to put placeholders for runtime data.

For example, I’ve designed a web page to display AdventureWorks database Product data through ADO.NET data service. The entity model (edmx) is

AdventureWorks Product

The service code is

 

public class AWProductDataService : DataService<AdventureWorksLT2008Entities>
{   
    public static void InitializeService(IDataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("*", EntitySetRights.All);
    }
}

By ASP.NET templates, the page looks likes

<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">
<form id="form1" runat="server">   
 
<div> 
 
<table border="1">
   
<thead>
       
<tr>
           
<td>Name</td>
           
<td>List Price</td>
           
<td>Size</td>
           
<td>Weight</td>
       </tr>
   </thead>
   
   
<tbody class="sys-template" sys:attach="dataview" dataview:autofetch="true"
      dataview:dataprovider="{{ dataContext }}"
      dataview:fetchoperation="Products">                
     
<tr>
       
<td>{binding Name }</td>
       
<td>{binding ListPrice}</td>
       
<td>{binding Size}</td>
       
<td>{binding Weight}</td>
     </tr>
   </tbody>
 </table>
 </div>
 
</form>
</body>

I have used typical HTML table for displaying the data. You can see some new attributes in <TBODY> and data place holders in <TD>. ASP.NET AJAX 4.0 has a dedicated template engine to parse these new attributes and data place holders.

ASP.NET AJAX has defined a rich set of attributes and data placeholder patterns collectively called as expression language which are none other than X(HT)ML and JavaScript. Remarkable point here is its XHTML compliance, so these are not custom attributes in the regular HTML elements.

The class attribute of the <TBODY> is set to sys-template, which is a convention used to hide the initial template from the user.

 .sys-template {display:none}

The fields or properties of a data item which is needed to be rendered on data place holders can be expressed by {{ }} or { }.

DataContext

Template requires data for its place holders as contexts. The data context enables to bind any JavaScript array or objects to template.

The real power of data context is to interact with JSON/ATOM based web services.

ASP.NET AJAX provides two data contexts in MicrosoftAjaxAdoNet.js:

Sys.Data.DataContext
Sys.Data.AdoNetDataContext

The data context tracks all changes to the data automatically using new Sys.Observer object. AdoNetDataContext supports additional features for ADO.NET data services such as identity management, links and association between entity sets. The below code sample describes how to interact with AdventureWorks Product’s ADO.NET data service:

 

var dataContext = new Sys.Data.AdoNetDataContext();
dataContext.set_serviceUri("AWProductDataService.svc");
dataContext.initialize();

The set_serviceUri() method is used to interact with WCF AJAX or ADO.NET data service. The initialize() method does initialization or invocation.

Data View

This is the fundamental component for templates to display data defined in System.UI.DataView. This is similar to server side data source component supports to bind any JavaScript object or array or to any ASP.NET AJAX component. It has two properties to bind a data set:

data – to bind a JavaScript array or object
dataprovider – to bind to a WCF service

The fetchoperation property is used to set which method needs to be invoked for fetching data. In the code snippet 1, I’ve set the dataContext declared in code snippet 2 as data source. To run this application refer the following ASP.NET AJAX client side libraries:

MicrosoftAjax.js
MicrosoftAjaxTemplates
MicrosoftAjaxAdoNet

How does it work

The xmlns:sys declares the name space Sys for the entire page (Code 1. Line 2). The xmlns:dataview declares DataView control. A data view instance has been associated with <TBODY> using sys:attach.

The following figure shows the conceptual model of the template programming.

ASP.NET AJAX Template Model

The output of the code is

ASP.NET Template Output

Part 2 will explain the live data binding and master-detail display with more features in data view and data context.

Tags: ADO.NET, AJAX, ASP.NET 4.0, data context, data view, template
Categories: ASP.NET, JavaScript Posted By: udooz
Last Edit: 01 Jul 2009 @ 11 38 PM

Email • Permalink • Comments (2)

Tag Cloud

What I'm Twitting...

Links

Udooz!

Posts tagged as ' template ' ...