jQuery引用用局部视图生成的div来附加另一个局部视图

我在页面上多次渲染了这个局部视图：

@model POS.Domain.Entities.Category 
 
@Model.Name
 Get Partial View  function getView() { $('#divResult').load("@Url.Action("ProductList" , "Product", new {category = Model.Name})"); }  
 
  

我们的想法是，当有人单击Get Partial View链接时，它将使用类别值Model.Name加载我的ProductList操作在我的Product控制器中生成的局部视图，并将该局部视图附加到相应的divResult div。

问题是页面加载后，如果用户点击任何GetPartialView链接，它会加载最终类别中包含的产品列表，并将它们附加到最顶层的divResult div。

我希望在更改脚本以使用jQuery正确加载信息时提供一些指导。 我也觉得每次加载部分视图时我都不应该重复脚本。 。 。 那么当用户点击其中一个Get Partial View链接时，我将如何编写适当的jQuery脚本来执行以下操作：

• 获取链接的父div的id（ @ModelName ）
• 使用该ID来调用我的Action： @Url.Action("ProductList", "Product", new {category = **that id**})";
• 将该Action返回的局部视图附加到id为divResult的div，该divResult位于父div中，我们在此步骤上方找到了两个步骤

更新

这是我的观点中的Html：

 
 
Balls
 Get Partial View  function getView() { var $category = $(this).closest(".category"); var categoryName = $category.attr("id"); //var categoryName ="Balls"; $('.divResult').load("/Product/ProductList", {category: categoryName}); }  
 
 
 
 
Drinks
 Get Partial View  function getView() { var $category = $(this).closest(".category"); var categoryName = $category.attr("id"); //var categoryName ="Balls"; $('.divResult').load("/Product/ProductList", {category: categoryName}); }  
 
  

如果我手动将Balls的值传递给categoryName – 我可以从Balls类别接收产品，但是如果我使用var categoryName = $(this).closest(".category").attr("id"); 我得到了undefined 。

也许看到HTML会有所帮助？

Answer 1

您可以使用load函数的第二个参数来传递数据以及加载请求。 查看http://api.jquery.com/load/

将getView函数更改为如下所示：

 function getView(e) { e.preventDefault(); var $category = $(this).closest(".category"); var categoryName = $category.attr("id"); $('.divResult', $category).load("@Url.Action("ProductList" , "Product")", { category: categoryName }); } 

更新：相同的ID不能用于页面上的多个元素。 并且由于您正在加载部分视图多个时间并附加，因此您将以具有相同ID的多个元素结束。 将部分视图更改为如下（使用类而不是ID）：

 @model POS.Domain.Entities.Category 
 
@Model.Name
 Get Partial View 
 
  

并将getView函数移动到父视图：