Passing NESTED Complex json to MVC Controllers

Question

NOTE: It might be urging for some to mark this as an already answered question BUT it is not, I have been searching for an answer for quite a while. This is a modified version of "https://stackoverflow.com/questions/24027245/mvc-any-version-pass-nested-complex-json-object-to-controllers", which also has not been answered.

Question: Is it possible to post a JSON data through jQuery ajax call to a MVC Controller where the data you are passing is a complex type with more complex types in it? Example an array of arrays.

var arrayOfarrays = [];
var simpleArray = [];

simpleArray[simpleArray.length] = simpleArray.length + 1;
simpleArray[simpleArray.length] = simpleArray.length + 1;
simpleArray[simpleArray.length] = simpleArray.length + 1;
simpleArray[simpleArray.length] = simpleArray.length + 1;
simpleArray[simpleArray.length] = simpleArray.length + 1;

arrayOfarrays[arrayOfarrays.length] = simpleArray;
arrayOfarrays[arrayOfarrays.length] = simpleArray;
arrayOfarrays[arrayOfarrays.length] = simpleArray;
arrayOfarrays[arrayOfarrays.length] = simpleArray;
arrayOfarrays[arrayOfarrays.length] = simpleArray;

The above is my data. As you see, a simpleArray is a mere array and the arrayOfarrays is an array of arrays which is in a way a nested complex type

$.ajax({
    url: '/Home/Save',
    data: {arrayData:simpleArray, arrayOfarrayData:arrayOfarrays},
    type: 'POST',
    dataType: 'json',
    traditional:true,
    cache: false,
    success: function (result) {
    }
});

The above snippet is my jQuery ajax call to the controller /Home/Save and here below is the controller itself. Note that I have tried with and without the traditional:true option.

[HttpPost]
public JsonResult Save(int[] arrayData, int[][] arrayOfarrayData)
{
    return Json("received");
}

This is what I've observed:

With traditional:true I receive the arrayData which is a simple array in the /Home/Save controller but the arrayOfarrayData is empty
Without traditional:true I receive arrayData as null but arrayOfarrayData is received as an array of 5 elements but the elements are not the sub-array information you would expect but its empty

PS: An array of array is only an example, no NESTED complex type seem to work. Or is there any way around this?

fyjham · Accepted Answer · 2014-06-06 02:29:08Z

4

I think you need to stringified your data

var dataToSend={
          'arrayData':simpleArray, 
          'arrayOfarrayData':arrayOfarrays
};

$.ajax({
    url: '/Home/Save',
    data: JSON.stringify(dataToSend),
    type: 'POST',
    contentType: 'application/json',
    dataType: 'json',
    traditional:true,
    cache: false,
    success: function (result) {
    }
});

edited Jun 6, 2014 at 2:29

fyjham

7,0542 gold badges35 silver badges40 bronze badges

answered Jun 6, 2014 at 0:58

Ammar Khan

2,6056 gold badges37 silver badges63 bronze badges

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

6 Comments

fyjham Over a year ago

This is correct, but as a sidenote you may need a polyfill for JSON.strigify on older browsers (github.com/douglascrockford/JSON-js).

fyjham Over a year ago

Also as a further sidenote, "traditional" is irrelevant once you're stringifying the data - it will have absolutely no impact on how it's processed, but leaving it out is probably less misleading because having it there implies it's doing something.

Lordbalmon Over a year ago

@user3398887 I am sorry, but using stringify alone did not fix it but thank you, I had to use stringify and contentType and then it worked, could you please modify your answer to include contentType so that I can mark it to be correct answer :)

Lordbalmon Over a year ago

@fyjham, thank you for the suggestions and yes, you were correct about traditional I even tried that out :)

Ammar Khan Over a year ago

Glad to know that works for you. Answer has been modified, you can mark it to be correct one.

|

Collectives™ on Stack Overflow

Passing NESTED Complex json to MVC Controllers

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related