صفحه بندی و مرتب سازی در MVC
سه شنبه 5 اسفند 1393در این مقاله می خواهیم نحوه صفحه بندی و مرتب سازی را در mvc با استفاده از PagedList پیاده سازی کنیم
ابتدا در پایگاه داده خود یک جدول به شکل زیر میسازیم:

اسکریپت ساخت جدول را در زیر مشاهده خواهید کرد:
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>
}
حالا میتونید برنامه خود را اجرا کنید:


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



- C#.net
- 4k بازدید
- 6 تشکر