如何通过对控制器的Ajax调用在MVC5中呈现部分视图并返回HTML

小编典典

如何通过对控制器的Ajax调用在MVC5中呈现部分视图并返回HTML

ajax

如何使用AJAX加载以html呈现的完整局部视图（所以我只设置了div.html）

我需要ajax调用来调用控制器操作，该操作将呈现完整的局部视图（红色）并将其附加到当前加载的视图的末尾吗？

[我知道如何附加到DOM以及如何进行AJAX调用]

我需要知道什么是最好的管道方法，该 动作应该返回哪种类型的ActionResult， 以及 是否已经有内置的机制
以避免重新发明轮子？

阅读 402

2020-07-26

共1个答案

小编典典

ASP.NET MVC中有内置的Ajax帮助器，可以覆盖基本方案。

您需要安装和引用jquery.unobtrusive-ajaxJavaScript库（+
jQuery依赖关系）。然后在您的主视图中（假设为index.cshtml）放入以下代码：

Index.cshtml

@Ajax.ActionLink("Load More Posts", "MorePosts", new AjaxOptions()
{
    HttpMethod = "GET",
    AllowCache = false,
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "posts-wrapper"
})

<div id="posts-wrapper"></div>

注意：@Ajax.ActionLinkhelper接受AjaxOptions参数以进行更多定制。

在控制器中（假设为 HomeController.cs ），您应该返回PartialViewResult：

public ActionResult MorePosts(int? offset, int? count)
{
    IEnumerable<Post> posts = myService.GetNextPosts(offset, count); 
    return PartialView(posts);
}

最后，您定义 MorePosts.cshtml 部分视图：

@model IEnumerable<Post>

@{
    Layout = null;
}

@foreach (var post in Model)
{
    <div class="post">
        <div>>@post.Prop1</div>
        <div>@post.Prop2</div>
    </div>
    <hr />
}

就是这样。当某些用户单击Load More按钮时，将加载更多帖子。

注意1 ：您可以实施OnBegin函数，以实现确定哪些逻辑要加载的实际逻辑的功能（例如，获取最后加载的逻辑的ID并将其发送到服务器）。

注意2
：使用自定义jQuery.ajax调用（无需jquery.unobtrusive）可以实现相同的结果。唯一的区别是手动ajax调用和click事件。

希望这可以帮助。如果需要，我可以写一个更完整的示例。

2020-07-26