صفحه بندی و مرتب سازی در MVC

در این مقاله می خواهیم نحوه صفحه بندی و مرتب سازی را در mvc با استفاده از PagedList پیاده سازی کنیم

صفحه بندی و مرتب سازی  در MVC

ابتدا در پایگاه داده خود یک جدول به شکل زیر میسازیم:

اسکریپت ساخت جدول را در زیر مشاهده خواهید کرد:

    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  

سپس برای صفحه بندی مقداری داده در جدول درج میکنیم:

حال یک پروژه جدید از نوع MVC ایجاد کنید:

 

در پنجره Solution Explorer روی پرو] خود کلیک راست کنید و Manage Nuget Packages  را انتخاب کنید و در سمت راست PagedList را جستجو کنید و سپس آنرا نصب کنید:

اگر package درست روی پروژه شما نصب شود تیک سبز رنگی کنار آن نمایان میشود:


حال باید یک مدل به پروژه خود اضافه کنید روی نام پروژه کلیک راست کرده و از منوی ظاهر شده گزینه ADD و سپس New ADO.NEt Entity data Model را انتخاب کنید که پنجره زیر نمایان می شود:

در این پنجره روی New Connection کلیک کنید تا پنجره Connection Properties ظاهر شود.

در این پنجره تنظیمات اتصال را انجام داده وپایگاه داده خود را انتخاب مینماییم و روی دکمه ok  کلیک میکنیم:

در این پنجره تیک ...save در پایین پنجره به این معنا میباشد که اگر تیک بزند رشته اتصال شما رادر فایل Web.Config ذخیره میکند:

در این پنجره میتوانیم جدول خود را انتخاب کنیم و تیک گزینه ...Pluralize را بردارید این گزینه به این معنی می باشد که به صورت خودکاربرای نام جداول قوانین جمع و مفرد بودن  را رعایت نماید مثلا اسم جمع جدول Person به People  تبدیل میشودپس از انتخاب جدول خود رو گزینه Finish کلیک کنید :

همانطور که مشاهده کردید به صورت تصویری همراه با توضیحات لازم مدل خود را ساختیم حالا نیاز به ساخت Controller داریم پس روی پوشه Controllers کلیک راست کرده وگزینه Add و سپس Controller را انتخاب کنید و در پنجره ظاهر شده MVC Controller - Empty را انتخاب کرده و نام Employee را وارد نمایید:

 

 دربالای صفحه فضای نام  pagedList را به پروژه خود اضافه میکنیم:

using PagedList; 

ابتدا در کنترلر ایجاد شده یک شی از مدل خود میسازیم سپس یک Constructor (سازنده) میسازیم و شی ساخته شده از مدل را New میکنیم:

     EmployeeManagementEntities obj;  
  
        public EmployeeController()  
        {  
            obj = new EmployeeManagementEntities();  
        }  

یک متد به نام Index مینویسیم که عمل مرتب سازی و صفحه بندی را در این متد انجام میدهیم تعداد افرادی که در هر صفحه نشان خواهیم داد را در متغیر PageSize تعیین میکنیم و شماره صفحه را در متغیر Page:

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

در تابع خود کلیک راست کرده و گزینه Add View را انتخاب کنید:

در ویو خود برای نمایش اطلاعات یک جدول ایجاد میکنیم و در پایین ویو بعد از جدول خود از PagedListPager برای صفحه بندی و فرستادن شماره صفحه  به متد index استفاده شده است:

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

حالا میتونید برنامه خود را اجرا کنید:

 مرتب سازی نیز به شکل زیر انجام میشود:

 

فایل های ضمیمه