صفحه بندی و مرتب سازی در 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
- 3k بازدید
- 6 تشکر