按顺序动态编辑 OrderItem

问：

在我的 ASP.Net Core MVC 应用程序中，有 2 个实体：

public class Order
{
    public int Id { get; set; }

    public string Number { get; set; }

    public DateTime Date { get; set; }

    public virtual IEnumerable<OrderItem> OrderItems { get; set; }
}

public class OrderItem
{
    public int Id { get; set; }

    public string Name { get; set; }

    public decimal Quantity { get; set; }

    public string Unit { get; set; }

    public int OrderId { get; set; }
    public virtual Order Order { get; set; }
}

它们存储在数据库中。由于应用程序的功能，我可能需要更改特定的 Order 及其相应的 OrderItems。 为此，我编写了 2 个控制器：

[HttpGet]
    public async Task<IActionResult> Edit(int id)
    {
            var orderDto = await _orderService.GetOrderWithOrderItemById(id);
            var orderEditViewModel = _mapper.Map<OrderEditViewModel>(orderDto);

            if (orderDto != null)
            {
                return View(orderEditViewModel);
            }

            else
            {
                throw new ArgumentException();
            }
    }

    [HttpPost]
    public async Task<IActionResult> Edit(OrderEditViewModel viewModel)
    {
         await _orderService.OrderUpdateAsync(_mapper.Map<OrderDto>(viewModel));

            if (viewModel != null)
            {
                return RedirectToAction("Index", "Article");
            }

            else
            {
                throw new ArgumentException();
            }
        }


    }

控制器正常工作，应该到达它们的数据也是如此。但我的问题是动态更改编辑视图中的 OrderItem。现在我将提供完整的代码：

    @model OrderEditViewModel

<div class="container">
    <h2>Edit article</h2>
    <div class="row gx-5">
        <form asp-controller="Order" asp-action="Edit" asp-antiforgery="true" method="post">
            <div>
                <div class="mb-3">
                    <label class="col-sm-2 col-form-label" asp-for="Number"></label>
                    <input class="form-control" type="text" asp-for="Number">
                </div>
                <div class="mb-3">
                    <label class="col-sm-2 col-form-label" asp-for="Date"></label>
                    <input type="datetime-local" class="form-control" asp-for="Date">
                </div>

                <div>
                    <h5>OrderItems</h5>
                    <div class="container">
                        <div class="mb-3">
                            @foreach (var orderItem in @Model.OrderItems)
                            {
                                <div class="offset-2 col-8">
                                    <div class="card">
                                        <h5 class="card-title">@orderItem.Name</h5>
                                        <div class="card-body">
                                            Quantity: @orderItem.Quantity
                                        </div>
                                        <div class="card-footer text-muted">
                                            Unit: @orderItem.Unit
                                        </div>
                                        <button class="editButton" id="editButton">Edit</button>
                                        <button class="removeButton" id="removeButton">Delete</button>
                                    </div>
                                </div>
                            }
                            <div id="orderItemsWrapper" class="row gx-5">
                                <div>
                                    <input type="text" name="OrderItems[0].Name" />
                                    <input type="text" name="OrderItems[0].Quantity" />
                                    <input type="text" name="OrderItems[0].Unit" />
                                    <a href="#" class="removeButton">Remove</a>
                                </div>
                            </div>
                            <button id="addButton" type="button" class="btn btn-outline-secondary">Add Order Item</button>
                        </div>
                    </div>

                </div>

            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>



@section Scripts
    {
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var orderItemsWrapper = document.getElementById("orderItemsWrapper");
            var editButtons = document.querySelectorAll("editButton");
            var addButton = document.getElementById("addButton");
            
            editButtons.forEach(function (editButton) {
                editButton.addEventListener("click", function (e) {
                    e.preventDefault();

                    var orderItemDiv = editButton.closest('.order-item');
                    var inputName = orderItemDiv.querySelector('.item-name').textContent;
                    var inputQuantity = orderItemDiv.querySelector('.item-quantity').textContent;
                    var inputUnit = orderItemDiv.querySelector('.item-unit').textContent;

                    var editForm = document.getElementById("editForm");
                    editForm.querySelector("#editItemName").value = inputName;
                    editForm.querySelector("#editItemQuantity").value = inputQuantity;
                    editForm.querySelector("#editItemUnit").value = inputUnit;
                    
                });
            });
            
            addButton.addEventListener("click", function (e) {
                e.preventDefault();
                var newIndex = orderItemsWrapper.children.length;
                var newOrderItemDiv = document.createElement("div");
                newOrderItemDiv.classList.add("order-item");

                var inputName = document.createElement("input");
                inputName.setAttribute("type", "text");
                inputName.setAttribute("name", "OrderItems[" + newIndex + "].Name");
                newOrderItemDiv.appendChild(inputName);

                var inputQuantity = document.createElement("input");
                inputQuantity.setAttribute("type", "text");
                inputQuantity.setAttribute("name", "OrderItems[" + newIndex + "].Quantity");
                newOrderItemDiv.appendChild(inputQuantity);

                var inputPrice = document.createElement("input");
                inputPrice.setAttribute("type", "text");
                inputPrice.setAttribute("name", "OrderItems[" + newIndex + "].Unit");
                newOrderItemDiv.appendChild(inputPrice);

                var removeButton = document.createElement("a");
                removeButton.setAttribute("href", "#");
                removeButton.classList.add("removeButton");
                removeButton.textContent = "Remove";
                newOrderItemDiv.appendChild(removeButton);

                orderItemsWrapper.appendChild(newOrderItemDiv);
            });
            
            orderItemsWrapper.addEventListener("click", function (e) {
                if (e.target.classList.contains("removeButton")) {
                    e.preventDefault();
                    e.target.parentElement.remove();
                }
            });
        });

                
    </script>

}

不幸的是，我不是很擅长JS。因此，我在编写此功能时寻求帮助或建议。不幸的是，在我的解释中，“编辑”和“删除”按钮不起作用。 通常，现有的 OrderItems 不会添加到最终模型中。先谢谢你！