如何使用ajax发送一个对象数组和其他formdatas?

时间:2016-07-21 05:19:34

标签: javascript jquery arrays ajax asp.net-mvc

我想使用ajax将带有其他表单数据的对象数组发送到MVC操作。

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

和其他一些表单字段数据。 我尝试获取并附加这样的表单数据:

    $(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;
});

但是在服务器端,我在Features属性中得到一个包含空值的5个元素的数组。 这是我的服务器端code.my对象:

    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; }
    }

和我的行动:

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

感谢。

4 个答案:

答案 0 :(得分:1)

首先尝试序列化您的数据JSON.stringify(formData)

答案 1 :(得分:1)

您可以序列化数据,也可以将其包装在对象中并发送

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
});

答案 2 :(得分:1)

为了使333,444 绑定数组中的数据,您需要以下列格式附加名称和值

DefaultModelBinder

与访问服务器端代码中的值的方式完全相同(即获取集合中第二个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 的{​​{1}},您将使用

Name

参数的名称是Feature,所以只需删除它,剩下的是名称需要在string name = productType.Features[1].Name; // returns "b" 中传递的方式。

答案 3 :(得分:0)

使用以下代码:

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