Microsoft AJAX Library Preview 6 & DataView

Oct 17th, 2009 | By | Category: Web Apps

Yesterday I came to know about Microsoft AJAX Library Preview 6 from Scott Guthrie’s post.I have not taken look into this library earlier.The rich set of JavaScript API looked very impressive to me.I became a fan of DataView control very quickly.I am sure this will be extremely useful and productive for ASP.NET developers who are conversant with the concept of server controls like DataGrid/GridView.In this post we will take a look into how to use this control.As the support for  imperative programming is added in Preview 6 I will be sticking to that style only.

First we need to add the following script reference in our page:

<script src="Scripts/MicrosoftAjax/start.debug.js" type="text/javascript"></script>

This is the reference to the Client Script Loader.This component loads all the client scripts required by the page automatically and in parallel.It makes sure that each script is loaded only once and also supports lazy loading i.e. loading the scripts when they are required.

I have also added the following style:

    .sys-template { visibility:hidden; display:none; }

This style is used by the AJAX Library (MicrosoftAjaxTemplates.js) to decide whether a control is a templated control or not.The initial html I have used is shown below:

<body xmlns:sys="javascript:Sys">
    <form id="form1" runat="server">
    <div>
        <h4>Delivery Header</h4>
        <table id="tblOrders" class="sys-template" border="1">
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>

The intention here is to display the Delivery Order information in this table and data will be provided by ASMX Script Service as shown below:

public class Delivery
{
    public string OrderNumber { get; set; }
    public string DeliveryDate { get; set; }
    public DeliveryDetail[] DeliveryDetails { get; set; }
}
public class DeliveryDetail
{
    public string SKU { get; set; }
    public string Quantity { get; set; }
}

  [WebMethod]
   public Delivery[] GetDeliveryItems()
   {

     ...........

   }

Now how to populate data in this table.One way is to invoke the script service and then loop through the object and dynamically add rows in the table.But now we have another better way as shown in the script block below:

<script type="text/javascript">
   Sys.require([Sys.components.dataView, Sys.scripts.WebServices]); 

   Sys.onReady(function() {
       var master = Sys.create.dataView("#tblOrders",
            { 

                dataProvider: "/Services/AJAXPreview6Demos.asmx",
                fetchOperation: "GetDeliveryItems",
                autoFetch: "true",
                initialSelectedIndex: 0
            }
        ); 

   });
</script>

The call to Sys.Require ensures that scripts required for proper functioning of Sys.components.dataView, Sys.scripts.WebServices is properly loaded.

Sys.onReady is invoked when DOM is properly loaded and ready quite similar to jQuery ready event.

Sys.create.dataView creates an instance of the DataView control on the table tblOrders.As shown above we have to just specify the script service url (dataProvider) and webmethod (fetchOperation).The autoFetch property determines whether data will be populated by default or not.

We need to add following lines of code in the table markup as shown below:

<table id="tblOrders" class="sys-template" border="1">
    <tr class="row">
        <td>
            {{OrderNumber}}
        </td>
        <td>
            {{DeliveryDate}}
        </td>
    </tr>
</table>

{{OrderNumber}} means that first cell will contain the value of OrderNumber field of Delivery class returned by the script service.As we are getting an array Delivery objects from the service, each item in the array will result in each row of table rendered by the library.

This will work fine but we have no column headers.This we can do quickly using rendered event of the DataView.This event is fired when data is about to be rendered in the data view.

var master = Sys.create.dataView("#tblOrders",
     { 

         dataProvider: "/Services/AJAXPreview6Demos.asmx",
         fetchOperation: "GetDeliveryItems",
         autoFetch: "true",
         initialSelectedIndex: 0,
         rendered: RenderDeliveryHeader
     }
 );

function RenderDeliveryHeader(sender, args)
{
    var tbl = Sys.get('#tblOrders');
    var row = tbl.insertRow(0);
    var cell = row.insertCell(0);
    cell.innerHTML = "Delivery No.";
    cell = row.insertCell(1);
    cell.innerHTML = "Delivery Date";
}

Suppose we have to also implement a rule that if DeliveryDate is not in current month then font of that row will be red.Here we have to check the value of each data item and then alter the rendering.We can use the itemRendered event as shown below.This event is triggered after each item is rendered.

var master = Sys.create.dataView("#tblCities",
     { 

         dataProvider: "/Services/AJAXPreview6Demos.asmx",
         fetchOperation: "GetDeliveryItems",
         autoFetch: "true",
         initialSelectedIndex: 0,
         rendered: RenderDeliveryHeader,
         itemRendered: ItemRenderedDeliveryHeader
     }
 );

function ItemRenderedDeliveryHeader(sender, args)
{
    var deliverymonth =  parseInt(args.dataItem.DeliveryDate.split("/")[0]);
    var deliveryyear  = parseInt(args.dataItem.DeliveryDate.split("/")[2]);
    var currentyear   = new Date().getFullYear();
    var currentmonth = new Date().getMonth() + 1;
    if (deliveryyear!= currentyear || deliverymonth!=currentmonth)
    {
        Sys.UI.DomElement.addCssClass(Sys.get('#tblCities').rows[args.index], "row");
    }
}

So far we have seen how render a single DataView and in the next post we will cover DataViews with Master/Detail relationship.


Kick It on DotNetKicks.com
Tags: ,
  • http://www.webmastercrap.com/?p=24475 Webmaster Crap » Blog Archive » Microsoft AJAX Library Preview 6 & DataView – Coding N Design

    [...] Read the original post: Microsoft AJAX Library Preview 6 & DataView – Coding N Design [...]

  • http://scriptsrss.com/microsoft-ajax-library-preview-6-dataview-coding-n-design/ Microsoft AJAX Library Preview 6 & DataView – Coding N Design Scripts Rss

    [...] the original here:  Microsoft AJAX Library Preview 6 & DataView – Coding N Design By admin | category: Object, asp.net script | tags: are-conversant, are-getting, asp, [...]

  • Kiwi

    I would appreciate if you have the source code for this example, thanks for sharing, great article.

  • http://twitter.com/surajit29ghosh Surajit Ghosh

    Nice article to get started with ajax dataview

  • http://codingndesign.com/blog/?p=109 Microsoft AJAX Library Preview 6 & Data Binding – Coding N Design

    [...] the RSS feed for updates on this topic.Powered by WP Greet BoxSorry for a long absence.In my last post I had discussed about Microsoft AJAX Library Preview 6 and the DataView control.In this post we [...]

  • http://tore.aurstad.net/ Tore Aurstad

    I have worked a lot with ASP.NET GridView control. This new feature is exciting, because now one can create a own template and fully control the (X)HTML rendered in the browser. The syntax for databinding {{myproperty}} looks very convenient. I do not think ASP.NET GridView will be replaced by this new technologies, but this clearly will be a good alternative.

    Do you know of any tutorials for starting some simple tests with client side DataView? I got Visual Web Developer Express and want to test out calling a simple .asmx page. I think I will play a bit with this new technology. The support of WCF services also looks very promising. Great article of yours!

  • Erkan

    How did you know args had an index property? I couldn't find any documentation on the dataview control.