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


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

如何使用Ajax加载以HTML呈现的完整部分视图(所以我只设置了div.html)

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

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

我需要知道什么是最好的管道方法，操作应该返回什么类型的操作结果，如果有一个内置的机制来避免重新发明轮子？

enter image description here

相关讨论

ASP.NET MVC中有内置的Ajax帮助程序，可以涵盖基本场景。

您需要安装并引用jquery.unobtrusive-ajaxjavascript库(+jquery依赖项)。然后在主视图(比如index.cshtml)中输入以下代码：

索引文件

1
2
3
4
5
6
7
@Ajax.ActionLink("Load More Posts","MorePosts", new AjaxOptions()
{
    HttpMethod ="GET",
    AllowCache = false,
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId ="posts-wrapper"
})

注：@Ajax.ActionLink助手接受AjaxOptions参数进行更多的自定义。

在控制器(比如homecontroller.cs)中，您应该返回PartialViewResult：

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

最后定义moreposts.cshtml部分视图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@model IEnumerable<Post>

@{
    Layout = null;
}

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

就是这样。当一些用户点击Load More按钮时，将加载更多的文章。

注1：您可以实现OnBegin功能来实现决定下一个要加载的日志的实际逻辑(例如，获取上一个加载日志的ID并将其发送到服务器)。

注2：使用自定义jQuery.ajax调用(不使用jquery.unobtrusive)可以获得相同的结果。唯一的区别是手动Ajax调用和单击事件。

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

相关讨论

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

1
2
3
4
5
6
public JsonResult GetPosts()
{
    string postsHtml = ViewRenderer.RenderPartialView("~/views/yourcontroller/_PostsPartial.cshtml",model);

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

正如@guruprasad在评论中所说，您可以使用return PartialView(model)从MVC控制器返回部分视图，但使用renderpartialview，您可以将其作为字符串输出，并在需要时将其与任何其他值一起输出为json。如果您选择使用WebAPI，这将有效，因为它不具备呈现内置视图的能力。

相关讨论