Как связать динамически добавленную разметку jQuery с действием контроллера httpost в mvc ядра asp.net?

Question

Я создаю систему управления автопарком.Я пытаюсь заставить пользователя добавлять различные аксессуары к автомобилю, я не уверен в количестве аксессуаров, поэтому я предоставил форму, тогда пользователь может добавить столько аксессуаров, сколько захочет.

Я добавил код JQuery, чтобы добавить больше строк, но при публикации формы действие контроллера не привязывает новые добавленные поля к переменной модели

Модель

public class AddVehicleAccessory
{
    public int NumberofAccessories { get; set; }

    public string [] selectedVehicles { get; set; }

    public IList<VehicleAccessory> VehicleAccessories { get; set; }
}

Create.cshtml

@model FleetManagementSystem.Models.Transport.ViewModels.AddVehicleAccessory
 @{
   ViewData["Title"] = "CreateAccessory";
  }

<h2>CreateAccessory</h2>

<div class="row">
<div class="col-md-4">
    <form asp-action="AddCreate">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <table id="myTable" class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.VehicleAccessories[0].AccessoryName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.VehicleAccessories[0].Accessory_Merchant)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.VehicleAccessories[0].Accessory_Price)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.VehicleAccessories[0].Accessory_Invoice)
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

                @for (int i = 0; i < Model.NumberofAccessories; i++)
                {
                    //TODO Use this when creating a vehicle accessory page

                    <tr>
                        <td>
                            <select asp-for="VehicleAccessories[i].AccessoryNameID" class="form-control" asp-items="ViewBag.AccessoryID"></select>
                        </td>
                        <td>
                            <input asp-for="VehicleAccessories[i].Accessory_Merchant" class="form-control" />
                            <span asp-validation-for="VehicleAccessories[i].Accessory_Invoice" class="text-danger"></span>
                        </td>
                        <td>
                            <input asp-for="VehicleAccessories[i].Accessory_Price" class="form-control" />
                            <span asp-validation-for="VehicleAccessories[i].Accessory_Price" class="text-danger"></span>
                        </td>

                        <td>
                            <input asp-for="VehicleAccessories[i].Accessory_Invoice" class="form-control" />
                            <span asp-validation-for="VehicleAccessories[i].Accessory_Invoice" class="text-danger"></span>

                        </td>
                    </tr>
                }
        </table>
        <div class="form-group">
            <input type="submit" value="AddCreate" class="btn btn-default" />
        </div>
    </form>
</div>

<button class="btnPlus">Add rows</button>

@section Scripts {
   @Html.Partial("~/Views/Shared/_MyPartial.cshtml", Model);
}

Скрипт для добавления дополнительных строк в таблицу

@model FleetManagementSystem.Models.Transport.ViewModels.AddVehicleAccessory

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var count = 3;
$(document).ready(function () {
    $(document).on("click", ".btnPlus", function () {

        count++;
        var html =
            '<tr>'+
                '<td>'+
            '<select class="form-control" data-val="true" data-val-required="The AccessoryNameID field is required." id="VehicleAccessories_' + count +'__AccessoryNameID" name="VehicleAccessories[' + count +'].AccessoryNameID"><option value="1">Tow Bar</option>'+
                        '<option value="2">Canopy</option>'+
                        '<option value="3">Bull Bar</option>'+
                        '<option value="4">Lights</option>'+
                        '<option value="5">Radios</option>'+
                        '<option value="6">Branding</option>'+
                    '</select>'+
                '</td>'+
                '<td>'+
            '<input class="form-control" type="text" id="VehicleAccessories_' + count +'__Accessory_Merchant" name="VehicleAccessories['+count+'].Accessory_Merchant" value="" />'+
                    '<span class="text-danger field-validation-valid" data-valmsg-for="VehicleAccessories[' + count +'].Accessory_Invoice" data-valmsg-replace="true"></span>'+
                '</td>'+
                '<td>'+
            '<input class="form-control" type="text" data-val="true" data-val-number="The field Accessory_Price must be a number." data-val-required="The Accessory_Price field is required." id="VehicleAccessories_' + count +'__Accessory_Price" name="VehicleAccessories[' + count +'].Accessory_Price" value="" />'+
                    '<span class="text-danger field-validation-valid" data-valmsg-for="VehicleAccessories[' + count +'].Accessory_Price" data-valmsg-replace="true"></span>'+
                '</td>'+
                '<td>'+
            '<input class="form-control" type="text" id="VehicleAccessories_' + count +'__Accessory_Invoice" name="VehicleAccessories[' + count +'].Accessory_Invoice" value="" />'+
                    '<span class="text-danger field-validation-valid" data-valmsg-for="VehicleAccessories[' + count +'].Accessory_Invoice" data-valmsg-replace="true"></span>'+
                '</td>'+
            '</tr>';
        $("tbody").append($(html).clone(true));
    });
});

Действие контроллера Проблема Динамически сгенерированный HTML не привязывается к addVehicleAccesory при публикации

[HttpPost]
public IActionResult AddCreate(AddVehicleAccessory addVehicleAccesory){}

Answer 1

Я нашел ответ здесь

Спасибо