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

【问题标题】：How to render partial view in MVC5 via ajax call to a controller and return HTML如何通过对控制器的 ajax 调用在 MVC5 中呈现部分视图并返回 HTML
【发布时间】：2015-09-16 13:39:14
【问题描述】：

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

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

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

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

【问题讨论】：

return Partialview("_PartialViewName) 并使用$.load 调用控制器方法返回partialview
从 ajax 调用的控制器操作中将 partialView 作为 ActionResult 返回？是否会返回呈现的 HTML，以便我可以将其放入 div 中？
你不需要ajax，只需使用$.load
好的，谢谢，我需要研究如何使用 $.load。谢谢+1
@Guruprasad Rao 建议使用 $(selector).load(URL,data,callback);是迄今为止最好的解决方案。

标签： jquery html ajax asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

在 ASP.NET MVC 中有内置的 ajax 助手，可以覆盖基本场景。

您需要安装并引用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 helper 接受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 调用和点击事件。

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

【讨论】：

在进行 AJAX 调用时，我使用了一种更加手动的方法，使用完整的 $.ajax 来跟踪错误。谢谢
@Viktor 您能否指导我们如何使用我们将在主视图上获得的参数自动而不是手动进行此调用。

【解决方案2】：

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

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

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

正如@Guruprasad 在 cmets 中所说，您可以简单地使用 return PartialView(model) 从 MVC 控制器返回部分视图，但是使用 RenderPartialView 您可以将其作为字符串输出，您可以将其作为 JSON 以及任何其他值输出，如果必需的。如果您选择使用 WebAPI，这将起作用，因为它无法呈现内置视图。

【讨论】：

您可以将整个 html 渲染粘贴到 JSON 属性中吗？这很方便。 ViewRenderer.RenderPartialView 也很方便。谢谢，我会检查它是否适合我。
@InvisiblePanda 你读过这篇文章吗？它不像 PartialView() 那样渲染它，这会将视图渲染成一个字符串。
如果您使用的是 WebAPI，您可能不应该返回 HTML。
@freedomn-m 我非常不同意这种说法
对不起，如果我看起来有点困惑，我已经喝了几杯啤酒！我要说明的一点是，业务逻辑或视图“逻辑”都不应该驻留在 WebAPI 中，我没有说过它应该驻留在 WebAPI 中。我只是提供了一种从 WebAPI 中呈现视图的方法。视图仍然是视图，生成的模型仍然可以来自可以在 MVC 控制器和 WebAPI 控制器之间共享的业务逻辑层。