JSON posted to MVC Controller is null

Question

Here is my jQuery which looks at an HTML table and gets an id from the tr and an input field value and puts them in an object to be json stringified and posted to an MVC controller. I am using jQuery 1.8.2

      var rowdata = [];
            $('table').find('tr').each(function () {
                myjson = [];
                item = {}
                item["id"] = $(this).attr('id');
                item["reason"] = $(this).find('input').val();
                myjson.push(item);
                rowdata.push(myjson);
            });
            jsonstring = JSON.stringify(rowdata);
            $.ajax({
                url: '@Url.Action("AbsentReason", "Attendance")',
                data: jsonstring,
                type: 'POST',
                traditional: true,
                contentType: 'json',
                success: function (data) {
                    $('#message').html("Reason was updated");
                }
            });

This is the resulting JSON which checks valid.

[[{}],[{"id":"6","reason":""}],[{"id":"7","reason":""}],[{"id":"15","reason":""}],[{"id":"23","reason":""}],[{"id":"29","reason":""}],[{"id":"30","reason":""}],[{"id":"31","reason":""}],[{"id":"35","reason":""}],[{"id":"40","reason":""}],[{"id":"41","reason":""}],[{"id":"42","reason":""}],[{"id":"48","reason":""}],[{"id":"49","reason":""}],[{"id":"50","reason":""}],[{"id":"51","reason":""}],[{"id":"52","reason":""}],[{"id":"53","reason":""}],[{"id":"54","reason":""}],[{"id":"55","reason":""}],[{"id":"56","reason":""}],[{"id":"57","reason":""}],[{"id":"58","reason":""}],[{"id":"59","reason":""}],[{"id":"60","reason":""}],[{"id":"61","reason":""}],[{"id":"62","reason":""}],[{"id":"63","reason":""}],[{"id":"74","reason":""}],[{"id":"75","reason":""}],[{"id":"80","reason":""}],[{"id":"81","reason":""}],[{"id":"87","reason":""}],[{"id":"88","reason":""}],[{"id":"90","reason":""}],[{"id":"91","reason":""}],[{"id":"105","reason":""}],[{"id":"106","reason":""}],[{"id":"107","reason":""}],[{"id":"108","reason":""}],[{"id":"110","reason":""}],[{"id":"111","reason":""}],[{"id":"119","reason":""}]]:

This is the start of my controller.

 [HttpPost]
    public ActionResult AbsentReason(string jsonstring)
    {            
        return View("Index");
    }

The jsonstring parameter is always null. Can anyone see what is wrong?

UPDATE

This is my new controller based on the comments to use a model and allow MVC to do the work for me.

 [HttpPost]
    public ActionResult AbsentReason(IEnumerable<VMAttendance> jsonstring)
    {            
        return View("Index");
    }

and my viewmodel

public class VMAttendance
{
    public int PersonID
    {
        get;
        set;
    }
    public string Reason
    {
        get;
        set;
    }
}

The parameter is still null. I also update my jQuery in an attempt to send the correct json.

   var data = $('table').find('tr').map(function () {
                var id = $(this).attr('id');
                var reason = $(this).find('input').val();

                var rowdata = { "PersonID": id, "Reason": reason };
                return rowdata;
            }).get();


            $.ajax({
                url: '@Url.Action("AbsentReason", "Attendance")',
                data: data,
                type: 'POST',
                traditional: true,
                contentType: 'json',
                success: function (data) {
                    $('#message').html("Reason was updated");
                }
            });

I tried to send some test json to the controller but the parameter is still null.

var data = '{"PersonID":"6","Reason":""},{"PersonID":"7","Reason":""}'

Van · Accepted Answer · 2013-11-12 22:23:19Z

3

assuming you have an MVC model as follow

public class MyModel
{
   public int ID {get;set;}
   public string Reason {get;set;}
}

if you modify your action method signature to

public ActionResult AbsentReason(IEnumerable<MyModel> json)

when you post back your json object, the json serializer will deserialize your json into an IEnumerable of MyModel.

answered Nov 12, 2013 at 22:23

Van

1,3871 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

forwheeler · Accepted Answer · 2013-11-13 14:02:52Z

I got this working by changing the contentType from 'json' to 'application/json; charset=utf-8' and removing the first empty object in my json which was created from an extra tr in the table for the header. The json looked like

[{},{"PersonID":"6","Reason":""},{"PersonID":"7","Reason":""}]

when it should look like this

[{"PersonID":"6","Reason":""},{"PersonID":"7","Reason":""}]

My controller looks like this and works nice.

  [HttpPost]
    public ActionResult AbsentReason(IEnumerable<VMAttendance> jsonstring)
    {            
        return View("Index");
    }

Thanks Duy for your assistance!

Van · Accepted Answer · 2013-11-12 03:12:36Z

1

change the contentType in your ajax object to string.

i'm curious as to why you would want to treat your json as string and not as object. Normally I would have a C# viewmodel and let the serializer map the json object to that C# view model in my controller

answered Nov 12, 2013 at 3:12

Van

1,3871 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

JSON posted to MVC Controller is null

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related