Json to ASP.NET MVC Controller parameter is null when JSON.stringify

Question

I am trying to fetch information through an MVC controller by sending a JSON object to it as parameter.

The controller method looks like this:

public ActionResult GetLatestInfoLogs(InfoLogUserJson invoker, InfoLogUserJson affected) {
    // code
}

I have a server side model which looks like this:

public class InfoLogUserJson {
    public int id { get;set; }
    public int personId { get;set;}
    public int customerId { get;set; }
    public int rootUserId { get;set; }
    public string ip { get;set; }
    public bool unknown { get;set; }
}

and I have a client-side script which looks like this:

var InfoLogUser = function () {
    this.id = ko.observable(0);
    this.personId = ko.observable(0);
    this.rootUserId = ko.observable(0);
    this.customerId = ko.observable(0);
    this.unknown = ko.observable(false);
    this.ip = ko.observable(null);
}

InfoLogUser.prototype = (function() {
     return {
          toJSON: function() {
            return {
                personId: this.getPersonId(),
                rootUserId: this.getRootUserId(),
                customerId: this.getCustomerId(),
                id: this.getId(),
                unknown: this.getUnknown(),
                ip: this.getIp()
             }
         }
     }
}());

In a javascript view model I am trying to do this:

            var infoLogUser = new InfoLogUser();
            infoLogUser.personId(1234);

            $.ajax({
                url: '/Whatever/GetLatestInfoLogs',
                data: {
                    invoker: JSON.stringify(infoLogUser.toJSON()),
                    affected: null
                },
                dataType: 'application/json; charset: utf-8',
                type: 'GET',
                success: function(_infoLogs) {
                    alert('yay');
                }
            });

In my network log I get the following: Query String Parameters:

invoker:{"personId":1234,"rootUserId":0,"customerId":0,"id":0,"unknown":false,"ip":null} affected:

However, when it hits the GetLatestInfoLogs method in the MVC controller, the invoker parameter is always null. If I remove the JSON.stringify from the ajax request the invoker parameter isn't null, but no value has been set in it.

I can't really figure out what's going on, so hopefully any of you guys might know what's going on? :)

Answer 1

Try this

$.ajax({
        url: '/Whatever/GetLatestInfoLogs',
        type: 'POST',
        data: {
            invoker: JSON.stringify(infoLogUser),
            affected: null
        },
        contentType: 'application/json',

        success: function(_infoLogs) {
            alert('yay');
        }
    });

Updated

var data = {invoker: infoLogUser, affected: null};
$.ajax({
            url: '/Whatever/GetLatestInfoLogs',
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json',

            success: function(_infoLogs) {
                alert('yay');
            }
        });

Answer 2

You don't need to create your own to .toJSON() method.

Simply do this:

invoker: JSON.stringify(infoLogUser)

You also need to make sure that you set the content type ie

contentType: 'application/json'

I also noticed that your data type should be:

dataType: 'json'

The entire call would become:

    var infoLogUser = new InfoLogUser();
    infoLogUser.personId(1234);

    $.ajax({
        url: '/Whatever/GetLatestInfoLogs',
        data: {
            invoker: JSON.stringify(infoLogUser),
            affected: null
        },
        dataType: 'json',
        contentType: 'application/json',
        type: 'GET',
        success: function(_infoLogs) {
            alert('yay');
        }
    });

Update To be valid json you need to change invoker & affected to strings ie

 data: {
         "invoker": JSON.stringify(infoLogUser),
         "affected": null
        }