FormData 中的对象数组将 0 个对象传递给控制器答案

【问题标题】：Object array in FormData passing 0 objects to controllerFormData 中的对象数组将 0 个对象传递给控制器
【发布时间】：2018-02-27 18:09:19
【问题描述】：

我正在通过 FormData() 对控制器进行 ajax 调用，该控制器具有一个对象数组以及一些其他属性。在我的控制器中，我传递的列表数组似乎有 0 个元素。请帮忙！

cshtml 视图中的脚本 -

    var _getFormDataToJson = function () {                            
            var applyDetail = [];
            $(_tb).find('tbody tr').each(function (i, v) {
                var trans = {
                    effectiveDate: $(this).find('.effectiveDate').val(),
                    amount: $(this).find('.amount').val(),
                    empLeaveHdID: $('#tx-leaveHdID').val(),
                    //attachmentUrl: $(this).find('.leaveAttachment')[0].files[0]
                }

                applyDetail.push(trans);
            });

            var formObj = new FormData();
            formObj.append('remark', $('#tx-remark').val());
            formObj.append('leaveAppType', $('#hdnLeaveAppType').val());
            formObj.append('applyDetail', applyDetail); //this collection has 0 items in controller

            return formObj;
        }

        var _sumbitForm = function () {
            var formData2 = _getFormDataToJson();               
                $.ajax({
                    url: '@Url.Action("ApplyLeave", "Leave")',
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    data: formData2,
                    //data: { data: formData2 },
                    success: function (data) {
                        if (data.success) {
                            _myToastr.success(data.msg[0], true, function () {
                                location.reload();
                            });

                            $(_modal).modal('close');
                        }
                        else {
                            _myToastr.error(data.msg[0]);
                        }
                    },
                    complete: function () {

                    }
                });
            }

控制器 -

 [HttpPost]
    public JsonResult ApplyLeave(Hr_LeaveApplyHd data)
    {
        foreach (var detail in data.applyDetail) //applyDetail count is 0 here
        {
            //to DO:
        }

        return new JsonResult();
    }

编辑： Hr_LeaveApplyHd 模型 -

public class Hr_LeaveApplyHd
{
    public Hr_LeaveApplyHd()
    {
        applyDetail = new List<ApplyDetail>();
    }

    [Key]
    public int applyID { get; set; }
    public string remark { get; set; }
    public virtual List<ApplyDetail> applyDetail { get; set; }
    public LeaveAppType leaveAppType { get; set; }
}

applyDetail 模型 -

public class ApplyDetail 
{
    [Key]
    public int applyDetialID { get; set; }

    public DateTime effectiveDate { get; set; }
    public decimal amount { get; set; }

    public int empLeaveHdID { get; set; }
}

【问题讨论】：

试试 console.log(applyDetail);看看发生了什么？
什么是_tb、id或class？
@akbansa var _tb = $('#tb-leaveTrans') - id
试试 console.log(applyDetail)
@akbansa 我有一个 obj 数组 - {effectiveDate: "2017/09/12", amount: "1", empLeaveHdID: "56"}

标签： javascript jquery ajax asp.net-mvc asp.net-ajax

【解决方案1】：

您不能将数组和/或复杂对象附加到FormData。您需要为 ApplyDetail 的每个属性和集合中的每个项目以及索引器附加名称/值对，例如

formObj .append('applyDetail[0].effectiveDate', '09/19/2017');

例如，您可以在 $.each 循环中执行此操作

var formObj = new FormData();
formObj.append('remark', $('#tx-remark').val());
formObj.append('leaveAppType', $('#hdnLeaveAppType').val());
$(_tb).find('tbody tr').each(function (i, v) {
    var name = 'applyDetail[' + i + '].effectiveDate';
    var value = $(this).find('.effectiveDate').val();
    formObj.append(name, value);
    ... // ditto for other properties
});

但是，如果您使用强类型 HtmlHelper 方法正确生成了表单，包括使用 for 循环为 typeof ApplyDetail 生成集合属性的控件，则它们具有正确的名称属性来匹配你的模型，那么你所需要的就是

var formObj = new FormData($('form').get(0));

它将正确序列化所有表单控件

【讨论】：

是的！这是将复杂对象导入 ASP.Net 的技巧！谢谢！