صفحه بندی در MVC

2/3/2016 MVC
3977

تعداد زیاد رکورد ها باعث میشود تمامی آنها در یک صفحه نمایش داده شوند ، , در صورتی که تعداد آنها زیاد باشند کاربر و یا مراجعه کننده از سایت شما را گیج میکند و نمیتواند مطلب مورد نظر را بیابد. بهترین راه استفاده از صفحه بندی در نمایش رکورد ها هست ، میتوان از روشهای مختلفی استفاده کرد. از Jquery و یا Grid  که در خود MVC  به صورت توکار وجود دارد، اما مینوان از PagedList.MVC  نیز استفاده کرد، که در مثالهای خود سایت asp.net/mvc  نیز از آن استفاده شده است

برای استفاده از pagedList در MVC ابتدا باید از طریق nuget  این افزونه را اضافه کرد 

PM>Install-Package PagedList.Mvc

سپس تغییراتی را در اکشن Index  به این صورت داد :

 public ActionResult Index(int? page)
        {
            int itemPerPage = 10;
            int pageNumber = page ?? 1;
            var post = db.DevPosts.Where(x => x.Active);

            return View(post.ToPagedList(pageNumber,itemPerPage));
        }

 

البته لازم است در بالای صفحه کد زیر را اضافه کنید تا امکان استفاده از TopagedList  باشد

using PagedList;

 

در View که قرار است صفحه بندی شود در اینجه با توجه به اینکه در ActionResult مربوط به Index تغییرات را اعمال کردیم  باید چند کار کوچک انجام داد ،

میتوانید کد زیر را کپی کنید و در پایان صفححه جایی که میخواهید شماره صفحات نمایش داده شود بگذارید

    صفحه @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) از @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))

و در بالای View  نیز این کدها را  اضافه نمایید.

@model PagedList.IPagedList<Devex.Models.DevPost>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

در کد بالا به جای DevEx  نام پروژه خود را بنویسید.

اگر در کدخود با این خطا مواجهه شدید :

Server Error in '/' Application.

The method 'Skip' is only supported for sorted input in LINQ to Entities. The method 'OrderBy' must be called before the method 'Skip'.

حتما از OrderByDescending در کوئری که با linq  مینویسید استفاده کنید مثل 

 var post = db.DevPosts.Where(x => x.Active).OrderByDescending(x=>x.CreateDate);

مطلب تکمیلی اینکه در صفحه view برای نمایش سر ستونها از 

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.BlogType.TypeName)
        </th>
</tr>
</table>

که باید از کد زیر استفاده کرد

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FirstOrDefault().BlogType.TypeName)
        </th>
</tr>
</table>