Home / AJAX

HOW TO Instantiate an Ajax DataView Control Declaratively

RSS
Modified on 2009/12/04 17:49 by Stephen Walther Categorized as Uncategorized
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.