Serialized JSON Object appearing as Null at controller

Question

I have a stringified JSON object that appears properly in an alert, appears properly in the post section in the browser debugger, but in the controller it appears as null. I'm not sure how it is losing the information.

Here is the JS code:

 var assessmentStatus = [];

            $("select.assessmentSelect").each(function () {
                assessmentStatus.push({
                    assessmentname: $(this).attr("id"),
                    assessmentstatus: $(this).val()
                });


            });
alert(JSON.stringify(assessmentStatus));


            $.ajax({
                url: '@Url.Action("testAS")',
                type: "POST",
                contentType: 'application/json',
                data: JSON.stringify({
                    AS: assessmentStatus,
                    AS2: assessmentStatus

                })

            });

this is what is appearing in the alert:

[{"assessmentname":"testassessment","assessmentstatus":"Design"},{"assessmentname":"DepressionUpload","assessmentstatus":"Design"}]

this is what is appearing in the post:

[Object { assessmentname="testassessment", assessmentstatus="Design"}, Object { assessmentname="DepressionUpload", assessmentstatus="Design"}]

my controller looks like this:

public ActionResult testAS (string[] AS, string AS2)

string[] AS returns [0]null  [1]null
string AS2 just returns null.

Why is it not getting stringified when being sent to the controller?

Answer 1

You seem to be attempting to pass an array of complex objects with 2 properties:

assessmentStatus.push({
    assessmentname: $(this).attr("id"),
    assessmentstatus: $(this).val()
});

to a simple array of strings: string[] as. This is obviously not gonna work.

So start by defining a view model:

public class AssessmentViewModel
{
    public string Name { get; set; }
    public string Status { get; set; }
}

then adapt your controller action:

public ActionResult TestAS(AssessmentViewModel[] assessments)
{
    ...
}

and finally your javascript:

var assessments = [];
$('select.assessmentSelect').each(function () {
    assessments.push({
        name: $(this).attr("id"),
        status: $(this).val()
    });
});
$.ajax({
    url: '@Url.Action("testAS")',
    type: "POST",
    contentType: 'application/json',
    data: JSON.stringify({ assessments: assessments })
});

Answer 2

You don't have to encode the parameters yourself, for what looks like a simple action. Just hand jQuery an object with your properties and it'll encode it for you.

       $.ajax({
            url: '@Url.Action("testAS")',
            type: "POST",
            contentType: 'application/json',
            data: {
                AS: assessmentStatus,
                AS2: assessmentStatus

            )

        });

Answer 3

I have run into this before. You need to set jQuery's ajaxSettings.traditional = true. Some time ago, they changed how they serialize arrays. and it messed up asp.net mvc.

This question talks about it:

How can I post an array of string to ASP.NET MVC Controller without a form?

as does this: http://forum.jquery.com/topic/nested-param-serialization

So just put:

jQuery.ajaxSettings.traditional = true;

Then do like Pointy said, and don't stringify your data.