Techbubbles

Data View Control in ASP.NET AJAX 4 Preview 4

Introduction

The Data View Control in AJAX 4 has some cool features like it can be bind to any JavaScript object or array.It can also be bind to any ASP.NET AJAX Component. You can read the post to know about  ASP.NET AJAX 4.0 Preview 4 features.

Providing Data to the Data View Control

Data can be provided to Data View in a number of ways.

  • Setting the data property of the Data View Control

Example:

 
    <ul sys:attach="dataview" class="sys-template"
        dataview:data="{{ imagesArray }}">
        <li>   
            <h3>{{ Name }}</h3>
            <div>{{ Description }}</div>
        </li>
    </ul>


You can set the data property in declaratively as shown in the above example.

 

  • Using Code

 

<script type="text/javascript">
     
        function pageLoad()
            {
              // Create DataView

var imageList = $create(Sys.UI.DataView, null, null, null,

$get("imageListView"));

             // Call Web service proxy from script
             ImagesWcfService.GetImages("Name", querySucceeded);
           }
        function querySucceeded(results)
        {
              // Set returned data on DataView
           $find("imageListView").set_data(results);
        }

</script>

<ul id="imagesList" sys:attach="dataview" class="sys-template">
<li>
<h3>{{ Name }}</h3>
<div>{{ Description }}</div>
</li>
</ul>

  • You can also specify a ASP.NET Web service or WCF service directly in the dataProvider property of the Data View control.
<ul sys:attach="dataview" class="sys-template"
    dataview:autofetch="true"
    dataview:dataprovider="../Services/imagesService.svc"
    dataview:fetchOperation="GetImages">
<li>    
    <h3>{{ Name }}</h3>
    <div>{{ Description }}</div>
/li>
ul>

When you set the dataProvider property, DataView control will use the provider to fetch data using the fetchOperation property.

You need to download the AJAX 4.0 Preview 4 to use Dataview control.

Conclusion

DataView control provides a number of features such as layout templates and external templates, command bubbling and so on.

Related Posts:

  • madeeha

    could u please tell me how can i access a single item information, by clicking on the item, shown in a dataview..please

%d bloggers like this: