How to send an array of objects along with other formdatas using ajax?

Question

I want to send an array of objects with other data forms to an MVC action using ajax.

var arr = [
    { Name: "a", IsActive: "true" },
    { Name: "b", IsActive: "false" },
    { Name: "c", IsActive: "true" },
    { Name: "d", IsActive: "false" },
    { Name: "e", IsActive: "true" }
];

and some other data form fields. I tried to get and attach the form data as follows:

    $(document.body).delegate("form#mainFormCreate", "submit", function () {

    var formData = new FormData($("form#mainFormCreate")[0]);
    var arr = [
            { Name: "a", IsActive: "true" },
            { Name: "b", IsActive: "false" },
            { Name: "c", IsActive: "true" },
            { Name: "d", IsActive: "false" },
            { Name: "e", IsActive: "true" }
    ];

    jQuery.each(arr, function (key, value) {
        formData.append('Features[' + key + ']', value);
    });
    $.ajax({
        url: '@Url.Action("CreateType", "Admin")',
        type: 'POST',
        data:formData,
        success: function (result) {
            ....

        },
        error: function (x, t, e) {
            ....
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

But on the server side, I get an array of 5 elements with zero values ​​in the Features property. Here is my server side code. my object:

    public class ProductTypeCreateModel
   {

       public string ProductTypeName { get; set; }
       public List<Feature> Features { get; set; }
    }

    public class Feature
    {
        public string Name { get; set; }
        public bool IsActive { get; set; }
    }

and my actions:

    [HttpPost]
        public JsonResult CreateType(ProductTypeCreateModel productType)
        {
...
}

Thank.

Answer 1

To DefaultModelBinderbind data in an array, you need to add a name and values ​​in the following format

formData.append('Features[0].Name', 'a');
formData.append('Features[0].IsActive', true);
formData.append('Features[1].Name', 'b');
formData.append('Features[1].IsActive', false);
... // etc

, (.. Name Feature ,

string name = productType.Features[1].Name; // returns "b"

productType, , , FormData.

Answer 2

, JSON.stringify(formData)

Answer 3

You can either serialize your data, or simply wrap it in an object and send it

var arr = [
        { Name: "a", IsActive: "true" },
        { Name: "b", IsActive: "false" },
        { Name: "c", IsActive: "true" },
        { Name: "d", IsActive: "false" },
        { Name: "e", IsActive: "true" }
];


$.ajax({
    url: '@Url.Action("CreateType", "Admin")',
    type: 'POST',
    data:{data: arr},
    success: function (result) {
        ....

    },
    error: function (x, t, e) {
        ....
    },
    cache: false,
    contentType: false,
    processData: false
});

Answer 4

Use the following code:

 $('form').serializeArray()` or  `$('form').serialize()