Description:
In this example
we explain that how to create paging in GridView in Asp.Net MVC.or how to
implement Paging Functionality in Web Grid in MVC Razor View. Or implement
pagination in MVC controller Razor View using Entity Framework. We already know
that how to implement paging in Asp.Net GridView but here we demonstrate that
how to implement paging functionality in web grid of MVC Razor control.
public class EmployeeModel
{
///<summary>
/// Gets or sets Employees.
///</summary>
public List<Employee> Employees { get; set; }
///<summary>
/// Gets or sets CurrentPageIndex.
///</summary>
public int CurrentPageIndex { get;
set; }
///<summary>
/// Gets or sets PageCount.
///</summary>
public int PageCount { get; set; }
}
Controller:
public class EmployeeController
: Controller
{
public ActionResult Index()
{
return
View(this.GetEmployees(1));
}
[HttpPost]
public ActionResult Index(int
currentPageIndex)
{
return
View(this.GetEmployees(currentPageIndex));
}
private
EmployeeModel GetEmployees(int currentPage)
{
int
maxRows = 10;
using
(NorthwindEntities entities = new NorthwindEntities())
{
EmployeeModel
EmployeeModel = new EmployeeModel();
EmployeeModel.Employees = (from Employee in
entities.Employees
select Employee)
.OrderBy(Employee
=> Employee.EmployeeID)
.Skip((currentPage
- 1) * maxRows)
.Take(maxRows).ToList();
double
pageCount = (double)((decimal)entities.Employees.Count()
/ Convert.ToDecimal(maxRows));
EmployeeModel.PageCount = (int)Math.Ceiling(pageCount);
EmployeeModel.CurrentPageIndex
= currentPage;
return
EmployeeModel;
}
}
}
View:
@model
Grid_Paging_MVC.Models.EmployeeModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>GridView
(Grid) with Paging in ASP.Net MVC</title>
<style type="text/css">
body
{
font-family:
Arial;
font-size:
10pt;
}
table
{
border:
1px solid #ccc;
border-collapse:
collapse;
background-color:
#fff;
}
table
th
{
background-color:
#B8DBFD;
color:
#333;
font-weight:
bold;
}
table
th, table td
{
padding:
5px;
border:
1px solid #ccc;
}
table,
table table
td
{
border:
0px solid #ccc;
}
</style>
</head>
<body>
<div>
@using
(Html.BeginForm("Index", "Employee", FormMethod.Post))
{
<h4>Employees</h4>
<hr/>
<table cellpadding="0" cellspacing="0">
<tr>
<th>EmployeeID</th>
<th>ContactName</th>
<th>City</th>
<th>Country</th>
</tr>
@foreach (Employee Employee in
Model.Employees)
{
<tr>
<td>@Employee.EmployeeID</td>
<td>@Employee.ContactName</td>
<td>@Employee.City</td>
<td>@Employee.Country</td>
</tr>
}
</table>
<br/>
<table cellpadding="0" cellspacing="0">
<tr>
@for (int i = 1; i <=
Model.PageCount; i++)
{
<td>
@if (i !=
Model.CurrentPageIndex)
{
<a href="javascript:PagerClick(@i);">@i</a>
}
else
{
<span>@i</span>
}
</td>
}
</tr>
</table>
<input type="hidden" id="hfCurrentPageIndex" name="currentPageIndex"/>
}
<script type="text/javascript">
function
PagerClick(index) {
document.getElementById("hfCurrentPageIndex").value = index;
document.forms[0].submit();
}
</script>
</div>
</body>
</html>
0 comments:
Post a Comment