具有两个模型和局部视图的 MVC 视图

Question

MVC 创建视图有两个部分用于 Invoice 和 InvoiceItem 表。

发票详细信息部分包含用于创建的默认脚手架代码。
发票项目部分有一个按钮 "Add Item" 和一个局部视图。当用户单击 "Add Item" 时，将显示 jQuery UI 弹出窗口以创建发票项目并调用 /Invoice/GetInvoiceItems 操作。此方法将新发票项目附加到现有项目（如果有）和 returns 在 Div(viewAPInvoiceIndex) 中加载的部分视图。此部分视图具有列表的默认脚手架代码。

在用户创建完整的发票之前，创建的发票项目不会存储到数据库中。此外，用户将能够 edit/delete 为项目开具发票。

Create.chtml:

<div class="panel-body">
   <div id="viewAPInvoiceIndex">
     @{ Html.RenderPartial("_APInvoiceIndex", (IEnumerable<TransportationModule.Models.APInvoiceItem>)@ViewBag.CurrInvItems); }
   </div>
</div>

添加发票项目代码（针对弹出窗口中的按钮）：

$("#btnAddItem").click(function () {
   var currId = $('[id$=tableInvItems] tr').length;
   if (currId < 1)
      currId = 1;
   var _item = { Id: currId, InvoiceNo: $('#txtInvNo').val(), OrderQty: $('#txtOrderQty').val(), UnitPrice: $('#txtUnitPrice').val()
   };

   $("[id$=viewAPInvoiceIndex]").load("/Invoice/GetInvoiceItems", { InvItem: _item });
   $('#mdGrnList').dialog("close");
});

操作方法：

public ActionResult Create()
{
    IList<APInvoiceItem> existingItems = new List<APInvoiceItem>();
    if (Session != null && Session["ExistingItems"] != null)
       existingItems = (IList<APInvoiceItem>)Session["ExistingItems"];
    ViewBag.CurrInvItems = existingItems;
    return View();
}

// UPDATES THE MODEL WITH NEW ITEM AND RETURNS THE PARTIAL VIEW
public ActionResult GetInvoiceItems(APInvoiceItem InvItem)
{
   IList<APInvoiceItem> existingItems = new List<APInvoiceItem>();
   if (Session != null && Session["ExistingItems"] != null)
      existingItems = (IList<APInvoiceItem>)Session["ExistingItems"];
   existingItems.Add(InvItem);
   Session["ExistingItems"] = existingItems;
   return PartialView("_APInvoiceIndex", existingItems);
}

// REMOVES AN INVOICE ITEM 
public ActionResult DeleteInvItem(int id)
{
   IList<APInvoiceItem> existingItems = new List<APInvoiceItem>();
   if (Session != null && Session["ExistingItems"] != null)
     existingItems = (IList<APInvoiceItem>)Session["ExistingItems"];

   var itemToRemove = existingItems.SingleOrDefault(r => r.Id == id);
   if (itemToRemove != null)
      existingItems.Remove(itemToRemove);

   Session["ExistingItems"] = existingItems;
   return PartialView("_APInvoiceIndex", existingItems);
}

我能够创建发票项目并且部分视图已正确加载。但是如果我添加一个新项目并按 Edit/Delete 什么也不会发生。似乎相应的 jQuery 方法在页面刷新之前没有被绑定。刷新页面后，我可以删除项目。

_APInvoiceIndex.chtml

<td>
   <button class="btn btn-danger btn-sm" id="btnDeleteItem" data-id="@item.Id" type="button"></button>
</td>

$('[id$=btnDeleteItem]').click(function () {
   var invId = $(this).attr("data-id");
   $.ajax({
     url: '/Invoice/DeleteInvItem',
     data: { id: invId },
     success: function (data) {
        $("[id$=viewAPInvoiceIndex]").html(data);
     },
     error: function (request, textStatus, errorThrown) {
        alert(textStatus + " " + errorThrown);
     }
    });
});

另请告知这是否是实现上述场景（创建 Invoice 和 InvoiceItems）的正确方法。

感谢您的宝贵时间。

Answer 1

因为视图在后面的部分 DOM [即DOM 内容已加载] 事件不会附加到 element，除非您提供 event delegation 选项。所以你可以提供 event delegation 如下：

$('#viewAPInvoiceIndex').on('click','[id$=btnDeleteItem]',function(){
   var invId = $(this).attr("data-id");
   $.ajax({
     url: '/Invoice/DeleteInvItem',
     data: { id: invId },
     success: function (data) {
        $("[id$=viewAPInvoiceIndex]").html(data);
     },
     error: function (request, textStatus, errorThrown) {
        alert(textStatus + " " + errorThrown);
     }
    });
});

根据@StephenMuecke 的建议，我们可以将事件附加到最近的 element，它已在 DOM 加载时加载，而不是将其附加到 document，这样会更有效率。

Note : I also see that you might be creating duplicate id's with id=btnDeleteItem and this not a valid html then. So better change it to class then you can do it as $('#viewAPInvoiceIndex').on('click','.btnDeleteItem'///

具有两个模型和局部视图的 MVC 视图

MVC view with Two models and a parital view

c#

asp.net-mvc

jquery

asp.net-mvc-partialview