Load Partial View as Html By using jQuery – Ajax in ASP.NET MVC

Introduction

In ASP.NET MVC we can return a Partial View in the form of PartialViewResult using the PartialView method.
The following example shows Partial update scenarios using Ajax.Using jQuery to load the contents of a PartailView in to the current view using an Ajax call. In this example i have load a simple grid using Ajax.
Controller and Action Result

public class PartialController : Controller
{
public ActionResult GetPartialResult()
{
var list = new List<Album>
{
new Album {Title = "Album1"},
new Album {Title = "Album2"},
new Album {Title = "Album3"},
new Album {Title = "Album4"}
};
return PartialView(list);
}

}

public class Album
{
public string Title { get; set; }
}

Right click the ActionResult and Create a PartialView like below
@model IEnumerable<Mvc4Demos.Controllers.Album>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.Title)
</th>
<th></th>
</tr>

@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
</tr>
}
</table>

Here when a button click load the PartialViewResult by using Ajax and Append in to a Result div
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#result').load('/Partial/GetPartialResult');
});
});

</script>
<input type="button" id="btn" value="PartialExample"/>
<div id="result"></div>

Enjoy Reading…