Home / AJAX

WALKTHROUGH Using a DataView with server data

RSS
Modified on 2009/12/04 17:45 by Stephen Walther Categorized as Uncategorized
The ASP.NET AJAX Library's DataView component can be used to bind local or remote JSON data to client-side templates. In this walkthrough you'll see how to call a WCF service that returns Customer objects and then bind the objects to a template.

The DataView component exposes a data property that accepts data from a locally defined JSON object. In situations where data is fetched from a remote service (such as a WCF, ASMX or REST service) additional properties exposed by the component can be used. Key properties used to define the location where remote JSON data can be fetched are shown in Table 1.

Property Name Description
dataProvider Used to define the URI for a remote service or to bind to an ASP.NET Ajax Library DataContext component.
fetchOperation Used to define the service operation that should be called to fetch data.
autoFetch Accepts a Boolean value that determines if data is fetched immediately as the DataView component executes or if data will be loaded later.
fetchParameters Used to define any parameters accepted by the service operation that will be called by the DataView. This property accepts a JSON object containing each parameter name and value.

Table 1. Key DataView component properties used to retrieve data from remote services.

An example of using the ASP.NET Ajax Library's Script Loader (located in Start.js) to load required scripts and then instantiate a DataView instance is shown next. Note that the parameters defined in Table 1 are used to define the service URI, fetch operation, whether to auto fetch or not and fetch parameters.

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>
<script type="text/javascript">
    Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() {
    Sys.create.dataView("#CustomerView",
        {
            dataProvider: "/Services/CustomerService.svc",
            fetchOperation: "GetCustomers",
            autoFetch: true,
            fetchParameters: {numberToFetch: '10'}
        });
    });
</script>


In this example the DataView component is instantiated, bound to a client-side template with an ID of CustomerView and then used to automatically fetch data from a WCF service named CustomerService.svc. As the GetCustomers service operation is called a numberToFetch parameter value of 10 is passed to the service operation to determine how many records to return. The template that the DataView component is bound to is shown next. The <div> element is marked as a template by using the class="sys-template" syntax and the ContactName property is bound to the template using a one-time binding syntax (double brackets on each side of the property name).

<div id="CustomerView" class="sys-template">
    <ul>
        <li>{{ContactName}}</li>
    </ul>
</div>


The complete code for the page follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Retrieving Data from a Remote Service using the DataView</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>
<script type="text/javascript">
    Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() {
    Sys.create.dataView("#CustomerView",
        {
            dataProvider: "/Services/CustomerService.svc",
            fetchOperation: "GetCustomers",
            autoFetch: true,
            fetchParameters: {numberToFetch: '10'}
        });
    });
</script>
</head>
<body>
    <div id="CustomerView" class="sys-template">
        <ul>
            <li>{{ContactName}}</li>
        </ul>
    </div>
</body>
</html>


The code for the WCF service is shown next:

[ServiceContract(Namespace = "http://www.yourcompany.com/ApplicationName")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class CustomerService
{
    [OperationContract]
    public List<Customer> GetCustomers(int numberToFetch)
    {
        using (NorthwindDataContext context = new NorthwindDataContext())
        {
            return context.Customers.Take(numberToFetch).ToList();
        }
    }
}