New Features in ASP.NET AJAX 4, Part 3

The DataView Control

The DataView control can bind to any JavaScript object or array, or to any ASP.NET AJAX component.

Providing Data to the DataView Control

Data can be provided to the DataView control in a number of ways. One way is by setting the data property of the DataView control. The following example shows how to set the DataView control’s data property through declarative binding:

<ul sys:attach="dataview" class="sys-template"

dataview:data="{{ imagesArray }}"

>

<li>

<h3>{{ Name }}</h3>

<div>{{ Description }}</div>

</li>

</ul>

The following example shows how to set the DataView control’s data property through code:

<script type="text/javascript">

function pageLoad() {

imagesService.GetImages(querySucceeded);

}

function querySucceeded(result) {

$find("imagesList").set_data(result);

}

</script>

<ul id="imagesList" sys:attach="dataview" class="sys-template">

<li>

<h3>{{ Name }}</h3>

<div>{{ Description }}</div>

</li>

</ul>

Another way to provide data is to specify a WCF or ASP.NET Web service directly in the dataProvider property of the DataView control, as shown in the following example:

<ul sys:attach="dataview" class="sys-template"

dataview:dataprovider="../Services/imagesService.svc"

dataview:fetchOperation="GetImages"

>

<li>

<h3>{{ Name }}</h3>

<div>{{ Description }}</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. For other examples in which the dataProvider property is set to an instance of the DataContext class (used for read-write scenarios) see The DataContext and AdoNetDataContext Classes later in this document.

Additional Features of the DataView Control

The DataView control provides a number of features that are not shown in the previous examples, such as support for layout templates and external templates, built-in selection support for use in master-detail scenarios, command bubbling, and so on. The following example illustrates how to use some of these features to configure linked master-detail views, using two DataView controls that are linked through live binding.

<!--Master View-->

<ul sys:attach="dataview" class=" sys-template"

dataview:dataprovider="../Services/ImageService.svc"

dataview:fetchOperation="GetImages"

dataview:selecteditemclass="myselected"

dataview:sys-key="master"

>

<li sys:command="Select">{{ Name }}</li>

</ul>

<!--Detail View-->

<div class="sys-template"

sys:attach="dataview"

dataview:data="{binding selectedData, source={{master}} }"

>

<div>Name: <input type="text" value="{binding Name}"/></div>

<div>Description: <input type="text" value="{binding Description}"/></div>

</div>

The Select command in the master view template ensures that when the user clicks one of the items rendered by the master view, that item becomes the selected item. As a result, the CSS class specified in the selectedItemClass property of the master DataView control is applied to the markup for that item. In addition, the corresponding data item becomes the value that is returned by the selectedData property of the master DataView control.

The detail DataView control uses live binding so that its data item is dynamically set to the current selectedData value of the master DataView control. In the example, the detail view provides an edit template with two-way binding that lets users modify the fields of the data item.

Posted in: asp.net | Tags: asp.net asp.net 4.0 asp.net ajax ajax dataview providing data

---