Send Complex Javascript Array To ASP.NET Controller Method

Question

I have asp.net mvc6 controller method which i wanted to send my complex javascript array data. I use two method to take complex array with json. First i tried the method like as below:

 public IActionResult TakeComplexArray(IList<ComplexArrayInfoModel> data) 
 {
     return PartialView(data);
 } 

Second method which i try.

 public IActionResult TakeComplexArray(ComplexArrayInfoModel[] data) 
 {
     return PartialView(data);
 }

I want to send complex javascript array like as below:

[Object, Object, Object, Object, Object]

Each object's type is my model class type ComplexArrayInfoModel. Each object has different records of this model class. More detail about this complex array is like as below:

[Object, Object, Object, Object, Object]
0: Object
1: Object
2: Object
3: Object
4: Object
length: 5
__proto__: Array[0]


Complex value has data like as below:


0: Object
Name: "aa"
Surname: "bb"
Country: null
City: 5
Age: 20
Gender: null
__proto__: Object
1: Object
Name: "ddd"
Surname: "fff"
Country: null
City: 5
Age: 20
Gender: null
__proto__: Object
2: Object
Name: "zzz"
Surname: "ggg"
Country: null
City: 5
Age: 20
Gender: null
__proto__: Object
3: Object
Name: "www"
Surname: "ccc"
Country: null
City: 5
Age: 20
Gender: null
__proto__: Object
4: Object
Name: "ccc"
Surname: "ddd"
Country: null
City: 5
Age: 20
Gender: null
__proto__: Object
length: 5
__proto__: Array[0]

I want to send this complex data to controller action with javascript function like as below:

function SendComplexData(data, row) {
   return $.ajax({
        url: '@Url.Action("TakeComplexArray")',
        /*data.complexArray is showed above schema*/
        data: JSON.stringify({ data: data.complexArray }),
        type: 'POST',
        dataType: 'html',
    });
}

I can't send this complex javascript array. How can i send this complex array to this controller action? And at the same time i couldn't send the data when i didn't use the json.stringify method.

Answer 1

Did you try to use Microsoft's MVC.stringify() method to send appropriate data to mvc controller class. Your javascript function should like as below:

function SendComplexData(data, row) {
   return $.ajax({
        url: '@Url.Action("TakeComplexArray")',
        /*data.complexArray is showed above schema*/
        data: MVC.stringify({ data: data.complexArray }),
        type: 'POST',
        dataType: 'html',
    });
}

And your controller class should be like as below:

public IActionResult TakeComplexArray(IList<ComplexArrayInfoModel> data) 
{
   return PartialView(data);
} 

You can try this ajax code for send complex array to mvc6 controller action method.

Answer 2

Your $.ajax call is improperly formatted due to a combination of configuring it to send form data and actually sending json data. Two options to fix:

1. Set the dataType to json and set the correct contentType

   $.ajax({
    url: '@Url.Action("TakeComplexArray")',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({data: data.complexArray}),
    type: 'POST',
    dataType: 'json'
   });
   

2. Just pass non-JSON data:

   $.ajax({
    url: '@Url.Action("TakeComplexArray")',
    data: {data: data.complexArray},
    type: 'POST',
    dataType: 'html'
   });