Ajax.NET Converters - Why?

Tags: .NET, AJAX, Ajax.NET, ASP.NET, JSON

I got some questions concerning the Ajax.NET Professional converters. Here is my answer I wrote to the Google group already:

1) I will make a first example with a object called Person. The Person object has several properties like FirstName, FamilyName and Age. If you use the standard way Ajax.NET is serializing this object following code will be transfered to the client (simplified, removed the type tag):

{"FirstName":"Michael","FamilyName":"Schwarz","Age":28}

Now we want to return a big list of Person objects (using an array or collection). The returned code will look like this:

[
 {"FirstName":"Michael","FamilyName":"Schwarz","Age":28},
  {"FirstName":"Michael","FamilyName":"Schwarz","Age":28},
  {"FirstName":"Michael","FamilyName":"Schwarz","Age":28},
  {"FirstName":"Michael","FamilyName":"Schwarz","Age":28}
]

As you can see we are transfering the property name for each item of the list. Wouldn't it be faster to use following data?

[
  {"Michael","Schwarz",28},
  {"Michael","Schwarz",28},
  {"Michael","Schwarz",28},
  {"Michael","Schwarz",28}
]

Yes, of course, you spend a lot!! This i.e. is used in the DataTable converter. The converter will first return the columns used in the table. Then the rows will be added like my example above, each field must be at the correct position. If you have large tables it will save a lot of data...!

2) The second example I will show you is the use of Client Script code that is rendered by the converters. If you have a method on the server-side code that will accept one argument that will be a Person object you can write following JavaScript code:

function doTest1(a, b, c) {
    var p = new Object();
    p.FirstName = a;
    p.FamilyName = b;
    p.Age = c;

    Namespace.Classname.Method(p, mycallback);
}

There is one more way to do this in a little bit shorter way:

function doTest1(a, b, c) {
    var p = {"FirstName":a,"FamilyName":b,"Age":c};

    Namespace.Classname.Method(p, mycallback);
}


Now we can add a JavaScript code to our converter that will allow following code:

function doTest1(a, b, c) {
    var p = new Person(a, b, c);

    Namespace.Classname.Method(p, mycallback);
}

This is more readable and comfortable if you need the Person object on several places, several pages.

3) The next idea is to have methods on the Person object. In one of my examples I added a .save() method to the JavaScript object. This method was sending the object to a Ajax.NET method to store it i.e. in the database. Here are more ideas:

alert(p.Fullname);    // returns this.FirstName + " " + this.LastName

p.Show();    // this will show a alert box with all the details

p.WriteInfo(ele);    // this will write the details to the .innerHTML of the ele element


4) The JavaScript Person class can implement the .toJSON() method to reduce the data send to the server when using the object as an argument for a Ajax.NET method (see 1).

 


If you combine all the three ideas together you are able to reduce the size of data that is transfered between server-client and client-server, you will get smaller JavaScript code that is using this data type and you will get the same OOP programming model you are using on the .NET server-side.

2 Comments

Comments have been disabled for this content.