9

How can i send a JSON object to a webmethod using jQuery?

7 Answers 7

21

Please refer to this article by Dave Ward. It is a complete tutorial on doing this stuff. Also you will find there other great jquery/ASP.net stuff.

EDIT:- Dave is calling method without any arguments, you can replace empty data property with actual data you want to send:

$.ajax({
  type: "POST",
  url: "Default.aspx/GetDate",
  data: "{'name':'tiger1','hobbies':['reading','music']}",//PUT DATA HERE
  contentType: "application/json; charset=utf-8",
  dataType: "json",
Sign up to request clarification or add additional context in comments.

4 Comments

+1 - I think this topic and that particular article will keep coming up for some time :)
Yes @Russ Dave has shown light to don't know how many developers.
Are you sure that hobbies array gets passed as you expect it to?
@Josh going by examples on this page [json.org/example.html] it will. Actually it is only for illustration, if you feel it is wrong please edit the answer or put right thing in comment and I'll edit answer.
11

WebMethods expect a string containing JSON that will be parsed on the server-side, I use the JSON.stringify function to convert a parameters object to string, and send the data, I have a function like this:

jQuery.executePageMethod = function(location, methodName, methodArguments,
                                    onSuccess, onFail) {
    this.ajax({
        type: "POST",
        url: location + "/" + methodName,
        data: JSON.stringify(methodArguments), // convert the arguments to string
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data, status) {
            var jsonData = JSON.parse(data.d);
            onSuccess(jsonData, status);
        },
        fail: onFail
    });
};

I recommend you to include the json2.js parser in your pages, to have the JSON.stringify function cross-browser available.

Comments

6

Another library you can use is the jquery-json library. Once included:

var json = $.toJSON(your_object);

1 Comment

Ooh, thanks for this. The minified version is ~2k, and it integrates well with jQuery (obviously), which is nice if you're already using it (which I am).
5

The most convenient solutions I've seen simplify this by using the open-source JSON2.js library to parse and 'stringify' complex object data.

These two excellent articles go into detail:

The second article might be especially relevant for you, though it calls a web service method with the following signature ...

public void SendValues(List<string> list)

... it demonstrates how to use the JSON2.js library to render a List<string> in javascript (using jQuery, this example is taken directly from the second article):

var list = ["a", "b", "c", "d"];
var jsonText = JSON.stringify({ list: list });

// The 'list' is posted like this

$.ajax({
    type: "POST",
    url: "WebService1.asmx/SendValues",
    data: jsonText,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function() { alert("it worked"); },
    failure: function() { alert("Uh oh"); }
});

Just use your webmethod URL in lieu of the web service's.

Comments

0

You'd need to post it using Ajax and accept the incoming string on the webmethod. Then you'd need to use the JavaScript deserializer to convert it into an object on the server side.

1 Comment

I think he's asking how to turn the JavaScript object into a JSON string to send along to said webmethod.
0

JSON.stringify does help, but:

  1. it's not cross-browser take a look here: http://www.sitepoint.com/blogs/2009/08/19/javascript-json-serialization/#

  2. For browser in-built functions - every browser will have its problems. If You use the above serialization You will need to:

    • remove newlines with regexp in strings
    • take care about " in strings

Comments

0

Sample code is here:

var dataString = JSON.stringify({
                            contractName: contractName,
                            contractNumber: contractNumber
                        });

                        $.ajax({
                            type: "POST",
                            url: "CreateQuote.aspx/GetCallHistory",
                            data: dataString,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (result) {
                                alert(result.CallHistoryDescription);
                                    OpenLightBox('divDelete');

                            }
                        });


        [System.Web.Services.WebMethod]
        public static object GetCallHistory(string contractName, string contractNumber)
        {
            return new
            {
                CallHistoryDescription = "Nalan"
            };

        }

1 Comment

Is it compulsory to pass contractName first and then contractNumber while creating JSON, because sometimes I am not sure in which sequence parameter will come, because of dynamic client side scripts

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.