How to post array of json object to controller method

Question

I am using below stuff to post list of object to controller ajax post method.

jQuery stuff:

var values = [];
values.push(rowData1);
values.push(rowData2);
values.push(rowData3);

var data = JSON.stringify({
    installationControls: values
});

$.ajax({
    url: '/ControllerName/fin',
    type: "POST",
    contentType: "application/json",
    data: {
        data: data
    },
    success: function () {
        console.log('success!!');
    }
});

Please suggest me what is wrong..

controller method:

[HttpPost]
public JsonResult fin(object s) {
    //.................
}

posted data are as follow:

         installationControls":[{"syID":"1789","FullName":"Bejin Mara","Min":"5","MSG":""},{"syStudentID":"46","FullName":"Calderon Laura","MinAbsent":"7","MSG":""},{"syID":"17","FullName":"mic Mayra","Min":"5","MSG":""}]

tried by creating same object and passed to controller argument but not worked.

So what is your problem exactly? Any error msg on firebug? give your controller code — Hüseyin BABAL, Jan 29 '14 at 15:01
Unable to call controller method - `fin(object s)` . Please tell me i have to change argumnet instead of `object` type to any other type to hold array of json ? — dsi, Jan 29 '14 at 15:07

Hans Roerdinkholder · Accepted Answer · 2014-01-29T15:16:09.933

0

Your ajax settings seem correct. However, since the endpoint expects and object named 's', I changed the data:-bit to reflect this:

    $.ajax({
        url: '/ControllerName/fin',
        type: "POST",
        contentType: "application/json",
        data: { s: data },
        success: function () {
            console.log('success!!');
        }
    });

Does that help?

Edit: The controller could accept a datastructure such as this:

public class SingleListObject
{
    // Add properties to this class to match the properties held by rowData
}

public class MyModelWithList
{
    public List<SingleListObject> MyList { get; set; }

    public MyModelWithList()
    {
        MyList = new List<SingleListObject>();
    }
}

public JsonResult fin(MyModelWithList details) {
    //.................
}

Ajax:

$.ajax({
    url: '/ControllerName/fin',
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({ myList: values }), // If this doesn't work, try JSON.stringify({ details: { myList: values } })
    success: function () {
        console.log('success!!');
    }
});

edited Jan 29 '14 at 15:16

answered Jan 29 '14 at 14:56

Hans Roerdinkholder

3,000
1
20
30

NOt worked. Looks like my controller method should have different argument type instead of "object s".. what should i keep to hold array of json? – dsi Jan 29 '14 at 15:03
I edited my post to propose a datastructure, let me know if it worked. – Hans Roerdinkholder Jan 29 '14 at 15:16
tried by creating same object which is posted to controller but it did not work. Please suggest how it could resolve. – dsi Feb 05 '14 at 06:27
it works, i had also take ref from - "http://stackoverflow.com/questions/13242414/passing-a-list-of-objects-into-an-mvc-controller-method-using-jquery-ajax". Thank You. – dsi Feb 05 '14 at 07:54

score 0 · Answer 2 · answered Jan 29 '14 at 15:16

You could either use a ViewModel data structure associated with the view in order for the runtime to be able to resolve the object in the request.

There is another way to bind an object/complex type other than the default ViewModel object which you can follow here Sending complex JSON objects to Asp.net MVC using jQuery Ajax.

score 0 · Answer 3 · edited May 17 '16 at 11:07

Not to sure if this will fix the problem, but in your ajax settings try add traditional:true and drop the JSON.stringify.

When passing arrays to controllers I found I needed to use traditional set to true

$.ajax({
    url: '/ControllerName/fin',
    type: "POST",
    contentType: "application/json",
    data: s: data,
    traditional:true,
    success: function () {
        console.log('success!!');
    }
});

score 0 · Answer 4 · answered Oct 16 '16 at 05:20

Change your JavaScript to be like this:

var values = [];
values.push(rowData1);
values.push(rowData2);
values.push(rowData3);

var postedData = JSON.stringify({
    installationControls: values
});

$.ajax({
    url: '/ControllerName/fin',
    type: "POST",
    contentType: "application/json",
    data: postedData,
    success: function () {
        console.log('success!!');
    }
});

And in your controller, change the controller to be:

[HttpPost] public JsonResult fin(List installationControls) { //................. }

Where InstallationControl is a class that has the same properties as the posted values, in this case it should have the following properties:

public class InstallationControl
{
   public string syID{get;set}
   public string FullName{get;set}
   public string Min{get;set}
   public string MSG{get;set}
}

How to post array of json object to controller method

4 Answers4