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:


                                                   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>
}

Now run your application as in the following:


                                                                     Image 16.

Now do paging:


                                                                     Image 17.

Now do sorting:


                                                                           Image 18.


                                                                        Image 19.


                                                                           Image 20.