Home / AJAX

WALKTHROUGH Using a DataView with local data

RSS
Modified on 2009/12/04 17:37 by Stephen Walther Categorized as Uncategorized
The DataView component is part of the ASP.NET Ajax Library and located in the Sys.UI namespace. It provides a way to load JSON data and bind it to custom templates defined within a page. In this walkthrough you'll see how required DataView scripts can be loaded, how the DataView component can be instantiated, assigned local JSON data and then bound to a custom client-side template.

To get started using the DataView component you'll want to references the Start.js file in the ASP.NET Ajax Library using the standard <script> element. Start.js contains the Script Loader which can be used to load scripts required by the DataView. Once required scripts are loaded an instance of the DataView component can be created and JSON data can be assigned to its data property. An example of referencing Start.js, loading required scripts and invoking the DataView component is shown next:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>
<script type="text/javascript">
    Sys.require([Sys.components.dataView], function() {
        var customers =
        [
            { ContactName: 'Fred Johnson', Country: 'USA' },
            { ContactName: 'Davie Jones', Country: 'England' }
        ];

Sys.create.dataView('#CustomerView', { data: customers }); }); </script>


As the DataView component is created in the previous code sample a value of "#CustomerView" is passed as the first parameter and a JSON object defining a data property is passed as the second parameter. The first parameter tells the DataView component to bind to a client-side template that's defined in the page with an ID of "CustomerView". The second parameter binds the customers JSON object to the DataView component's data property. An example of the CustomerView template is shown next:

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


The <div> element registers itself as a template using the class="sys-template" syntax and defines two one-time bindings using the {{PropertyName}} syntax. In this example the ContactName and Country JSON object properties are bound in the template. Because there are two customer objects located in the customers JSON object the DataView and associated template will automatically output two records when the page is rendered.

The complete code for the page is show next:

<!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></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], function() {
            var customers =
            [
                { ContactName: 'Fred Johnson', Country: 'USA' },
                { ContactName: 'Davie Jones', Country: 'England' }
            ];
            Sys.create.dataView('#CustomerView',
            {
                data: customers
            });
        });
    </script>
</head>
<body xmlns:sys="javascript:Sys">
    <div id="CustomerView" 
        class="sys-template">
        <ul>
            <li>{{ContactName}} - {{Country}}</li>
        </ul>
    </div>
</body>
</html>