Passing complex types to service calls using jQuery & JayRock

Scenario: Consider a web form having several fields, whose values are to be submitted to the server through an AJAX call.


This can be easily achieved using jQuery’s $.ajax(), passing all the form elements (like first name, last name, city etc) as parameters to the AJAX call.

However, in reality, most of our web forms contain large number of input fields and hence the $.ajax() method will be overloaded with several parameters both at the client side as well as at the server side. This is cumbersome and is not a good programming practice.

Solution: The best practice in this scenario is to build a Data Transfer Object (DTO) on the client side and pass it to the server. This is what Dave Ward explained in his excellent article - “Using complex types to make calling services less… complex”.

If you are working on NET 3.5 framework, Dave’s article is the solution. In .NET 3.5, the System.Web.Script.Services Namespace can be imported, which makes webservices accessible in JavaScript. Also, it has the ability to accept JSON object from client side code and parse it at the server.

However, in .NET 2.0 framework, JSON object cannot be parsed inherently and hence have to use libraries like JayRock. Here is how you can achieve the same using JayRock. The difference is in the way how you pass your “data” parameter in ajax call.

$('#btnSubmit').click(function() {
        //Build JSON object by looping through all text boxes
        var objDetails = {};
        $('input[type=text]').each(function() {
            objDetails[] = this.value;
        //Stringify the JSON object using the below method from json2.js
        var jsObj = JSON.stringify(objDetails);
        //jQuery ajax call. Note the data parameter, which is different from normal ajax parameter.
            type: "POST",
            url: "CTypesHandler.ashx",
            data: "{'id':'1','method':'fnAjaxMethod','params':{'obj':" + jsObj + "}}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: fnSuccess,
            error: function(xhr, status, errorThrown) {
                alert('Error' + errorThrown);
        function fnSuccess(response) {
            var obj = response.result.details;
            $('#divMessage').html(obj.FirstName + ' ' + obj.LastName + ' resides at ' + obj.City + ', ' + obj.State + ', ' + obj.Country);

Here is a simple demo. You can appreciate the demo if you can see how data is being requested and returned, in json format,  using firebug. (Few optimizations are yet to be done.)

Thanks to Praveen (my Technical Architect) for helping me with the concept. Thanks to Dave for replying to several of my queries.

Beware – jQuery unbind() vs removeAttr()

Here is a jQuery bug which suck few hours of my time:

  1. unbind() works only on events attached using jQuery.
  2. removeAttr() does not work on events added using jQuery

Confusing? Here is the scenario which explains better:

I have a server side asp button(btnTest), for which an “onclick” event is attached on page load (in code behind) like this:

btnTest.Attributes.Add("onclick", "fnTestMethod()")

Without changing server side code, I need to change the functionality of button click (reason: deployment issues). So my initial approach was simple -  To unbind the click event from my asp button using jQuery like this:

But this didn’t work!

I was confused! I didn’t understand how page life cycle was impacting DOM. After wasting a couple of hours, I remembered the removeAttr() and tried it:


and it worked!
On googling, I came to know that this is a bug in jQuery’s tracker and it doesn’t have a fix. You may find a detailed explanation of the bug here.

In short, the explanation says that:
* unbind() works only on events attached using jQuery’s functions like bind(), click() etc. It didn’t work for me as I was binding in my server side code like: btnTest.attributes.add().
* removeAttr() does not work on events added using jQuery.

Hence, if you want to change the click event but not sure if you have added it from code behind or jQuery, write a safer code like this as suggested in the bug tracker:


Mentioning about the bug here so that readers may not waste their time in similar scenarios. I still love jQuery a lotttt!!! :)!!

Restructured my site Moved my technical blog from to the root. Created a new subdomain - Labs.NovoGeek.Net for my little experiments. Placed only few important demos as of now. Will slowly move all my silly/stupid code snippets there :)

Update(11th May, 2009): Purchased the domain "". It was parked by someone till recently and I could get it last night :)
Configured Domain Forwarding to So all existing URL's to will work the same with :) 

 Update(24th May, 2009): Redirected my .net domain to .com domain. Now my site's actual address is :)