如何通过ajax调用MVC5呈现部分视图并返回HTML

How can use AJAX to load a complete partial view rendered in html (so I just set the div.html)

如何使用AJAX加载html中呈现的完整部分视图(因此我只设置div.html)

I need the ajax call to call controller action that will render a complete partial view (red) and append it at the end of the currently loaded one?

我需要调用ajax调用控制器动作来呈现一个完整的部分视图(红色)并在当前加载的视图的末尾添加它?

[I know how to append to DOM and how to make AJAX calls]

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

I need to know what is the best plumbing approach for this, what type of ActionResult should the action return and if there is an already built-in mechanism for this so to avoid reinventing the wheel?

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

2 个解决方案

#1

There is built-in ajax helpers in ASP.NET MVC which can cover the basic scenarios.

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

You need to install and refer jquery.unobtrusive-ajax JavaScript library ( + jQuery dependency). Then in your main view (let's say index.cshtml) put following code:

您需要安装并引用jquery。不显眼的ajax JavaScript库(+ jQuery依赖)。然后在您的主视图(比如index.cshtml)中，输入以下代码:

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>

Note: @Ajax.ActionLink helper accepts AjaxOptions parameter for more customizations.

注意:@Ajax。ActionLink helper接受AjaxOptions参数以进行更多的定制。

In the controller (let's say HomeController.cs) you should return PartialViewResult:

在控制器(假设是HomeController.cs)中，您应该返回PartialViewResult:

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

Finally you define the MorePosts.cshtml partial view:

最后定义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 />
}

And that's it. When some user clicks on Load More button, more posts will be loaded.

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

Note 1: you can implement OnBegin function to implement the actual logic for deciding which are the next posts to load (ex. get the id of the last loaded post and send it to the server).

注意1:您可以实现OnBegin函数来实现决定下一个要加载的post的实际逻辑(例如，获取最后一个加载的post的id并将其发送到服务器)。

Note 2: the same result can be achieved with custom jQuery.ajax calls (without jquery.unobtrusive). The only differences will be the manual ajax calls and click events.

注意2:使用自定义jQuery也可以实现相同的结果。ajax调用(没有jquery.unobtrusive)。惟一的区别是手动ajax调用和单击事件。

Hope this helps. I can write a more complete example if needed.

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

#2

I recommend getting the Westwind.Web.Mvc library from NUGET and you can run any of your views to a string to return back as a JSON result

我推荐你去西风网。来自NUGET的Mvc库，您可以将您的任何视图运行到一个字符串，作为JSON结果返回。

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

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

As @Guruprasad said in the comments, you can simply return back a partial view from an MVC controller using return PartialView(model), but with the RenderPartialView you get it as a string that you can output as JSON along with any other values if required. This will work if you choose to use WebAPI, because it doesn't have the ability to render a view built in.

正如@Guruprasad在评论中所说的，您可以使用return PartialView(model)从MVC控制器返回部分视图，但是使用RenderPartialView，您可以将它作为一个字符串，如果需要，您可以将它与任何其他值一起输出为JSON。如果您选择使用WebAPI，这将是可行的，因为它没有渲染内置视图的能力。

#1