Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs
Contact   •   Articles   •   Products   •   Support   •   Search
Ad-free experience sponsored by:
ASPOSE - the market leader of .NET and Java APIs for file formats – natively work with DOCX, XLSX, PPT, PDF, images and more

DataTable/Set/Row support is back in MS Ajax RC


:P
On this page:

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.

Posted in ASP.NET  Microsoft AJAX  

The Voices of Reason


 

# DotNetSlackers: DataTable/Set/Row support is back in MS Ajax RC


Bruno Figueiredo
December 20, 2006

# re: DataTable/Set/Row support is back in MS Ajax RC

Hi Rick.
Any chance of showing the same code but with a itemview? I can't seem to find any working example of a itemview in the beta2/rc1 ... :(

Thanks.

MattG
December 26, 2006

# re: DataTable/Set/Row support is back in MS Ajax RC

Rick,

Any suggestions for serializing a DataTable to simple JSON on the server side? That is, without all the column definition information being sent as well.

Rick Strahl
December 26, 2006

# re: DataTable/Set/Row support is back in MS Ajax RC

Not with native MS Ajax. wwHoverPanel has a simple JSON Serializer that provides basic serialization of just field data but there's no easy way that you can just plug that into MS Ajax. I suppose it's possible to create a JSON type converter, but I haven't looked into that.

# ASP.NET Forums - Getting a datatable to the client via a webservice


Dave Reed
December 29, 2006

# re: DataTable/Set/Row support is back in MS Ajax RC

Ideally you wouldn't have to convert the JSON object to a DataTable manually. The selector control should do it for you automatically. Agreed? :)

Rick Strahl
December 29, 2006

# re: DataTable/Set/Row support is back in MS Ajax RC

Ideally? Yes sure, but for the moment at least that's not how it works. Ideally you should be able to assign any array/collection and have it work <s>. I did something like this for my own client list control implementation. It doesn't care about what type you are dealing with as long as the DataTextField and DataValueField fields exist in the array passed. It's easy to check for that and the of hooking up the data is pretty trivial.

ASP.NET Forums
May 18, 2007

# Getting a datatable to the client via a webservice - ASP.NET Forums

 

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2019