editorfor inside editorfor，用于asp.net core中的动态列表

Question

所以我想知道如何在动态列表中拥有一个动态列表，它使用表单编辑器来动态添加项目。我使用此博客动态添加项目：

https://dev.to/stevcooo/add-items-dynamically-in-list-in-net-core-40i9

以下是我的订单型号

''''
public class Order
    {

        [Key]
        public int OrderId { get; set; }

        [Required]
        [StringLength(100)]
        [Display(Name = "Cashier Name")]
        public string CashierName { get; set; }

        [Display(Name = "Invoice Number")]
        public string InvoiceNumber { get; set; }

        [Display(Name = "Date Created")]
        public DateTime CreatedDate { get; set; }

        public List<OrderItem> Items { get; set; }
'''

下面是我的 OrderItem 模型

'''
public class OrderItem
    {
        [Key]
        public int Id { get; set; }
        public string ProductName { get; set; }

        public string ItemCode { get; set; }

        [Range(1, int.MaxValue, ErrorMessage = "Please enter a value bigger than 0")]

        public int Quantity { get; set; }
 
        public List<PalletItems> PalletItems { get; set; }
'''

下面是我的 PalletItems 模型

'''
public class PalletItems
    {

        [Key]
        public int id { get; set; }

        [StringLength(100)]
        [Display(Name = "Pallet Number")]
        public string PalletNumber { get; set; }

        [Display(Name = "Pallet Quantity")]
        [Range(1, int.MaxValue, ErrorMessage = "Please enter a value bigger than 0")]

        public int Pallet_Quantity { get; set; }
'''

以下是包含编辑器的订单创建表单的代码： '''

<div id="orderItemsContainer">
                @Html.EditorFor(model => model.Items, new { @style = "border:0.2rem" })
                <br /><span style="color:red;">@ViewBag.ErrorMessage</span>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <input class="btn btn-default" type="button" id="btnAdd" value="Add product" />
                </div>
                <div class="col-md-2">
                    <input class="btn btn-default" type="button" id="btnRemove" value="Remove product" />
                </div>
            </div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
        $("#btnAdd").on('click', function () {
            $.ajax({
                async: true,
                data: $('#form').serialize(),
                type: "POST",
                url: '/Orders/AddOrderItem',
                success: function (partialView) {
                    console.log("partialView: " + partialView);
                    $('#orderItemsContainer').html(partialView);
                }
            });
        });
}

'''

下面是我的 OrderItems 模板编辑器：

'''
model UserManagement.MVC.Models.OrderItem
<div class="row">
    <div class="col-md-4">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        @if (User.IsInRole("Dispatcher"))
        {
            <div class="form-group">
                <label asp-for="ItemCode" class="control-label"></label>
                <input asp-for="ItemCode" class="form-control" readonly="@(true)" />
                <span asp-validation-for="ItemCode" class="text-danger"></span>
            </div>
        }
        else
        {
            <div class="form-group">
                <label asp-for="ItemCode" class="control-label"></label>
                <select asp-for="ItemCode" class="form-control" asp-items="ViewBag.Name">
                    <option value="">-- Select Product Item --</option>
                </select>
                <span asp-validation-for="ItemCode" class="text-danger" />
            </div>

        }
    </div>

下面是我将 OrderItems 添加到 Order 的控制器代码：

'''
HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult AddOrderItem([Bind("Items")] Order order)
        {
            PopulateDepartmentsDropDownListAsync();
            order.Items.Add(new OrderItem());
            return PartialView("OrderItems", order);
        }
'''

我现在如何向每个 OrderItem 添加多个palletItem？

Answer 1

给你的palletItems和OrderItem添加一个关系，你就可以获得所有的属性

通过使用palletItems：

public class PalletItems
{
    [Key]
    public int id { get; set; }

    [StringLength(100)]
    [Display(Name = "Pallet Number")]
    public string PalletNumber { get; set; }
     
    //....
    public OrderItem OrderItem { get; set; }  //add this, (In Orderitem model, add Order)
}

使用它：

@model PalletItems
@Html.EditorFor(model => model.PalletNumber, new { @style = "border:0.2rem" })
@Html.EditorFor(model => model.OrderItem.Order.CashierName, new { @style = "border:0.2rem" })