如何在MVC5中通过ajax调用渲染局部视图并返回HTML [英] How to render partial view in MVC5 via ajax call to a controller and return HTML

问题描述

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

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

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

我需要知道对此是最好的管道方法，动作返回的是什么类型的ActionResult ，如果已有内置机制，如此避免重新发明轮子？

解决方案

在ASP.NET MVC中可以覆盖基本场景的ajax帮助器中。

您需要安装并引用 jquery.unobtrusive-ajax JavaScript库（+ jQuery依赖项）。然后在您的主视图（比如index.cshtml）中输入以下代码：
$ b Index.cshtml

  @ Ajax.ActionLink（Load More Posts，MorePosts，new AjaxOptions（）
 {
 HttpMethod =GET，
 AllowCache = false，
 InsertionMode = InsertionMode.InsertAfter，
 UpdateTargetId =posts-wrapper
}）
 
< div id =posts-包装>< / DIV> 
  

注意： @ Ajax.ActionLink code> helper接受 AjaxOptions 参数进行更多定制。

在控制器中（比如 HomeController.cs ），您应该返回 PartialViewResult ：
$ b

  public ActionResult MorePosts（int？offset，int？count）
 {
 IEnumerable< Post> posts = myService.GetNextPosts（offset，count）; 
返回PartialView（文章）; 
} 
  

最后，您定义 MorePosts.cshtml 部分视图：

  @model IEnumerable< Post> 
 
 @ {
 Layout = null; 
} 
 
 @foreach（模型中的var post）
 {
< div class =post> 
< div>> @ post.Prop1< / div> 
< div> @ post.Prop2< / div> 
< / div> 
< hr /> 
} 
  

就是这样。当一些用户点击加载更多按钮时，将加载更多帖子。

注1 ：你可以实现 OnBegin 函数来实现确定下一个要加载的帖子的实际逻辑（例如获取最后加载的帖子的ID并发送给注意2 ：使用自定义 jQuery.ajax 调用（没有jquery.unobtrusive）。唯一的区别是手动的ajax调用和点击事件。

---

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

How can use AJAX to load a complete partial view rendered in html (so I just set the 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?

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

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?

解决方案

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

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:

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.

In the controller (let's say HomeController.cs) you should return 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:

@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.

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).

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.

---

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

这篇关于如何在MVC5中通过ajax调用渲染局部视图并返回HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！