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

    // I will be processing newOrders into application/json and sending to the backend 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>
}

我见过很多类似的问题，最接近的就是这个问题，但我可以弄清楚，控制器收到的项目计数0