Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass a user defined object to ASP.NET Webmethod from jQuery, using JSON

I am trying to pass in some simple JSON to an ASP.NET 4.5 Webmethod from jQuery. And it is not working quite the way I want it. It works if I accept the inputs as separate parameters:

[WebMethod]
public static Address GetJSonAddress(string name, string street)

But if I try to take it as an object it does not work, what gets passed in is simply null:

[WebMethod]
public static Address GetJSonAddress(Address newAddress)

I have tried Webmethods, Pagemethods, WCF using DataContractJsonSerializer...nothing. The Address class is decorated appropriately with Datamember/DataContract. The properties are matched including case.

The jQuery, in which I have tried all manner of passing in the data including wrapping it in an Address object...if I do it any other way than what I have the Webmethod is not called and I get error 500:

Save2 = function () {
var address = { prefix: GLOBALS.curr_prefix };

$('input[id^=' + GLOBALS.curr_prefix + '],select[id^=' + GLOBALS.curr_prefix + ']').each(function () {
       address[this.id.substr(4)] = $.trim($(this).val());
})

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "/WebServices/Insert",
    data: JSON.stringify(address),
    dataType: "json",
    success: function (data, textStatus) {
        console.log(data, textStatus);
    },
    failure: function (errMsg) {
        MsgDialog(errMsg);
    }
});
}

Eventually I will have to do this with 121 input strings, and really don't want to have a method with 121 parameters. Any help is appreciated.

like image 922
Thomas O. Avatar asked Aug 06 '13 11:08

Thomas O.


1 Answers

I quickly set up this project and I was able to successfully call my web method, please adjust your code accordingly. Make sure your class property names are the same as the ones that you pass through JavaScript.

Webservice

    public static Contact getContact(Contact cnt)
    {
        cnt.name = "Abijeet Patro";
        cnt.phone = "Blah Blah";
        return cnt;
    }

JavaScript/jQuery

    $(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;
            }
        });
    });

Class

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

Web Service Called


enter image description here

You can grab the project from here. Also please use fiddler or Chrome to monitor AJAX requests/responses. I've added an image to show how to monitor AJAX requests using Chrome. Fiddler is even better and more detailed.


enter image description here

like image 126
Abijeet Patro Avatar answered Oct 24 '22 15:10

Abijeet Patro