DataTable support is back in MS Ajax and I’m glad to see that this feature is back. Why? Because DataTables are a great way to get data back into the client and bind it quickly. For example to load a DataTable into a dropdown listbox is as simple as this (including control initialization):

// *** We need to explicitly fire code

// *** when the page and scripts have loaded

Sys.Application.add_load(OnPageLoad);

// *** MS Ajax Controls are 'global' and can only load once

// *** so we have to ensure to load them up front or else

// *** check for null in code.

var ListControl = null;

function OnPageLoad(sender, eventArgs)

{

     // *** Controls can only be loaded once

     ListControl = new Sys.Preview.UI.Selector($get('lstCustomerList'));

}

// *** Note: DataTable functionality requires Microsoft.Web.Preview

// *** Call the Web Service from the client

function GetCustomerTable()

{

    SimpleService.GetCustomerTable(GetCustomerTable_Callback,OnError,OnError);

}

// *** Receives a JSON DataTable result

function GetCustomerTable_Callback(Result)

{

    // *** Convert the raw data result to a DataTable

    var table = Sys.Preview.Data.DataTable.parseFromJson(Result);

    // *** ListControl is defined as a global Ajax Control above

    ListControl.set_textProperty('CompanyName');

    ListControl.set_valueProperty('CustomerId');

    // *** Bind the DataTable to the list

    ListControl.set_data(table);

}

Notice that the data returned from the callback is just a plain JSON object, not a DataTable object as was the case in ATLAS builds. Rather you have to explicitly load the return ‘raw’ object data into a DataTable explicitly, but it’s easy enough to do this.

DataTables are nice, but they are verbose as they send information about the DataTable like basic column information etc. You can also pass other complex types like lists of objects which is more lightweight but can’t easily work with the limited databinding that MS Ajax provides at the moment on the client. I suspect that this will change in the future. Note that the Selector class is part of the Futures set as well – in fact all controls excep the base control class are part of the Futures feature set and are likely subject to significant changes in the future.

While we're talking about passing data back and forth thankfully the basic serialization features are part of the MS Ajax base library so you can pass objects back and forth including complex object and things like lists. This is nothing new in this RC but I like working at the script level but you can fairly easily work with objects on the client and send them back to the server as well. For example, one of the samples I have passes a customer entity from the server to the client, allows making changing to it and then sends that same object back up to the server:

var CurrentCustomer = null;

// *** Receives a JSON Entity object result

function GetCustomer_Callback(Result)

{

    // *** Make the customer global so we can send it back

    CurrentCustomer = Result;

    $get("txtCompany").value = Result.Companyname;

    $get("txtName").value = Result.Contactname;

    $get("txtAddress").value = Result.Address;

    $get("txtCity").value = Result.City;

    $get("txtEntered").value = Result.Entered.format("d");

    $get("lblCustomerMessage").innerHTML="";

}

function SaveCustomer()

{

    CurrentCustomer.Companyname = $get("txtCompany").value;

    CurrentCustomer.Contactname = $get("txtName").value;

    CurrentCustomer.Address = $get("txtAddress").value;

    CurrentCustomer.City = $get("txtCity").value;

    // *** Use MS Ajax Date type

    var date = Date.parse( $get("txtEntered").value );       

    CurrentCustomer.Entered = date;

    SimpleService.SaveCustomer(CurrentCustomer,SaveCustomer_Callback,OnError);

}

function SaveCustomer_Callback(Result)

{

    if (Result)

        $get("lblCustomerMessage").innerHTML="Customer saved.";

}

It’s manual ‘databinding’ for sure, but nevertheless it’s really straight forward to handle the client side data access this way. Note that if you client side validation hooked up that will still fire in response to data entry operations on the field level.

Although I haven’t been using MS Ajax much in production work I’m using my wwHoverPanel control that basically provides this same functionality. I’m certainly not a big fan of JavaScript coding, but I’ve come to appreciate the efficiency of using JavaScript code directly to make small data driven callbacks like this from the UI. I’m finding that in a lot of situations the code to do this sort of thing from the UI level is very light and easy to write. While I’ve been apprehensive about scads of JavaScript code I’ve found that majority of this code is very basic because it essentially UI logic that’s pushing off content on the server for the heavy lifting.

I mention this because one of the things I’ve been working on off and on is the Data Driven Resource Provider administration interface which is mostly AJAX driven using small service callbacks and a single form interface that drives it all. Although there’s a boat load of JavaScript code in this interface, it’s all very simple stuff and typically fairly short snippets of it.