How to send a objects array list to controller via ajax

Question

I have a object in my javascript with a object array inside it. I want to send it to my controller via a ajax call. But my list never seems to get populated in my controller. I make my machineList object as following:

 var machineList = JSON.stringify({ 'machineList': objects.machines });

Console.log of this object

{"machineList":[{"Id":1,"Labour":"Hard","EnlistedMachine":"BEXTE","Type":"dz","Identifier":"ddd","IdentifierCode":"ddd"},{"Id":2,"Labour":"Easy","EnlistedMachine":"BEXTEss","Type":"dz","Identifier":null,"IdentifierCode":null}]}

My data object that gets send looks like this

 var data = {

        SalesPrice: $("#SalesPrice").val(),
        machineList: machineList

    };

Ajax call:

   $.ajax({
        url: currenturl + "/MyXmlAction",
        data: data,
        dataType: "json",
        type: "GET",
        contentType: 'application/json; charset=utf-8', //define a contentType of your request
        cache: false,
        success: function (type) {
            // data is your result from controller
            if (type.success) {
                XML = type.json;

            }
        },
        error: function (xhr) {
            alert('error');
        }
    });

My viewmodel looks like:

    public class ContractViewModel
    {
  public string SalesPrice { get; set; }
  List<MachineListDto> machineList = new List<MachineListDto>();
     }

My controllerMethod looks like:

public ActionResult MyXmlAction(ContractViewModel data)
{
    //Code
    return Json(new { success = true, data }, JsonRequestBehavior.AllowGet);
}

MachineListDto

    public class MachineListDto
    {
        public int Id { get; set; }

        public string EnlistedMachine { get; set; }

        public string Type { get; set; }

        public string Labour { get; set; }

        public string Identifier { get; set; }

        public string IdentifierCode { get; set; }
    }
}

Data object after changes by Tetsuya implemented

{"SalesPrice":"1000","machineList":[{"Id":1,"Labour":"Hard","EnlistedMachine":"BEXTE","Type":"dz","Identifier":"ddd","IdentifierCode":"ddd"},{"Id":2,"Labour":"Easy","EnlistedMachine":"BEXTEss","Type":"dz","Identifier":null,"IdentifierCode":null}]}

I tried doing the same I saw in the following post: Passing ListObject to controller

Answer 1

You have 3 major issues on the code:

1) The contentType in AJAX call set as application/json; charset=utf-8, means that the passed data must be a JSON string, but you're passing an object instead. You need to send both objects as JSON string by putting JSON.stringify() on entire object definition:

var data = JSON.stringify({
    SalesPrice: $("#SalesPrice").val(),
    machineList: objects.machines
});

2) The declaration of List<MachineListDto> machineList = new List<MachineListDto>(); defines a field, not a property which necessary for serialization. It must be declared as property:

public class ContractViewModel
{
    public string SalesPrice { get; set; }
    List<MachineListDto> machineList { get; set; } // define as property
}

3) The type of AJAX callback is set as GET, which means it will send as query string which is not recommended to pass collection objects. You need to use type: 'POST' in AJAX callback and set [HttpPost] attribute on the controller action:

AJAX

$.ajax({
    url: currenturl + "/MyXmlAction",
    data: data,
    dataType: "json",
    type: "POST", // use POST request
    contentType: 'application/json; charset=utf-8', //define a contentType of your request
    cache: false,
    success: function (type) {
        // data is your result from controller
        if (type.success) {
            XML = type.json;

        }
    },
    error: function (xhr) {
        alert('error');
    }
});

Controller action

[HttpPost]
public ActionResult MyXmlAction(ContractViewModel data)
{
    // do something
    return Json(new { success = true, data }, JsonRequestBehavior.AllowGet);
}

Answer 2

var pushSalesprice = [];
var Machinelist_data = [];
pushSalesprice.push($("#SalesPrice").val());
Machinelist_data.push(machineList);
var data = {
  SalesPrice: pushSalesprice ,
  machineList: Machinelist_data 
};