In this article I will explain with an example, how to implement LINQ Skip and Take Paging with Entity Framework in MVC6 Grid in ASP.Net Core MVC.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Model
The Model class consists of following properties.
public class Customer
{
[Key]
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
public class CustomerModel
{
public List<Customer> Customers{ get; set; }
public int CurrentPageIndex { get; set; }
public int PageCount { get; set; }
}
Database Context
Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
using Microsoft.EntityFrameworkCore;
namespace Linq_Skip_Take_MVC6Grid_Core_MVC
{
public class DBCtx :DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<Customer> Customers { get; set; }
}
}
Controller
The Controller consists of following Action methods.
Action Method for handling GET operation
Inside this Action method, the GetCustomers method is called with the currentPage parameter value passed as 1, as when the View is accessed for the first time the records of the first page will be displayed.
Finally, the View is returned.
GetCustomers method
The GetCustomers method accepts currentPage parameter. It has a fixed variable named maxRows which determines the maximum records to be displayed per page.
Inside the GetCustomers method, first an object of the CustomerModel class is created and then the records are fetched from the Customers table using Entity Framework and are set to the Customers property of the CustomerModel object.
The PageCount value is calculated by dividing the count of the records by the maximum rows to be displayed.
The currentPage parameter value is assigned to the CurrentPageIndex property.
The Paging is performed on the records using the Skip and Take functions.
Skip function
The Skip function accepts the Start Index from the set of records to fetched i.e. if Page Index is 1 then the Start Index will be ( 1 - 1) * 10 = 0.
Example: If Current Page Index is 1 and the Maximum Rows is 10, then the Start Index will be (1 - 1) * 10 = 0
Take function
The Take function will fetch the rows based on the value of the maxRows variable.
Action Method for handling POST operation
Inside this Action method, the value of the CurrentPageIndex is fetched from the Request.Form collection and is passed to the GetCustomers method and the View is returned.
public class HomeController : Controller
{
private DBCtx Context { get; set; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View(this.GetCustomers(1));
}
[HttpPost]
public IActionResult Index(int currentPageIndex)
{
return View(this.GetCustomers(currentPageIndex));
}
private CustomerModel GetCustomers(int currentPage)
{
int maxRows = 10;
CustomerModel customerModel = new CustomerModel();
customerModel.Customers = (from customer in this.Context.Customers
select customer)
.OrderBy(customer => customer.CustomerID)
.Skip((currentPage - 1) * maxRows)
.Take(maxRows).ToList();
double pageCount = (double)((decimal)this.Context.Customers.Count() / Convert.ToDecimal(maxRows));
customerModel.PageCount = (int)Math.Ceiling(pageCount);
customerModel.CurrentPageIndex = currentPage;
return customerModel;
}
}
View
Inside the View, in the very first line the CustomerModel class is declared as model for the View.
Then, NonFactors.Mvc.Grid namespace is inherited inside the View.
Next, the style sheet and the scripts of MVC6 Grid are included in the page.
The View consists of an HTML Form which has been created using the following TagHelpers attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Displaying the records
The IEnumerable collection of CustomerModel class object is passed to the Grid function of the MVC6 Grid HTML Helper class.
There is a column added to the MVC6 WebGrid columns collection. The column is created using RenderedAs function and anchor link is added to it using Html.Raw function.
Implementing Pager
For building the Pager, a loop is executed over the PageCount property and an HTML Table is generated with HTML Anchor.
The HTML Anchor is assigned a JavaScript function named PagerClick in the HREF attribute. When the HTML Anchor is clicked PagerClick JavaScript function is executed.
Also, there is an HTML HiddenField element inside the form.
Inside the PagerClick JavaScript function, the Index of the clicked Pager button is set into the HiddenField and then the form is submitted.
@model Linq_Skip_Take_MVC6Grid_Core_MVC.Models.CustomerModel
@using NonFactors.Mvc.Grid
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet" />
</head>
<body>
@(Html.Grid(Model.Customers).Build(columns =>
{
columns.Add(model => model.CustomerID).Titled("Customer ID");
columns.Add(model => model.ContactName).Titled("Customer Name");
columns.Add(model => model.City).Titled("City");
columns.Add(model => model.Country).Titled("Country");
}))
<br />
<form method="post" asp-controller="Home" asp-action="Index">
<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" />
</form>
<script type="text/javascript">
function PagerClick(index) {
document.getElementById("hfCurrentPageIndex").value = index;
document.forms[0].submit();
}
</script>
</body>
</html>
Screenshot
![ASP.Net Core: Linq Skip and Take Paging in MVC6 Grid]()
Downloads
