ASP.NET Core MVC多行数据模型绑定失败求助

需求说明 #

我希望控制器能传递如下格式的JSON数据：

最初计划通过模型绑定实现，现在改用jQuery方式提交也可以接受。

模型类 #

public class Orders
{
    public int Id { get; set; }
    public int CustomerId { get; set; }
    public string ItemName { get; set; }
    public double Price { get; set; }

    public IEnumerable<SelectListItem> CustomersList { get; set; }
}

控制器代码 #

// GET: OrdersController/Create
public ActionResult Create()
{
   var listCustomers = dbContext.Customers
       .Select(x => new SelectListItem
       {
           Value = x.Id.ToString(),
           Text = x.DepName
       });

        var orders = new Orders()
        {
            CustomersList = listCustomers
        };

    //var orders = new List<Orders>();
    return View(orders);
}

// POST: OrdersController/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(List<Orders> ordersList)
{
    Orders newOrders = new Orders();

    foreach (var order in ordersList)
    {
        newOrders.Id = 0;
        newOrders.CustomerId = order.CustomerId;
        newOrders.ItemName = order.ItemName;
        newOrders.Price = order.Price;
    }

    // 后续会将newOrders处理为application/json格式发送给后端API
}

视图标记 #

@model List<NameSpace.Web.Models.Orders>

@{
  ViewData["Title"] = "Create";
  Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

<div class="row">

    <div class="col-md-8">
       <div class="form-group">
           @Html.LabelFor(model => model.CustomerId, htmlAttributes: new { @class = "control-label col-md-6" })
           @Html.DropDownListFor(model => model.CustomerId, Model.CustomersList, "Select Customer ", new { @class = "form-control" })
           @Html.ValidationMessageFor(model => model.DepId, "", new { @class = "text-danger" })
       </div>
    </div>

    <hr>

    <div class="col-md-12">
        <div class=''></div>
       
            <thead>
                <tr>
                    //<th style="width:150px">Cust. Id</th>
                    <th style="width:150px">Item Name</th>
                    <th style="width:150px">Price</th>
                </tr>
            </thead>

            <tbody id="tblOrdersBody">
                <tr>
                    //<td><input name='Orders[0].CustomerId' class="form-control" /></td>
                    <td><input name='Orders[0].ItemName' class="form-control" /></td>
                    <td><input name='Orders[0].Price' class="form-control" /></td>
                </tr>
            </tbody>
            <tfooter>
                <tr><a hre="#" class="btn btn-success" id="addOrder"></a> </tr>
            </tfooter>
        </table>


        <div class="row">
            <div class="tile-footer d-flex justify-content-around">
                @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-danger" })
                <input id="btnSave" type="submit" value="Save Order" class="btn btn-primary" />
            </div>
        </div>
    </div>
</div>
}

@section Scripts {

<script>
    var i = 1;
    $(document).on("click", "#addOrder", function () {

        $("#tblOrdersBody").append("<tr>"
            //+ "<td><input name='Orders[" + i + "].CustomerId' class='form-control' /></td>"
            + "<td><input name='Orders[" + i + "].ItemName' class='form-control'/></td>"
            + "<td><input name='Orders[" + i + "].Price' class='form-control'/></td>"
            + "<td><button type='button' class='btn btn-danger' id='btnRemove' </buuton></td>"
            + "</tr > ");
        i++;
    });
</script>
}

当前遇到的问题 #

已参考过批量插入相关的解决方案，但控制器中接收的ordersList始终为空（条目数为0），无法获取页面提交的订单数据。

内容的提问来源于stack exchange，提问作者Abdi fatah