Introduction
This blog provides code examples to load page data of webgrid in MVC without reloading the page.
Getting Started
Let’s say you have a list of student details and you want to display within webgird in the MVC application. Additionally, you want to provide the pagination feature of webgrid and you want to refresh grid data based on the page click without reloading the whole web page.
View page code for webgridThe blow code contains both HTML and javascript code to support webgird. This webgrid will contain 10 rows on each page. The javascript method GetStudents is used to fetch the list of students from the server and renders the list in webgrid.
@model IEnumerable<StudentModel>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source: Model.Students, canSort: false, canPage: false);
}
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="~/Scripts/ASPSnippets_Pager.min.js"></script>
<script type="text/javascript">
$(function () {<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="~/Scripts/ASPSnippets_Pager.min.js"></script>
<script type="text/javascript">
$(function () {
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: "@Model.PageIndex",
PageSize: "@Model.PageSize",
RecordCount: "@Model.RecordCount"
});
});
$("body").on("click", ".Pager .page", function () {
GetStudents(parseInt($(this).attr('page')));
});
function GetStudents(pageIndex) {
$.ajax({
type: "POST",
url: "/Home/Index",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
};
function OnSuccess(response) {
var model = response;
var row = $("#WebGrid tbody tr:last-child").clone(true);
$("#WebGrid tbody tr").remove();
$.each(model.Studentss, function () {
var student = this;
$("td", row).eq(0).html(student.ID);
$("td", row).eq(1).html(student.Name);
$("td", row).eq(2).html(student.Class);
$("td", row).eq(3).html(student.Phone);
$("td", row).eq(3).html(student.Address);
$("#WebGrid").append(row);
row = $("#WebGrid tbody tr:last-child").clone(true);
});
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: model.PageIndex,
PageSize: model.PageSize,
RecordCount: model.RecordCount
});
};
</script>
</head>
<body>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
columns: webGrid.Columns(
webGrid.Column("ID", "ID"),
webGrid.Column("Name", "Name"),
webGrid.Column("Class", "Class"),
webGrid.Column("Phone", "Phone"),
webGrid.Column("Address", "Address")))
<br/>
<div class="Pager"></div>
</body>
</html>
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View(this.GetStdenuts(1));
}
[HttpPost]
public JsonResult Index(int pageIndex)
{
return View(this.GetStdenuts(pageIndex));
}
private void GetStdenuts(int pageIndex)
{
DBContext datasource = new DBContext();
StudentModel model = new StudentModel();
model.PageIndex = pageIndex;
model.PageSize = 10;
model.RecordCount = datasource.Students.Count();
int startIndex = (pageIndex - 1) * model.PageSize;
model.Stdenuts = (from student in datasource.Students
select student)
.OrderBy(student => student.ID)
.Skip(startIndex)
.Take(model.PageSize).ToList();
return model;
}
}
public class StudentModel
{
public List<Stdenut> Stdenuts { get; set; }
public int PageIndex { get; set; }
public int PageSize { get; set; }
public int RecordCount { get; set; }
}
Summary
I hope this blog helps to work with webgrid in MVC with pagination and you have enjoyed it a lot.
Thanks
Tags
mvc