In this article I will explain with an example, how to use Linq Skip and Take functions for implementing Paging (Pagination) with Entity Framework in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 

Entity Framework Model

Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
Note: For more details on using Entity Framework in ASP.Net MVC, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example.
 
ASP.Net MVC: LINQ Skip and Take Paging with Entity Framework
 
 

Model

The Model class consists of three properties.
1. Customers – List collection of the Customer Entity Data Model which will hold the records of the Customers.
2. CurrentPageIndex – Holds the value of the index of the Current Page.
3. PageCount – This value is calculated using the Maximum Rows to be displayed and the Total Records present in the Table.
public class CustomerModel
{
    ///<summary>
    /// Gets or sets Customers.
    ///</summary>
    public List<Customer> Customers { get; set; }
 
    ///<summary>
    /// Gets or sets CurrentPageIndex.
    ///</summary>
    public int CurrentPageIndex { get; set; }
 
    ///<summary>
    /// Gets or sets PageCount.
    ///</summary>
    public int PageCount { get; set; }
}
 
 

Namespaces

You will need to import the following namespace.
using system.Linq;
 
 

Controller

The Controller consists of following Action methods.

Action Method for handling GET operation

Inside this Action method, the GetCustomers method (explained later) 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 and it is returned to View.
 

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.
Note: The maxRows value can be changed as per requirement, and its value can be fetched from AppSettings also, so that you don’t have to modify the code every time.
 
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 Generic List collection of Customer class which is a property present inside the CustomerModel class.
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 Hidden Field element and is passed to the GetCustomers method (explained earlier) and fetched records are returned to the View.
public class HomeController : Controller
{
    // GET: Home
    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.Customers = (from customer in entities.Customers
                                       select customer)
                                       .OrderBy(customer => customer.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

HTML Markup

Inside the View, in the very first line the CustomerModel class is declared as Model for the View.
The View consist of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
 

Displaying the Records

For displaying the records, an HTML Table is used. A FOR EACH loop will be executed over the Customers property of the CustomerModel class which will generate the HTML Table rows with the Customer records.
 

Implementing Pager

For building the Pager, a FOR loop is executed over the PageCount property of the Model and an HTML Table is generated with HTML Anchor elements.
The HTML Anchor is assigned a JavaScript PagerClick function in the HREF attribute. When the HTML Anchor is clicked JavaScript PagerClick function is executed.
Also, there is an HTML Hidden Field element inside the form.
Inside the PagerClick JavaScript function, the Index of the clicked Pager Button is set into the Hidden Field and the form is submitted.
@model Grid_Paging_MVC.Models.CustomerModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <h4>Customers</h4>
        <hr />
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Customer Id</th>
                <th>ContactName</th>
                <th>City</th>
                <th>Country</th>
            </tr>
            @foreach (Customer customer in Model.Customers)
            {
                <tr>
                    <td>@customer.CustomerID</td>
                    <td>@customer.ContactName</td>
                    <td>@customer.City</td>
                    <td>@customer.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>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: LINQ Skip and Take Paging with Entity Framework
 
 

Downloads

Download Code


Other available versions