jQuery引用通过局部视图生成的div追加另一个局部视图 [英] jQuery referencing a div generated with a partial view to append another partial view

问题描述

我在页面上多次渲染了该局部视图:

I have this partial view rendered multiple times on a page:

@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链接时，它将使用类别值Model.Name在我的Product控制器中加载由我的ProductList动作生成的部分视图，并将该部分视图附加到适当的位置divResult div.

The idea is that when someone clicks the Get Partial View link, it will load the partial view generated by my ProductList action in my Product controller using the category value Model.Name and append that partial view to the appropriate divResult div.

问题在于，页面加载后，如果用户单击任何GetPartialView链接，它将加载最终类别中包含的产品列表，并将它们附加到最顶部的divResult div中.

The problem is that after the page has loaded, if a user clicks on any of the GetPartialView links, it loads the list of products contained within the final category and appends them to the top-most divResult div.

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

I am hoping for a bit of guidance in changing the script to use jQuery to appropriately load the information. I also feel that I should not be repeating the script every time this partial view is loaded. . . So how would I write the appropriate jQuery script that would do the following when the user clicks one of the Get Partial View links:

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

• get the id of the parent div of the link (@ModelName)
• use that id to make a call to my Action: @Url.Action("ProductList", "Product", new {category = **that id**})";
• append the partial view returned by that Action to a div with the id of divResult that is within the parent div we found two steps above this step

更新

在我看来这是HTML:

Here is the Html from my view:

<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");，我会得到undefined.

If I manually pass the value of Balls to categoryName - I can receive products from the Balls category, but if I use var categoryName = $(this).closest(".category").attr("id"); I get undefined.

也许看到HTML会有所帮助?

Maybe seeing the HTML will help?

推荐答案

您可以使用load函数的第二个参数将数据与load请求一起传递.检查 http://api.jquery.com/load/

You can use the second parameter of the load function to pass data along with the load request. Check http://api.jquery.com/load/

将getView函数更改如下:

Change the getView function to as follows:

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

Update: Same ID cannot be used for multiple elements on a page. And since you are loading the partial view mutliple times and appending you would end with multiple elements having same ID. Change your partial view to as follows(use class instead of 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函数移至父视图:

and move the getView function to the parent view:

<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追加另一个局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！