Paging and Sorting in MVC4 Using PagedList

The following is my data table in design mode from which I am showing a record in a MVC 4 application:

table
                                                   Image 1.

  1. CREATE TABLE [dbo].[Employee](  
  2.     [Emp_ID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Name] [varchar](50) NULL,  
  4.     [Email] [varchar](500) NULL,  
  5.     [Designation] [varchar](50) NULL,  
  6.     [City] [varchar](50) NULL,  
  7.     [State] [varchar](50) NULL,  
  8.     [Country] [varchar](50) NULL,  
  9.  CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED   
  10. (  
  11.     [Emp_ID] ASC  
  12. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ONON [PRIMARY]  
  13. ON [PRIMARY]  
  14.   
  15. GO  
The following is my data in my table:

Data in my Table
                                                                        Image 2.

Now create a new MVC 4 application using Visual Studio as in the following:

application
                                                                    Image 3.

Select Internet application.

Now right-click on your project in Solution Explorer then select Manage NuGet Packages.

Manage NuGet Packages
                                                                        Image 4.

uGet Packages
                                                                              Image 5.

Packages
                                                                           Image 6.

Now again right-click on your project in Solution Explorer then click on ADD New ADO.NET Entity Data Model.

Entity Data Model
                                             Image 7.

Model
                                                                              Image 8.

new connection
                                                                          Image 9.

select database
                                                   Image 10.

choose your data connection
                                                                           Image 11.

select table
                                                                        Image 12.

properties
                                         Image 13.

Now add a new Controller Name as Employee as in the following:

Controller
                                                                        Image 14.

Place the following code in Employee Controller:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using PagedList;  
  7.   
  8. namespace pagingNSortingInMVC4.Controllers  
  9. {  
  10.     public class EmployeeController : Controller  
  11.     {  
  12.         //  
  13.         // GET: /Employee/  
  14.   
  15.         EmployeeManagementEntities obj;  
  16.   
  17.         public EmployeeController()  
  18.         {  
  19.             obj = new EmployeeManagementEntities();  
  20.         }  
  21.   
  22.         public ActionResult Index(string sortOrder, string CurrentSort, int? page)  
  23.         {  
  24.             int pageSize = 5;  
  25.             int pageIndex = 1;  
  26.             pageIndex = page.HasValue ? Convert.ToInt32(page) : 1;  
  27.   
  28.             ViewBag.CurrentSort = sortOrder;  
  29.   
  30.             sortOrder = String.IsNullOrEmpty(sortOrder) ? "Emp_ID" : sortOrder;  
  31.   
  32.             IPagedList<Employee> emp = null;  
  33.   
  34.             switch (sortOrder)  
  35.             {  
  36.                 case "Emp_ID":  
  37.                     if (sortOrder.Equals(CurrentSort))  
  38.                         emp = obj.Employee.OrderByDescending  
  39.                                 (m => m.Emp_ID).ToPagedList(pageIndex, pageSize);  
  40.                     else  
  41.                         emp = obj.Employee.OrderBy  
  42.                                 (m => m.Emp_ID).ToPagedList(pageIndex, pageSize);  
  43.                     break;  
  44.                 case "Emp_Name":  
  45.                     if (sortOrder.Equals(CurrentSort))  
  46.                         emp = obj.Employee.OrderByDescending  
  47.                                 (m => m.Name).ToPagedList(pageIndex, pageSize);  
  48.                     else  
  49.                         emp = obj.Employee.OrderBy  
  50.                                 (m => m.Name).ToPagedList(pageIndex, pageSize);  
  51.                     break;  
  52.   
  53.                 case "Email":  
  54.                     if (sortOrder.Equals(CurrentSort))  
  55.                         emp = obj.Employee.OrderByDescending  
  56.                                 (m => m.Email).ToPagedList(pageIndex, pageSize);  
  57.                     else  
  58.                         emp = obj.Employee.OrderBy  
  59.                                 (m => m.Email).ToPagedList(pageIndex, pageSize);  
  60.                     break;  
  61.   
  62.                 case "Designation":  
  63.                     if (sortOrder.Equals(CurrentSort))  
  64.                         emp = obj.Employee.OrderByDescending  
  65.                                 (m => m.Designation).ToPagedList(pageIndex, pageSize);  
  66.                     else  
  67.                         emp = obj.Employee.OrderBy  
  68.                                 (m => m.Designation).ToPagedList(pageIndex, pageSize);  
  69.                     break;  
  70.   
  71.                 case "City":  
  72.                     if (sortOrder.Equals(CurrentSort))  
  73.                         emp = obj.Employee.OrderByDescending  
  74.                                 (m => m.City).ToPagedList(pageIndex, pageSize);  
  75.                     else  
  76.                         emp = obj.Employee.OrderBy  
  77.                                 (m => m.City).ToPagedList(pageIndex, pageSize);  
  78.                     break;  
  79.   
  80.                 case "State":  
  81.                     if (sortOrder.Equals(CurrentSort))  
  82.                         emp = obj.Employee.OrderByDescending  
  83.                                 (m => m.State).ToPagedList(pageIndex, pageSize);  
  84.                     else  
  85.                         emp = obj.Employee.OrderBy  
  86.                                 (m => m.State).ToPagedList(pageIndex, pageSize);  
  87.                     break;  
  88.   
  89.                 case "Country":  
  90.                     if (sortOrder.Equals(CurrentSort))  
  91.                         emp = obj.Employee.OrderByDescending  
  92.                                 (m => m.Country).ToPagedList(pageIndex, pageSize);  
  93.                     else  
  94.                         emp = obj.Employee.OrderBy  
  95.                                 (m => m.Country).ToPagedList(pageIndex, pageSize);  
  96.                     break;  
  97.   
  98.                 case "Default":  
  99.                     emp = obj.Employee.OrderBy  
  100.                             (m => m.Emp_ID).ToPagedList(pageIndex, pageSize);  
  101.                     break;  
  102.             }  
  103.             return View(emp);  
  104.         }  
  105.     }  
  106. }  
Now add a View:

add a View
                                                            Image 15.

Place the following code in Index.cshtml:
  1. @model PagedList.IPagedList<pagingNSortingInMVC4.Employee>  
  2.   
  3. @using PagedList.Mvc;  
  4. @{  
  5.     ViewBag.Title = "Employee List";  
  6.     Layout = "~/Views/Shared/_Layout.cshtml";  
  7. }  
  8.   
  9. <h2>Employee List</h2>  
  10.   
  11. @using (Html.BeginForm())  
  12. {        
  13.     <table>  
  14.         <tr>  
  15.             <th style="border: 2px solid black; text-align: center; width: 12%">  
  16.                 @Html.ActionLink("Employee ID""Index",  
  17.             new { sortOrder = "Emp_ID", CurrentSort = ViewBag.CurrentSort })  
  18.             </th>  
  19.             <th style="border: 2px solid black; text-align: center; width: 25%">  
  20.                 @Html.ActionLink("Employee Name""Index",  
  21.             new { sortOrder = "Emp_Name", CurrentSort = ViewBag.CurrentSort })  
  22.             </th>  
  23.             <th style="border: 2px solid black; text-align: center; width: 15%;">  
  24.                 @Html.ActionLink("Email""Index",  
  25.             new { sortOrder = "Email", CurrentSort = ViewBag.CurrentSort })  
  26.             </th>  
  27.             <th style="border: 2px solid black; text-align: center; width: 10%;">  
  28.                 @Html.ActionLink("Designation""Index",  
  29.             new { sortOrder = "Designation", CurrentSort = ViewBag.CurrentSort })  
  30.             </th>  
  31.             <th style="border: 2px solid black; text-align: center; width: 10%;">  
  32.                 @Html.ActionLink("City""Index",  
  33.             new { sortOrder = "City", CurrentSort = ViewBag.CurrentSort })  
  34.             </th>  
  35.   
  36.             <th style="border: 2px solid black; text-align: center; width: 10%;">  
  37.                 @Html.ActionLink("State""Index",  
  38.             new { sortOrder = "State", CurrentSort = ViewBag.CurrentSort })  
  39.             </th>  
  40.             <th style="border: 2px solid black; text-align: center; width: 10%;">  
  41.                 @Html.ActionLink("Country""Index",  
  42.             new { sortOrder = "Country", CurrentSort = ViewBag.CurrentSort })  
  43.             </th>  
  44.   
  45.         </tr>  
  46.         @foreach (var item in Model)  
  47.         {  
  48.             <tr>  
  49.                 <td style="border: 2px solid black; text-align: center; word-wrap: break-word;">  
  50.                     @Html.DisplayFor(modelItem => item.Emp_ID)  
  51.                 </td>  
  52.                 <td style="border: 2px solid black; text-align: center; word-wrap: break-word;">  
  53.                     @Html.DisplayFor(modelItem => item.Name)  
  54.                 </td>  
  55.                 <td style="border: 2px solid black; text-align: center; word-wrap: break-word;">  
  56.                     @Html.DisplayFor(modelItem => item.Email)  
  57.                 </td>  
  58.                 <td style="border: 2px solid black; text-align: center; word-wrap: break-word;">  
  59.                     @Html.DisplayFor(modelItem => item.Designation)  
  60.                 </td>  
  61.                 <td style="border: 2px solid black; text-align: center; word-wrap: break-word;">  
  62.                     @Html.DisplayFor(modelItem => item.City)  
  63.                 </td>  
  64.                 <td style="border: 2px solid black; text-align: center; word-wrap: break-word;">  
  65.                     @Html.DisplayFor(modelItem => item.State)  
  66.                 </td>  
  67.                 <td style="border: 2px solid black; text-align: center; word-wrap: break-word;">  
  68.                     @Html.DisplayFor(modelItem => item.Country)  
  69.                 </td>  
  70.             </tr>  
  71.         }  
  72.     </table>   
  73.     <br />  
  74.     <div id='Paging' style="text-align: center">  
  75.         Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)  
  76.         of @Model.PageCount  
  77.   
  78.         @Html.PagedListPager(Model, page => Url.Action("Index"new { page }))  
  79.     </div>  
  80. }             
Now run your application as in the following:

Run your Application
                                                                     Image 16.

Now do paging:

Now do paging
                                                                     Image 17.

Now do sorting:

Now do sorting
                                                                           Image 18.

sorting
                                                                        Image 19.

designation
                                                                           Image 20.

Up Next
    Ebook Download
    View all
    Learn
    View all