Total Pageviews

Saturday, March 16, 2013

Load Partial View as Partial View Result using 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
        // GET: /Partial/

        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 from another view 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>