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

Question

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?

Answer 1

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.