Paging and Sorting in MVC4 Using PagedList

Rahul Kumar Saxena
10y
203.5k
0
4

100

Article

pagingNSortingInMVC4.zip

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

table
Image 1.

CREATE TABLE [dbo].[Employee](
[Emp_ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[Email] [varchar](500) NULL,
[Designation] [varchar](50) NULL,
[City] [varchar](50) NULL,
[State] [varchar](50) NULL,
[Country] [varchar](50) NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
[Emp_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

The following is my data in my table:

Image 2.

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

Image 3.

Select Internet application.

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

Image 4.

Image 5.

Image 6.

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

Image 7.

Image 8.

Image 9.

Image 10.

Image 11.

Image 12.

Image 13.

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

Image 14.

Place the following code in Employee Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PagedList;
namespace pagingNSortingInMVC4.Controllers
{
public class EmployeeController : Controller
{
//
// GET: /Employee/
EmployeeManagementEntities obj;
public EmployeeController()
{
obj = new EmployeeManagementEntities();
}
public ActionResult Index(string sortOrder, string CurrentSort, int? page)
{
int pageSize = 5;
int pageIndex = 1;
pageIndex = page.HasValue ? Convert.ToInt32(page) : 1;
ViewBag.CurrentSort = sortOrder;
sortOrder = String.IsNullOrEmpty(sortOrder) ? "Emp_ID" : sortOrder;
IPagedList<Employee> emp = null;
switch (sortOrder)
{
case "Emp_ID":
if (sortOrder.Equals(CurrentSort))
emp = obj.Employee.OrderByDescending
(m => m.Emp_ID).ToPagedList(pageIndex, pageSize);
else
emp = obj.Employee.OrderBy
(m => m.Emp_ID).ToPagedList(pageIndex, pageSize);
break;
case "Emp_Name":
if (sortOrder.Equals(CurrentSort))
emp = obj.Employee.OrderByDescending
(m => m.Name).ToPagedList(pageIndex, pageSize);
else
emp = obj.Employee.OrderBy
(m => m.Name).ToPagedList(pageIndex, pageSize);
break;
case "Email":
if (sortOrder.Equals(CurrentSort))
emp = obj.Employee.OrderByDescending
(m => m.Email).ToPagedList(pageIndex, pageSize);
else
emp = obj.Employee.OrderBy
(m => m.Email).ToPagedList(pageIndex, pageSize);
break;
case "Designation":
if (sortOrder.Equals(CurrentSort))
emp = obj.Employee.OrderByDescending
(m => m.Designation).ToPagedList(pageIndex, pageSize);
else
emp = obj.Employee.OrderBy
(m => m.Designation).ToPagedList(pageIndex, pageSize);
break;
case "City":
if (sortOrder.Equals(CurrentSort))
emp = obj.Employee.OrderByDescending
(m => m.City).ToPagedList(pageIndex, pageSize);
else
emp = obj.Employee.OrderBy
(m => m.City).ToPagedList(pageIndex, pageSize);
break;
case "State":
if (sortOrder.Equals(CurrentSort))
emp = obj.Employee.OrderByDescending
(m => m.State).ToPagedList(pageIndex, pageSize);
else
emp = obj.Employee.OrderBy
(m => m.State).ToPagedList(pageIndex, pageSize);
break;
case "Country":
if (sortOrder.Equals(CurrentSort))
emp = obj.Employee.OrderByDescending
(m => m.Country).ToPagedList(pageIndex, pageSize);
else
emp = obj.Employee.OrderBy
(m => m.Country).ToPagedList(pageIndex, pageSize);
break;
case "Default":
emp = obj.Employee.OrderBy
(m => m.Emp_ID).ToPagedList(pageIndex, pageSize);
break;
}
return View(emp);
}
}
}

Now add a View:

Image 15.

Place the following code in Index.cshtml:

@model PagedList.IPagedList<pagingNSortingInMVC4.Employee>
@using PagedList.Mvc;
@{
ViewBag.Title = "Employee List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Employee List</h2>
@using (Html.BeginForm())
{
<table>
<tr>
<th style="border: 2px solid black; text-align: center; width: 12%">
@Html.ActionLink("Employee ID", "Index",
new { sortOrder = "Emp_ID", CurrentSort = ViewBag.CurrentSort })
</th>
<th style="border: 2px solid black; text-align: center; width: 25%">
@Html.ActionLink("Employee Name", "Index",
new { sortOrder = "Emp_Name", CurrentSort = ViewBag.CurrentSort })
</th>
<th style="border: 2px solid black; text-align: center; width: 15%;">
@Html.ActionLink("Email", "Index",
new { sortOrder = "Email", CurrentSort = ViewBag.CurrentSort })
</th>
<th style="border: 2px solid black; text-align: center; width: 10%;">
@Html.ActionLink("Designation", "Index",
new { sortOrder = "Designation", CurrentSort = ViewBag.CurrentSort })
</th>
<th style="border: 2px solid black; text-align: center; width: 10%;">
@Html.ActionLink("City", "Index",
new { sortOrder = "City", CurrentSort = ViewBag.CurrentSort })
</th>
<th style="border: 2px solid black; text-align: center; width: 10%;">
@Html.ActionLink("State", "Index",
new { sortOrder = "State", CurrentSort = ViewBag.CurrentSort })
</th>
<th style="border: 2px solid black; text-align: center; width: 10%;">
@Html.ActionLink("Country", "Index",
new { sortOrder = "Country", CurrentSort = ViewBag.CurrentSort })
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td style="border: 2px solid black; text-align: center; word-wrap: break-word;">
@Html.DisplayFor(modelItem => item.Emp_ID)
</td>
<td style="border: 2px solid black; text-align: center; word-wrap: break-word;">
@Html.DisplayFor(modelItem => item.Name)
</td>
<td style="border: 2px solid black; text-align: center; word-wrap: break-word;">
@Html.DisplayFor(modelItem => item.Email)
</td>
<td style="border: 2px solid black; text-align: center; word-wrap: break-word;">
@Html.DisplayFor(modelItem => item.Designation)
</td>
<td style="border: 2px solid black; text-align: center; word-wrap: break-word;">
@Html.DisplayFor(modelItem => item.City)
</td>
<td style="border: 2px solid black; text-align: center; word-wrap: break-word;">
@Html.DisplayFor(modelItem => item.State)
</td>
<td style="border: 2px solid black; text-align: center; word-wrap: break-word;">
@Html.DisplayFor(modelItem => item.Country)
</td>
</tr>
}
</table>
<br />
<div id='Paging' style="text-align: center">
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
of @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
</div>
}