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

Question

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

我需要ajax调用来调用控制器动作,它将呈现一个完整的局部视图(红色)并将其附加到当前加载的视图的末尾？

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

我需要知道什么是最好的管道方法,操作返回什么类型的ActionResult,如果有一个已经内置的机制,以避免重新发明轮子？

Answer 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调用和单击事件.

希望这可以帮助.如果需要,我可以写一个更完整的例子.