连接多个表：将表列表中的项目编辑和更新为asp.net mvc中的模式

如何解决连接多个表：将表列表中的项目编辑和更新为asp.net mvc中的模式

我是ASP.NET MVC的新手，我无法编辑项目并以模式形式显示它并在数据库中更新它。数据未以模态显示。数据来自数据库中的不同表。

预期输出：在单个视图（表）中显示列表，并编辑列表中的选定项（模式）并进行更新。

这是我的代码：

AdminController：

    public JsonResult EditItem(int? itemID)
    {
        var id = db.Items.Where(i => i.ItemID == itemID).FirstOrDefault();

        List<Item> itemList = db.Items.ToList();
        List<ItemDetail> itemDetailList = db.ItemDetails.ToList();
        List<ProductType> productTypeList = db.ProductTypes.ToList();

        var details = from itm in itemList
                      join itmDetail in itemDetailList on itm.ItemID equals itmDetail.ItemID into ItemInfo
                      from itmDetail in ItemInfo.DefaultIfEmpty()
                      join product in productTypeList on itmDetail.ProductID equals product.ProductID into ProductInfo
                      from product in ProductInfo.DefaultIfEmpty()
                      where itm.ItemID.Equals(id)
                      select new TableCollection { Item = itm,ItemDetail = itmDetail,ProductType = product };

        return Json(details,JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult EditItem(Item item,ItemDetail details)
    {
        ItemDetail itmDetails = db.ItemDetails.Where(d => d.ItemID == item.ItemID).FirstOrDefault();

        itmDetails.ItemID = details.ItemID;
        db.SaveChanges();

        return RedirectToAction("Inventory","Admin");
    }

库存清单视图：

@model IEnumerable<VetClinic.Models.Admin.TableCollection>

@if (Model != null)
{
    <table id="inventory" class="table table-striped table-hover">
        <thead class="thead-dark">
            <tr>
                <th>Product Type</th>
                <th>Item Name</th>
                <th># of Stock</th>
                <th>Price</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody class="bg-light">
            @foreach (var item in Model)
            {
                <tr id="[e-mail]">
                    <td>@item.ProductType.Name @item.ProductType.Type</td>
                    <td>@item.ItemDetail.ItemName</td>
                    <td>@item.ItemDetail.NumOfStock</td>
                    <td>@item.ItemDetail.Price</td>
                    <td>
                        <a href="#" id="edit" onclick="EditItem(@item.Item.ItemID)"><i class="fa fa-pencil" data-toggle="tooltip" title="Edit" style="color: blue;"></i></a>
                    </td>
                </tr>
            }
        </tbody>
    </table>

    <div class="modal fade" id="EditItem" tabindex="-1" role="dialog" aria-labelledby="EditItem" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Edit Item</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @using (Html.BeginForm("EditItem","Admin",FormMethod.Post))
                    {
                        <input type="hidden" id="hiddenItemID" />
                        <div class="form-group row">
                            <div class="col-lg-3">
                                <label>Product Type:</label>
                            </div>
                            <div class="col-lg-4">
                                <input type="text" id="productType"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2">
                                <label>Item Name:</label>
                            </div>
                            <div class="col-lg-3">
                                <input type="text" id="itemName" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-5">
                                <label>Number of Stocks</label>
                            </div>
                            <div class="col-lg-2">
                                <input type="text" id="numOfStocks" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2">
                                <label>Price:</label>
                            </div>
                            <div class="col-lg-3">
                                <input type="text" id="price" class="form-control" />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary">Update</button>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
}
else
{
    <i class="fa fa-info-circle">&nbsp;</i>@ViewBag.EmptyList;
}

<script>
    function EditItem(id) {
        $.ajax({
            url: "/Admin/EditItem/" + id,type: "GET",dataType: "json",success: function (response) {
                $("#hiddenItemID").val(response.ItemID);
                $("#EditItem").modal("show");
            }
        });
        return false;
    }
</script>