Object array in FormData passing 0 objects to controller

Question

I'm making an ajax call to the controller passing the FormData(), which has an array of objects along with few other properties. In my controller, the list array which I'm passing seems to have 0 elements. Please help!

Script in cshtml view -

    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 () {

                    }
                });
            }            

Controller -

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

        return new JsonResult();
    }

EDIT: Hr_LeaveApplyHd model -

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 model -

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

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

    public int empLeaveHdID { get; set; }
}

Answer 1

You cannot append arrays and/or complex objects to FormData . You need to append name/value pairs for each property of ApplyDetail and for each item in the collection, and with indexers, for example

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

which you could do in your $.each loop, for example

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

However, if you have generated your form correctly using the strongly typed HtmlHelper methods, including generating the controls for the collection property using a for loop of EditorTemplate for typeof ApplyDetail so they have the correct name attributes to match your model, then all you need is

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

which will correctly serialize all the form controls