JSON.NET Parsing Full Key-Value Pair as Key

Question

I'm rolling my own ValidateAntiForgeryToken attribute for Web API 2.2 for one of my controllers that processes form data through AJAX calls.

I'm sending the data to my controller as JSON and it looks like this (pulled from Fiddler):

{"__RequestVerificationToken":"E8EoBCaFbqSOXhQZiuM93jciTcOAYeLjZj682-3SZRaQ6OOtrm-caZI_IWnX1FH_nwe_AuWnWwxy5ulS0Ynz0STlNptqN09Lu69HxyTeA9PUln8h73yjahB24QPxqI010","ProjectInfo.Description":"Test Description 2"}

I was trying to get the __RequestVerificationToken data like this, but it's not working:

JToken json = (JToken)actionContext.ActionArguments["json"];
formToken = (string)json["__RequestVerificationToken"];

formToken keeps containing null values so through some debugging I've found that the entire JSON value is being considered a Key, with an empty value as seen in the screenshot below:

I'm not sure why this is happening, since the JSON appears to be valid. Fiddler is able to parse the JSON without issues in it's built in Json Viewer, but JSON.NET appears to be sticking the entire json string as the Key instead of parsing it. I know that I could hack it and manually parse out the value I need from the key, but that's dirty as I rather this be done properly.

Is there something wrong with my JSON or method that I'm using to obtain it, or is there a bug in the json.net library/asp.net causing this behavior? Any idea why this might be happening?

EDIT:

It's possible that somehow the data is being serialized twice, but I'm not sure why/how. From my debugger here's the stringified value of json :

Root = {
"{\"__RequestVerificationToken\":\"yqob-3bUW8C8sUrHWu_feRFOz2KPUKqugo1QoN2s8v9UhlMTwSonxoEdnh85TdM56Xj-aixZdgSQXs8D6ureAQTU83wVtvsoLBd2tDl0ZPyq_2sFefObQx0VHOExQjgh0\",\"ProjectInfo.Description\":\"Test Description\"}": ""
}

Here's the code that generates the JSON on the client side. It's a jQuery extension:

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } 
        else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

This is then called as such in the submit method:

$('#description-editable form').submit(function (e) {
    e.preventDefault();
    var data = JSON.stringify($(this).serializeObject());

    //ajax method for PUT here...

});

Answer 1

It depends on what your AJAX options are, but it looks like your object is being stringified twice before it gets sent up. You should be able to remove the stringify call:

$('#description-editable form').submit(function (e) {
    e.preventDefault();
    var data = $(this).serializeObject();

    //ajax method for PUT here...

});