如何通过 ajax 调用控制器和 return HTML 在 MVC5 中呈现局部视图

Question

如何使用 AJAX 加载在 html 中渲染的完整局部视图（所以我只设置 div.html）

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

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

我需要知道什么是最好的 plumbing 方法，action 应该是什么类型的 ActionResult return并且如果已经有一个内置的机制可以做到这一点以避免重新发明轮子？

Answer 1

我建议从 NUGET 获取 Westwind.Web.Mvc 库，您可以运行对字符串的任何视图 return 作为 JSON 结果

public JsonResult GetPosts()
{
    string postsHtml = ViewRenderer.RenderPartialView("~/views/yourcontroller/_PostsPartial.cshtml",model);

    return Json(new { html = postsHtml });
}

正如@Guruprasad 在评论中所说，您可以简单地 return 使用 return PartialView(model) 从 MVC 控制器返回局部视图，但是使用 RenderPartialView 可以将其作为可以输出的字符串获取如 JSON 以及任何其他值（如果需要）。如果您选择使用 WebAPI，这将起作用，因为它没有呈现内置视图的能力。

Answer 2

ASP.NET MVC 内置了ajax helper，可以覆盖基本场景。

您需要安装并引用 jquery.unobtrusive-ajax JavaScript 库（+ 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.ActionLink 助手接受 AjaxOptions 参数以进行更多自定义。

在控制器中（比如说HomeController.cs）你应该return 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 按钮时，将加载更多 post。

注 1：您可以实现 OnBegin 函数来实现实际逻辑，以决定接下来要加载哪些 post（例如，获取最后加载的 id post 并将其发送到服务器）。

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

希望这对您有所帮助。如果需要，我可以写一个更完整的例子。

如何通过 ajax 调用控制器和 return HTML 在 MVC5 中呈现局部视图

How to render partial view in MVC5 via ajax call to a controller and return HTML

html

ajax

asp.net-mvc

jquery

asp.net-mvc-partialview