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>
<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 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 () {
$('#result').load('/Partial/GetPartialResult');
});
});
</script>
<input type="button" id="btn" value="PartialExample"/>
<div id="result"></div>
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>
<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 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 () {
$('#result').load('/Partial/GetPartialResult');
});
});
</script>
<input type="button" id="btn" value="PartialExample"/>
<div id="result"></div>
Thanks. It was useful
ReplyDeleteUseful to me too!
ReplyDelete