jquery – 如何通过ajax调用控件并返回HTML来在MVC5中呈现局部视图

如何使用 AJAX加载 HTML中渲染的完整部分视图(所以我只是设置了div.html)

我需要ajax调用来调用控制器操作,这将使得完整的部分视图(红色)并将其附加到当前加载的操作的结尾？

[我知道如何附加到DOM和如何使AJAX调用]

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

解决方法

在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帮助程序接受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 />
}

就是这样当一些用户单击“加载更多”按钮时,将会加载更多的帖子.

注1：您可以实现OnBegin函数来实现实际的逻辑,以确定哪些是下一个加载的帖子(例如,获取上次加载的帖子的ID并将其发送到服务器).

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

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