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?

score 2 · Accepted Answer · answered May 24 '12 at 15:00

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

This did the trick! I knew that string[] didn't look right but I was unsure how to address it. Thank you Darin! — Scottingham, May 24 '12 at 15:15

score 1 · Answer 2 · answered May 24 '12 at 14:37

1

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

            )

        });

answered May 24 '12 at 14:37

Pointy

405,095
59
585
614

That returns the following error: System.ArgumentException: Invalid JSON primitive: AS.

– Scottingham May 24 '12 at 14:40

score 1 · Answer 3 · edited May 23 '17 at 10:34

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.

Serialized JSON Object appearing as Null at controller

3 Answers3