Hi azishan91,
Please refer below sample.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class CustomerModel
{
public List<Data> Datas { get; set; }
public int CurrentPageIndex { get; set; }
public int PageCount { get; set; }
}
public class Data
{
public string CustomerId { get; set; }
public string Name { get; set; }
public int OrderId { get; set; }
public string ShipName { get; set; }
}
Controller
public ActionResult Index()
{
return View(this.GetCustomers(1));
}
[HttpPost]
public ActionResult Index(int currentPageIndex)
{
return View(this.GetCustomers(currentPageIndex));
}
private CustomerModel GetCustomers(int currentPage)
{
int maxRows = 10;
using (NORTHWINDEntities entities = new NORTHWINDEntities())
{
CustomerModel customerModel = new CustomerModel();
customerModel.Datas = (from customer in entities.Customers
join order in entities.Orders
on customer.CustomerID equals order.CustomerID
select new Data
{
CustomerId = customer.CustomerID,
Name = customer.ContactName,
OrderId = order.OrderID,
ShipName = order.ShipName
})
.OrderBy(x => x.CustomerId)
.Skip((currentPage - 1) * maxRows)
.Take(maxRows).ToList();
double pageCount = (double)((decimal)entities.Customers.Count() / Convert.ToDecimal(maxRows));
customerModel.PageCount = (int)Math.Ceiling(pageCount);
customerModel.CurrentPageIndex = currentPage;
return customerModel;
}
}
View
@model MVC.Models.CustomerModel
<div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<h4>Customers</h4>
<hr />
<table cellpadding="0" cellspacing="0">
<tr>
<th>CustomerId</th>
<th>Name</th>
<th>OrderId</th>
<th>ShipName</th>
</tr>
@foreach (var data in Model.Datas)
{
<tr>
<td>@data.CustomerId</td>
<td>@data.Name</td>
<td>@data.OrderId</td>
<td>@data.ShipName</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>
Screenshot
