Файл изображения и загрузка данных в ASP.NET MVC

Question

Я работаю над созданием страницы, на которой пользователь будет вводить данные, относящиеся к клиенту (например, имя, ссылочный номер, дата), и ниже этой заполненной таблицы (число строк является динамическим, не знаю, сколько строк будет у пользователя) с элементами Получено от Заказчика. Каждая строка таблицы содержит информацию, относящуюся к элементу, такую ​​как имя детали, номер детали, количество и т. Д. Наряду с этой информацией нам необходимо загрузить изображение (одно изображение) физической копии полученной бумаги. Мы должны отправить все эти данные в контроллер. Пробовал использовать FormData в javascript и ajax, как показано ниже:

function Submitbtn() {

            var shownVal = document.getElementById("CustomerId").value;
            var CustomerId = document.querySelector("#CNList option[value='" + shownVal + "']").dataset.value;
            var formData = new FormData();
            var totalFiles = document.getElementById("imageUploadForm").files.length;
            for (var i = 0; i < totalFiles; i++) {
                var file = document.getElementById("imageUploadForm").files[i];
                formData.append("imageUploadForm", file);
            }
             formData.append("CustomerRef", document.getElementById("CustomerRef").value);
            formData.append("DateCreated",$("#DateCreated").val());
            formData.append("ChallanDate", $("#ChallanDate").val());
            $('.signal').show()
            $.ajax({
                url: '@Url.Action("SubmitData", "Material")',
                type: "POST",
                processData: false,
                contentType: false,
                data: formData,
                success: function (response) {
                    $('.signal').hide();
                    if (data.result == false) {
                        alert(data.msg);
                    }
                    else {
                        alert("Saved succesfully");
                        $('#updateData').html(data);
                    }
                },
                error: function (er) {
                    alert(er);
                }

            });
}

ControllerCode:

    public ActionResult SubmitData()
            {
                    var pic = System.Web.HttpContext.Current.Request.Files["imageUploadForm"];
                    var id = System.Web.HttpContext.Current.Request.Params["InvoiceViewModel"];

Code processing
                InvoiceViewModel vm = new InvoiceViewModel();
                return PartialView("_AddNewTable", vm);

            }

Вышеописанное работает нормально, но я не могу отправить связанные данные таблицы. Я мог бы послать значения для CustomerRef, ChallanDate и т. Д., Но не смог добавить массив в этом. На мой взгляд, если я добавлю массив в formData, я не смогу получить его в контроллере, так как он ожидает только строковые значения.

Если мы не отправляем изображение, то все данные успешно отправляются на контроллер через ajax, как показано ниже:

var shownVal = document.getElementById("CustomerId").value;
            var CustomerId = document.querySelector("#CNList option[value='" + shownVal + "']").dataset.value;
           var CustomerRef = document.getElementById("CustomerRef").value;
            var DateCreated = $("#DateCreated").val();
            var ChallanDate = $("#ChallanDate").val();

            var InwardMaterialViewModel = {
                DateCreated: DateCreated,
                ChallanDate: ChallanDate,
                CustomerId: CustomerId,
                CustomerRef: CustomerRef,
                Orders: InwardMaterialArray,
                };

            $.ajax({
                beforeSend: function () {
                    $('.signal').show()
                },
                type: 'POST',
                url: '@Url.Action("SubmitData", "Material")',
                          datatype: "json",
                contentType: false,
                processData: false,
                data: InwardMaterialViewModel,
                success: function (data) {
                    $('.signal').hide();
                    if (data.result == false) {
                        alert(data.msg);
                    }
                    else {
                        alert("Saved succesfully");
                        $('#updateData').html(data);
                        }
                },
                error: function (response) {

                }
            });

Попытка размещения файла изображения в InwardMaterialViewModel, но это не сработало. Исследовали и обнаружили, что мы можем отправить данные и изображение, используя метод <form action="" method="post" enctype="multipart/form-data">, как описано в этой ссылке: https://cpratt.co/file-uploads-in-asp-net-mvc-with-view-models/ Но тогда проблема в том, что данные таблицы не отправляются в модели, так как мы не знаем, сколько строк будет вводить пользователь. Пожалуйста, сообщите.

Более подробная информация по запросу:

Главный вид:

@model xxxx.ViewModels.InwardMaterialViewModel

@{
    ViewBag.Title = "AddNew";
}

<h2>AddNew</h2>
<link href="~/Content/Loader.css" rel="stylesheet" type="text/css" />
<div class="container margin-top-lg">
                <div class="row">
            <div class="col-lg-12">

                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="DateCreated">Date :</label>
                        @Html.TextBoxFor(d => d.DateCreated, "{0:dd/MM/yyyy}", new { id = "DateCreated", @class = "form-control", maxlength = "500" })
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="CustomerName">Customer Name :</label>
                        @*@Html.EditorFor(model => model.CustomerRef, new { id = "CustomerName", htmlAttributes = new { @class = "form-control" } })*@
                        @*@Html.DropDownListFor(p => p.Customers, new SelectList(Model.Customers, "CustomerId", "CustomerName"), "Select Name", new { id = "CustomerId", @class = "form-control" })*@
                        <input name="id" class="form-control" type="search" list="CNList" autocomplete="on" id="CustomerId" />

                    </div>
                </div>


                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="CustomerRef">Customer Ref. :</label>
                        @Html.TextBoxFor(d => d.CustomerRef, new { id = "CustomerRef", @class = "form-control", maxlength = "2000" })
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="CustomerRef">Challan Date :</label>
                        @Html.TextBoxFor(d => d.ChallanDate, "{0:dd/MM/yyyy}", new { id = "ChallanDate", @class = "form-control", maxlength = "500" })
                    </div>
                </div>
            </div>
        </div>


        <div class="col-sm-6">
            <div class="form-group">

                <div class="field" align="left">
                    <label for="ChallanImage">Challan Image :</label>
                    <input type="file" id="imageUploadForm" name="images" multiple="multiple" />
                </div>


            </div>

        </div>
        <br />
        <div class="col-md-12">
            <div id="updateData" class="table-responsive">
                @Html.Partial("_AddNewTable")
            </div>
        </div>
        <br>
        </div>

<br />

<a href="@Url.Action("Index", "Home")" class="btn btn-primary btn-large pull-left"> Back</a>
<button type="submit" id="id" onclick="Submitbtn()" class="btn btn-success pull-right"> Submit </button>

Частичное представление: с данными таблицы

@model xxxx.ViewModels.InwardMaterialViewModel
<table id="data_table">

    <tr>

        <th>Part Name</th>
        <th>Part No</th>
        <th>Serial No</th>
        <th>Quantity</th>
        <th>Repair Type</th>
        <th>User</th>
        <th>Remarks</th>
        <th>Add/Delete</th>

    </tr>

        @foreach (var item in Model.Orders)
        {
            <tr>
                <td>@item.PartName</td>
                <td>@item.PartNo</td>
                <td>@item.SerialNo</td>
                <td>1</td>
                <td>@item.RepairType</td>
                <td>@item.UserName</td>
                <td>@item.Remarks</td>
                <td>
                    <input type='button' value='Delete' class='delete' onclick='Delete(@item.OrderGUID)' />
                </td>

            </tr>
        }


    <tfoot>
        <tr>
            <td><input name="id" class="form-control" type="search" list="lan" autocomplete="on" id="Part_Name" onchange = "getPartNumber()" /></td>
           @*<td>@Html.DropDownListFor(p => p.Parts, new SelectList(Model.Parts, "PartName", "PartName"), "Select Name", new { id = "Part_Name", @class = "form-control", @onchange = "getPartNumber()" })</td>*@
            <td><input type="text" class="form-control" id="Part_No" readonly/></td>

            <td><input type="text" class="form-control" id="Serial_No" /></td>
            <td><input type="text" class="form-control" id="Quantity" value="1" readonly/></td>
            <td>
                @Html.DropDownListFor(p => p.RepairType, new SelectList(Model.RepairTypeList, "Text", "Value"), "Select Type", new { id = "Repair_Type", @class = "form-control" })
            </td>
            <td>
                @Html.DropDownListFor(p => p.Users, new SelectList(Model.Users, "UserId", "UserName"), "Select Name", new { id = "User", @class = "form-control" })
            </td>

            <td><input type="text" class="form-control" id="Remarks" /></td>
            <td>
                <input type="button" class="add" onclick="add_row();" value="Add Row">
            </td>
        </tr>
    </tfoot>
</table>

<datalist id="lan">
    @foreach (var item in Model.Parts)
    {
        <option id="@item.PartId" data-value="@item.PartId" value="@item.PartName"></option>

    }

</datalist>

on add_row: данные строки вводятся в массив

var InwardMaterialArray = [];
    function add_row() {
        var Part_Name = document.getElementById("Part_Name").value;
        var Part_No = document.getElementById("Part_No").value;
        var Serial_No = document.getElementById("Serial_No").value;
        if (Serial_No == "") {
            alert("Serial No. must be filled out");
            return false;
        }
        var Quantity = document.getElementById("Quantity").value;
        var Repair_Type = document.getElementById("Repair_Type").value;
        var User = document.getElementById("User").value;
        var Remarks = document.getElementById("Remarks").value;
        var OrderDto = {
            PartName: Part_Name,
            PartNo: Part_No,
            SerialNo: Serial_No,
            Qty: Quantity,
            RepairType: Repair_Type,
            AssignedUserId: User,
            Remarks: Remarks,

        };

        InwardMaterialArray.push(OrderDto);
        var InwardMaterialViewModel = {
            Orders : InwardMaterialArray
        };
        $.ajax({
            beforeSend: function () {
                $('.signal').show()
            },
            type: 'POST',
            url: '@Url.Action("AddRow", "Material")',

            data: InwardMaterialViewModel,
            success: function (data) {
                $('.signal').hide();
                if (data.result == false) {
                    alert(data.msg);
                }
                else {
                    $('#updateData').html(data);
                }
            },
            error: function (response) {

            }
        });

    }

Все данные, введенные в строки, находятся в массиве InwardMaterialArray, заполненном с помощью InwardMaterialArray.push(OrderDto); в add_row метод выше.

Так что мне нужно отправить этот массив InwardMaterialArray вместе с данными, заполненными для клиента выше, и изображение на контроллер, все сразу.