Home / AJAX

HOW TO Instantiate an Ajax DataView Control Imperatively

RSS
Modified on 2009/12/04 17:47 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 imperatively using the ASP.NET Ajax Library. You'll also see how jQuery can be used to create DataView instances.

The DataView component can be created in code by using the Sys.create function provided by the ASP.NET Ajax Library. An example of using Sys.create to instantiate a DataView component which calls a WCF service and then binds data to a template is shown next (a complete walk-through of calling a WCF service can be found here):

<script type="text/javascript" src="Scripts/MicrosoftAjax/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'},
            itemRendered: CustomerRendered
        });
    });

function CustomerRendered(dataView, ctx) { Sys.bind(Sys.get("li", ctx), "innerHTML", ctx.dataItem, "ContactName"); } </script>


This example loads Start.js from the ASP.NET Ajax Library so that the Script Loader is available to use in the page. The Script Loader is then used to load the scripts that are required to use the DataView component and make calls to remote services to fetch data.

Once all of the required scripts are loaded an instance of the DataView component is created imperatively and bound to a client-side template with an ID of "CustomerView". Once the DataView object is loaded it automatically fetches data from a WCF service named CustomerService.svc by calling a service operation named GetCustomers. Data returned from the service operation is iterated through and the CustomerRendered function is invoked as each row is processed. CustomerRendered binds a ContactName property to the innerHTML property of an <li> element defined in the client-side template that the data is bound to. The code for the template is shown next:

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


If the jQuery library is loaded using the Script Loader the standard jQuery plugin syntax can be used to imperatively create the DataView as opposed to using Sys.create. The following code sample accomplishes the same result as the previous sample that used Sys.create but uses a jQuery selector to locate the target template where data will be bound:

<script type="text/javascript" src="Scripts/MicrosoftAjax/Start.js"></script>
<script type="text/javascript">
    Sys.require([Sys.scripts.jQuery, Sys.components.dataView, Sys.components.dataContext], 
      function() {
        $('#CustomerView').dataView(
            {
                dataProvider: "/Services/CustomerService.svc",
                fetchOperation: "GetCustomers",
                autoFetch: true,
                fetchParameters: { numberToFetch: 10},
                itemRendered: CustomerRendered
            }
           );
        });

function CustomerRendered(dataView, ctx) { Sys.bind(Sys.get("li", ctx), "innerHTML", ctx.dataItem, "ContactName"); } </script>