How to: Instantiate an AJAX DataView Control Declaratively

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

In Microsoft ASP.NET AJAX, you can instantiate controls and behaviors from markup without writing JavaScript. This topic describes how to use markup to register, instantiate, and set properties of the ASP.NET AJAX DataView client control in an HTML or ASP.NET Web page (.aspx file).

The DataView control renders UI for data by using a declarative HTML item template. If the data is a JavaScript array, the DataView control renders one instance of the template for each data item in the array.

The DataView control is associated with an HTML container element that acts as a template. The DataView control renders content by using elements inside the container element that can be bound to data items. By default, the control uses the contents of the container element as an item template, but you can also point to an external item template specified elsewhere on the page.

The example that is used later in this topic shows how to work with a WCF Web service. For information about the Web service that is referenced as the data source in this example, see Walkthrough: Using an ASP.NET AJAX Template.

Registering the DataView Control in Markup

To register a control in markup, you first declare an XML namespace by mapping the prefix sys to the JavaScript Sys namespace. This mapping is used by ASP.NET AJAX system attributes. In order to register a control for declarative instantiation, you then declare a namespace mapping by using a control-specific prefix to the type name of the control. This mapping is used to instantiate the control and to set its properties.

In addition, you register the IDs of the elements that will be activated in order to support declarative markup. You can specify a list of elements or specify all elements.

To register the DataView control in markup

In the opening <body> tag, add the following attributes:
- An xmlns attribute that maps a tag prefix (sys) to javascript:Sys, which registers the Sys namespace.
- An xmlns attribute that maps a tag prefix (such as dataview) to the fully qualified name of the DataView control class (javascript:Sys.UI.DataView).
- A sys:activate attribute that specifies the IDs of elements that will be activated in the document. To specify multiple IDs, separate them with commas. Use "*" to indicate that all elements will be activated.
The following example shows how to register the ASP.NET AJAX DataView control.
```
<body
  xmlns:sys="javascript:Sys"
  xmlns:dataview="javascript:Sys.UI.DataView"
  sys:activate="*" >
```
The sys:activate attribute is set to "*", which indicates that all elements in the document will be activated to support declarative markup.

Instantiating a DataView Client Control in Markup

To instantiate a DataView control, you use attributes to attach the control to an HTML container element, such as a ul element or a div element.

To instantiate a DataView control in markup

Add a sys:attach attribute to the opening tag of a container element and specify the prefix that you registered for the Sys.UI.DataView class as the type of the control to instantiate.

The following example shows how to instantiate a DataView control by using a sys:attach attribute in the opening tag of a ul element.
```
<ul sys:attach="dataview">
  <li></li>
  <li></li>
</ul>
```

Setting Properties of the DataView Control

You set properties of the DataView control to specify the data source and any parameters that are necessary to specify the data source. You can also set properties that do the following:

Specify the ID of an external item template.
Specify a CSS class that contains styles to apply to selected items.

To provide data to the DataView control, you must specify a value for the dataProvider or data properties.

The following table shows the most frequently used properties of the DataView control.

aProperty	Use
autoFetch	Specifies a Boolean value that indicates whether data should be retrieved immediately from a data source when the page loads, and also when the provider is changed or the fetch operation is changed.
data	Specifies the bound data (JavaScript object or array) to render using the template. This property is used for direct binding to data when no data source component (such as a Web service) is specified as the data provider.
dataProvider	Specifies the data provider to fetch data from, such as a Web service or ADO.NET Data Service.
itemTemplate	Specifies an external item template to use to render the data.
fetchOperation	Specifies a query string or method name to use to retrieve data from the data provider.
selectedItemClass	Specifies the CSS class to apply to the currently selected item.

To set DataView properties in markup

In the markup for the container element for the DataView control, add attributes that use the following format:

prefix:propertyname=value

For prefix, use the prefix that you defined for the DataView control.

The following example shows a ul element that is used as a DataView template. The DataView control uses the CompanyService Web service from the Walkthrough: Using an ASP.NET AJAX Template as the data provider.
```
<body xmlns:sys="javascript:Sys"
    xmlns:dataview="javascript:Sys.UI.DataView"
    sys:activate="*">
  <ul class="list sys-template"
      sys:attach="dataview"
      dataview:autofetch="true"
      dataview:dataprovider="CompanyService.svc"
      dataview:fetchoperation="GetCompanies"
  >
    <li>
      <span>{binding CompanyName}</span>
    </li>
  </ul>
</body>
```
In the example, the dataProvider property specifies the URL of the WCF service. The autoFetch property specifies that the data should be retrieved immediately from a data source when the page loads. The fetchOperation property specifies the operation name to use to retrieve data from the WCF Service for the database.
Add markup in the container element for the data items to repeat in the template.

The following example shows how to enable the data to be repeated in the template using live one-way binding. (This example is a part of the previous example.)
```
    <li>
      <span>{binding CompanyName}</span>
    </li>
```
For more information about data binding, see How to: Create an Editable View with Two-Way Data Binding.

Example

The following example shows how to instantiate the DataView control by using markup. For information about the Web service that is referenced as the data source in this example, see Walkthrough: Using an ASP.NET AJAX Template.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Company List</title>
  <link href="divList.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="MicrosoftAjax.js"></script>
  <script type="text/javascript" src="MicrosoftAjaxTemplates.js"></script>
</head>

<body xmlns:sys="javascript:Sys"
    xmlns:dataview="javascript:Sys.UI.DataView"
    sys:activate="*">
  <ul class="list sys-template"
      sys:attach="dataview"
      dataview:autofetch="true"
      dataview:dataprovider="CompanyService.svc"
      dataview:fetchoperation="GetCompanies"
  >
    <li>
      <span>{binding CompanyName}</span>
    </li>
  </ul>
</body>