HighOnCoding.com: Passing JavaScript Objects to the CLR World

Passing JavaScript Objects to the CLR World

AzamSharp
Published Date: 11/3/2009 11:24:59 AM
Views: 6687

Abstract:
Every now and then we need to pass information from JavaScript to the CLR world using Ajax. There are number of methods for performing this action. In this article we will see different ways of passing JavaScript data to the CLR world.
Passing Parameters as Primitive Types:

The easiest and the most common way of passing the information to your server side method from JavaScript is to send it as individual parameters. The code below shows how to call the server side InsertCustomer method with three arguments.

The Customer JavaScript class is a simple class with three properties namely firstName, lastName and age.

The server side InsertCustomer methods is shown below:

This will work as expected and you will receive all the three arguments in your WebMethod. The problem arises when the list of arguments to pass increases. In that case you will have to increase the number of parameters for your InsertCustomer method which sounds like a bad idea. It is always a good programming practice to have minimal number of parameters for your methods. If the method is taking lots of parameters then you should always replace them with a single class instance.

The question is what parameter type should be use for InsertCustomer method. Let's try with the System.Object type and see how it behaves. The implementation below shows the updated InsertCustomer method that takes "Object" as an input parameters.

The JavaScript call also changes since now you are sending the complete object instead of the individual parameters.

If you debug the application you will notice that all the properties of the customer JavaScript object were successfully passed to the InsertCustomer method. The interesting thing to note about this object parameter is that it has the type of Dictionary<String,Object>. This is because JavaScript treats the properties as HashTable. If you like to access the properties from the C# side you can use the following code:

Since now you know that the object passed is of type Dictionary<String,Object> so you can replace the object with Dictionary<String,Object>. But instead of going down that path let's see if we can find a different way.

Creating CLR Class to Capture JavaScript Class:

We have created a CLR class called Customer with FirstName, LastName and Age properties as shown below:

We updated the InsertCustomer method to take the CLR Customer object as an argument as shown below:

The result is shown below:

You will notice that the JavaScript object populates the CLR object properties. If you check out the JavaScript proxy generated then you will find out that the JavaScript object will simply fill in any Dictionary containing any of the fields exposed by the Customer JavaScript object.

This means that we can even have a CLR object called "Order" with FirstName, LastName and Age and it will be filled with the JavaScript object properly.

Using the Dynamic Keyword in .NET 4.0:

If you are using VS2010 then you can also make use of the dynamic keyword. The dynamic keyword will end up being a Dictionary<String,Object> object and you will have to use Name,Value pair to access the values as shown below:

If you are looking for a much cleaner design then you can always have CLR classes for the sole purpose to hold the passed in JavaScript objects. This means you will have a separate class for JavaScript Object called JSCustomer which will be responsible to hold the values passed from the client side Customer object.

The properties are not case sensitive but if you want your CLR JavaScript projection object to be similar to your real JavaScript object then you can use camel casing as shown above.

Please note that in this article we used the Microsoft Ajax framework for sending Ajax request. In the next post we will check if the same behavior exists when using JQuery Ajax framework.

Conclusion:

In this article we learned different ways of passing information from JavaScript to the CLR world using Ajax. We used Microsoft Ajax to facilitate us with Ajax request. In the next article we are going to see how JQuery Ajax API behaves when sending JavaScript objects to the CLR planet.

[Download Sample]

Comments/Feedbacks


	Subject: Good job Name: Michael Guilfoyle Date: 11/5/2009 4:33:15 AM Comment: Thanks for sharing.


	Subject: Good Job Name: santosh Date: 12/8/2009 9:25:48 PM Comment: Hi Azam, I am regular visitor of your site. your are doing excellent job.


	Subject: Nice Article Name: Thanigainathan Date: 12/14/2009 12:45:56 AM Comment: Hi, Nice article. The dynamic thing seesm to be not clear. Please throw soem more light one them. Thaks, Thani


	Subject: Geat Post Name: Rahul Date: 12/14/2009 7:27:39 AM Comment: I was never sure how you would use .net 4's dynamic data type outisde the interop scenario. This is an excellent article. Great Job!


	Subject: Nice explaination Name: Nazrul Islam Date: 12/15/2009 6:42:24 AM Comment: Nice article. Thanks for your support


	Subject: nice Name: Ihsan ila Date: 12/17/2009 6:31:19 AM Comment: very nice helpfull articel


	Subject: Good Article Name: Brandon M. Hunter Date: 12/17/2009 6:46:23 AM Comment: What was your reference on its good to have minimal parameters pass to a method?


	Subject: re: Good Article Name: Mohammad Azam Date: 12/17/2009 7:06:45 AM Comment: Hi Brandon, Most of the refactoring books will encourage the use of passing objects instead of single primitive type arguments. The reason is because it is hard to maintain a list of input parameters for a method. If all the parameters are related then you can make an object out of them and pass the object instead of 10+ parameters.