Question

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

@model POS.Domain.Entities.Category

<div class = "category" id= "@Model.Name">
    <h2>@Model.Name</h2>
    <a href='javascript:getView();'>Get Partial View</a>
    <script type="text/javascript">
        function getView() {
            $('#divResult').load("@Url.Action("ProductList" , "Product", new {category = Model.Name})");
        }
    </script>
    <div id="divResult">
    </div>
</div>

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

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

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

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

更新

以下是我视图中的Html：

divResult

如果我手动将<div class = "category" id= "Balls"> <h2>Balls</h2> <a href='javascript:getView();'>Get Partial View</a> <script type="text/javascript"> function getView() { var $category = $(this).closest(".category"); var categoryName = $category.attr("id"); //var categoryName ="Balls"; $('.divResult').load("/Product/ProductList", {category: categoryName}); } </script> <div class="divResult"> </div> </div> <div class = "category" id= "Drinks"> <h2>Drinks</h2> <a href='javascript:getView();'>Get Partial View</a> <script type="text/javascript"> function getView() { var $category = $(this).closest(".category"); var categoryName = $category.attr("id"); //var categoryName ="Balls"; $('.divResult').load("/Product/ProductList", {category: categoryName}); } </script> <div class="divResult"> </div> </div>的值传递给Balls - 我可以收到categoryName类别的产品，但如果我使用Balls，我会收到var categoryName = $(this).closest(".category").attr("id"); }。

也许看到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的多个元素结束。将部分视图更改为如下（使用class而不是ID）：

@model POS.Domain.Entities.Category

<div class = "category" id= "@Model.Name">
    <h2>@Model.Name</h2>
    <a href='/get-partial-view'>Get Partial View</a>
    <div class="divResult">
    </div>
</div>

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

<script type="text/javascript">
        function getView() {
                var categoryName = $(this).closest(".category").attr("#id");
                $('.divResult').load("/Product/ProductList",
                        {category: categoryName});
        }

        $(function(){
            $(".category").on("click", "a", getView);
        });
</script>

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

1 个答案: