I recently came across a question on StackOverflow, where the author was having trouble calling a JSON based web service from his ASPX page using jQuery. He was passing a user defined JavaScript object. I decided that I would quickly put a project together describing how to do so, for my future reference, and for anyone else who needs help. Here is my original answer on StackOverflow. I’ll be offering a higher level of explanation here in the post.

Below is the web method that we’ll be calling, in my ASPX page code behind. Note that a web method has to be declared as static,

[System.Web.Services.WebMethod]
public static Contact getContact(Contact cnt)
{ 
    cnt.name="Abijeet Patro"; 
    cnt.phone="Blah Blah";
    return cnt;
}

The user defined object that you pass through JavaScript has to have the same properties as the user defined object on the server. Say for example that you were passing the following from JavaScript –

var cnt = { name : 'Hello', phone :'Hello' };

The object we defined in JavaScript has two properties, name and phone in lower case letters.

This is exactly similar to the class defined on the server –

public class Contact 
{
    public string name {get;set;}
    public string phone {get;set;}
}

Note that the properties in the class have to be public

Now we’ll see how to call this web method from our ASPX page,

$(document).ready(function () {
    var cnt = {name:'Hello',phone:'Hello'};
    $.ajax({
        type: "POST",
        url: "/Default.aspx/getContact",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({'cnt':cnt}), // Check this call.
        success: function (data) {
            debugger;
        }
    });
});

For an explanation of the options used here check jQuery ajax API documentation,

I’ll be discussing two noteworthy things,

1. Sending data to the server

Data (data) contains the object we will be sending to the server. Before we send the object to the web method, we have to ensure that we convert the object into a JSON format. We can do this by calling JSON.stringify. This javascript method is supported in all modern browsers*. The values that you pass to JSON.stringify have to be similar to what I have specified here. The name of the object we are passing to the server is named as 'cnt' in single or double quotes. This also has to be exactly same as the variable name being accepted by the web method.

public static Contact getContact(Contact cnt)

2. Specifying what to connect to

The url specifies the web method or web service that we wish to call. If we were calling an ASP.NET based web service, we’d just have to change the url to /Default.asmx/getContact. Note that the name of the method that we wish to call is concatenated to the end of the web service path.

---

Now let’s see everything in action using Fiddler, a nifty network monitoring tool.

You’ll notice the call, with the request data sent to the server, and the response that is received from the server. If the call succeeds the success function of jQuery ajax is called. The server returns data as a JSON object and we can access it using the d property of the object. ASP.NET adds the property by default as of .NET Framework 3.5 to protect you from JSON hijacking.

Data sent to the server

Response from the server

So that’s basically it, if you have any doubts, ping me through the comment section. You’ll find the source code for the application here.

JSON.stringify is not supported by Internet Explorer 7 by default. To add this function to it, add JSON2.js to your page.