如何在通过 Ajax 生成的锚标记内加载局部视图

Question

我有一个带有下拉列表的表单。选择一个选项时，我会调用 ajax 以在视图中动态添加链接列表。当我单击其中一个链接时，我想用 PostListSubCategory() 方法返回的部分视图更新现有页面。

目前，单击其中一个链接会进行重定向并在新页面中显示部分视图。如何更新现有页面？

<script language="javascript" type="text/javascript">
function GetSubCategory(_categoryId) {
    var procemessage = "<a='0'> Please wait...</a>";
    $("#SubCategoryID").html(procemessage).show();
    var url = "/Posts/GetSubCategoryById/";

    $.ajax({
        url: url,
        data: { categoryid: _categoryId },
        cache: false,
        type: "POST",
        success: function (data) {
            var markup = "";
            for (var x = 0; x < data.length; x++) {
                var num = data[x].Text;
                markup += "<a href='/posts/postlistsubcategory?subcategoryid=" + data[x].Text + "'>" + data[x].Text + "</a><br />";
                // markup += "<a href=" + Url.Action("postlistsubcategory", new { subcategoryid = num });
            }
            $("#SubCategoryID").html(markup).show();
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });
    $.ajax({
        url: "/Posts/PostListCategory",
        data: { categoryid: _categoryId },
        cache: false,
        type: "POST",
        success: function (data) {
            $("#postList").html(data).show();                
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });
}
</script>
@using (Html.BeginForm())
{    
@Html.ListBoxFor(m => m.CategoryModel, new SelectList(Model.CategoryModel,       "CategoryId", "Name"), new { @id = "ddlcategory", @style = "width:200px;", @onchange = "javascript:GetSubCategory(this.value);" })
<br />
<br />
<div id="SubCategoryID" name="SubCategoryID" style="width: 200px"></div>

<br /><br />

}

在控制器中

public PartialViewResult PostListSubCategory(string subcategoryid)
    {
        if (subcategoryid == null)
        {
            return PartialView(db.Posts.ToList());
        }
        return PartialView("PostList", db.Posts.Include(i => i.SubCategory).Where(p => p.SubCategory.Name == subcategoryid));
    }

Answer 1

您当前动态生成具有 href 属性的 link，因此单击它们将进行重定向。您需要使用事件委托处理那些 link 的点击事件，然后使用 ajax 更新现有的 DOM。您的代码中还有一些其他不良做法，我建议您使用以下内容

@using (Html.BeginForm())
{
    // no need to override the id attribute and use Unobtrusive Javascript (don't pollute markup with behavior)
    @Html.ListBoxFor(m => m.CategoryModel, new SelectList(Model.CategoryModel,"CategoryId", "Name"))
}
<div id="SubCategoryID"></div> // no point adding a name attribute
<div id="postList"></div>

var subcategories = $('#SubCategoryID');
$('#CategoryModel').change(function() {
    var url = '@Url.Action("GetSubCategoryById", "Posts")'; // don't hard code url's
    var category = $(this).val();
    subcategories.empty(); // clear any existing links
    $.post(url, { categoryid: category }, function(data) { // this could be a GET?
        $.each(data, function(index, item) {
            subcategories.append($('<a></a>').text(item).attr('href','#').addClass('subcategory')); // see note below
        });
    });
});

注意：因为你的ajax只需要一个属性来生成links（显示在link中的值），那么你的GetSubCategoryById() 应该 returning IEnumerable<string> 而不是复杂对象的集合（您当前的代码建议您 returning 其他您从未使用过的数据）。如果确实需要 return 对象集合，则将上面的更改为使用 .text(item.Text)。上面的代码会生成

<a href="#" class="subcategory">.....</a>

对于您的每个项目 return。然后再添加一个额外的脚本来处理link的.click()事件（由于link是动态添加的，需要使用.on()方法进行事件委托）

var posts = $('#postList');
$('#SubCategoryID').on('click', '.subcategory', function() {
    var url = '@Url.Action("postlistsubcategory", "posts")';
    var subcategory = $(this).text();
    posts.load(url, { subcategoryid: subcategory });
});

如何在通过 Ajax 生成的锚标记内加载局部视图

how to load a partial view inside an anchor tag which has been generated via Ajax

ajax

asp.net-ajax

asp.net-mvc-4