1

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

@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在我的控制器中加载由我的操作生成的部分视图，并将该部分视图附加到适当的div。ProductModel.NamedivResult

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

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

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

更新

这是我认为的Html：

<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>

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

也许看到 HTML 会有所帮助？

4

1 回答 1

2

您可以使用加载函数的第二个参数将数据与加载请求一起传递。检查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

<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>
于 2012-07-18T12:41:46.677 回答