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


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>
@Html.ActionLink("Create New", "Create")
@Html.DisplayNameFor(model => model.Title)

@foreach (var item in Model) {
@Html.DisplayFor(modelItem => item.Title)

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 () {

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

Enjoy Reading…