pass array in javascript object to mvc controller

Question

I have a javascript object like:

var data={
 Manager:name,
 ID:id,
 EmployeeNames:arrayEmployees
};

As you can see, name and id are simple strings but EmployeeNames is an array object. I have the ajax call like this:

 $.ajax({
      type: "POST",
      url: "GetManagerEmployees",
      content: "application/json;",
      dataType: "json",
      data: data,
      success: 
      error: 
});

In the controller I have a method GetManagerEmployees(Data data) with parameter of type Data which contains all the properties:

public class Data
{
    public string Manager { get; set; }
    public int id { get; set; }
    public List<string> EmployeeNames { get; set; }

I'm getting data.EmployeeNames as null in my controller, what am I doing wrong here? Can you please help me on this?

@suvroc var arrayEmployees= new Array(); arrayEmployees.push("Name1"); — user3202524, Dec 07 '15 at 10:48
Have you tried to change List to a string array? (string[]). If it is just strings you don't need the overload of a List. — jpgrassi, Dec 07 '15 at 10:50
@Imad my controller method is like this: [HttpPost] public void GetManagerEmployees(Data data) — user3202524, Dec 07 '15 at 10:50
Are you 'stringfying' your data argument before send it to controller? newData = JSON.stringify({ 'data': data }); — jpgrassi, Dec 07 '15 at 10:53
I tried to stringify but control does not reach the controller if stringify is used anywhere — user3202524, Dec 07 '15 at 10:57

jpgrassi · Accepted Answer · 2015-12-07T11:33:56.273

Just created a project with this structure and It's working:

Note that traditional:true on the jquery ajax call:

As of jQuery 1.4, the $.param() method serializes deep objects recursively to accommodate modern scripting languages and frameworks such as PHP and Ruby on Rails. You can disable this functionality globally by setting jQuery.ajaxSettings.traditional = true;.

Source: jQuery.param() Docs

Also, you don't need a List for that. Just use a simple string array in your model.

Javascript

$("#myBtn").click(function () {

                var arrayEmployees = new Array();

                arrayEmployees.push("Name1");

                var data = {
                    "Manager": 'John',
                    "id": 1,
                    "EmployeeNames": arrayEmployees
                };

                $.ajax({
                    type: "POST",
                    traditional:true,
                    url: "PostManager",
                    content: "application/json;",
                    dataType: "json",
                    data: data,
                    success: function () {
                    }
                });
            });

Controller/Model

[HttpPost]
public void PostManager(Data  data)
{

}

public class Data
{
    public string Manager { get; set; }
    public int id { get; set; }
    public string[] EmployeeNames { get; set; }
}

If I add traditional:true then it does not call the controller, im using jquery-1.8 version, do I need to add any other version of jquery script? — user3202524, Dec 07 '15 at 11:45
$.param(arrayEmployees) is returning undefined elements in the array — user3202524, Dec 07 '15 at 11:53
Just created a fresh MVC project, using jquery-1.10.2. Do you see any errors in the console? Make sure you have your url correct. — jpgrassi, Dec 07 '15 at 12:02

pass array in javascript object to mvc controller

1 Answers1

Linked