The
DataView component provides a convenient way to access local or remote data and bind it to client-side templates for display in the browser. An instance of the DataView can be created
imperatively using JavaScript or declaratively using HTML syntax. This HOW TO tutorial will demonstrate how to create an instance of the DataView component declaratively and attach it to a client-side template using ASP.NET Ajax Library features.
To get started using the DataView component you'll first need to load required scripts using the
Script Loader. This can be done by referencing Start.js in the ASP.NET Ajax Library and using
Sys.require as shown next:
<script type="text/javascript" src="Scripts/MicrosoftAjax/Start.js"></script>
<script type="text/javascript">
Sys.require([Sys.components.dataView, Sys.scripts.WebServices]);
</script>
The
Sys.components.dataView reference will automatically load all scripts required in order to use the DataView component. Once the required scripts are available two namespace prefixes must be defined within the HTML document. These namespaces are typically defined on the <body> element but can be defined on a child as well. An example of defining the namespace prefixes and their associated values is show next:
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView">
</body>
The
sys namespace prefix provides a way to attach a DataView component to a client-side template declaratively. The
dataview namespace prefix defines a DataView component that can be attached to one or more templates. Once the namespace prefixes are defined the DataView component can be attached to a template and properties of the component can be set. The DataView component's data source can be defined locally using a JSON object or fetched from a remote service. An example of defining a local JSON object that can be assigned to a DataView is shown next:
<script type="text/javascript">
var customers =
[
{ ContactName: 'Fred Johnson', Country: 'USA' },
{ ContactName: 'Davie Jones', Country: 'England' }
];
Sys.require([Sys.components.dataView]);
</script>
Once data is available in the page it can be assigned to the DataView's
data property declaratively. The following code shows how to attach a DataView instance to a template with an ID of CustomerView and bind the JSON object to the component's data property:
<div id="CustomerView"
class="sys-template"
sys:attach="dataview"
dataview:data="{{customers}}">
<ul>
<li>{{ContactName}} - {{Country}}</li>
</ul>
</div>
The DataView can also be used to fetch data from remote services such as WCF or REST services. The location of the service and parameters that need to be passed can be defined declaratively using the dataview namespace prefix (a complete walk-through of calling a WCF service can be found
here):
<div id="CustomerView"
class="sys-template"
sys:attach="dataview"
dataview:autoFetch="true"
dataview:dataProvider="/Services/CustomerService.svc"
dataview:fetchParameters="{{ {numberToFetch: 10} }}"
dataview:fetchOperation="GetCustomers">
<ul>
<li>{{ContactName}}</li>
</ul>
</div>
This example instructs the DataView to fetch data from the CustomerService.svc service and call a service operation named GetCustomers. The number of customers to fetch (10 in this example) is passed using the fetchParameters property. Because the DataView's autoFetch property is set to true the data will be retrieved automatically once the page has loaded.