Постраничный вывод

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Пагинация или постраничный вывод позволяет разбить набор объектов на несколько страниц и установить ссылки на упрощенного доступа к конкретным страницам. В ASP.NET MVC пагинацию сделать очень легко. Можно, конечно, самим попробовать определить логику постраничного вывода. Однако мы можем упростить себе работу, воспользовавшись имеющимися плагинами. Один из таких плагинов представляет пакет PagedList.Mvc.

Итак, добавим этот пакет в проект ASP.NET MVC 5:

Постраничный вывод в ASP.NET MVC

После установки в проект в узел References будут добавлены две новые библиотеки PagedList и PagedList.Mvc. Кроме того, в узел Content будет добавлен файл стилей PagedList.css, который будет использоваться при создании постраничного вывода.

Для постраничного вывода будут выводиться объекты простенькой модели Phone:

public class Phone
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Теперь передадим список моделей для постраничного вывода из контроллера в представление:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PagingApp.Models;
using PagedList.Mvc;
using PagedList;

namespace PagingApp.Controllers
{
    public class HomeController : Controller
    {
        List<Phone> phones;
        public HomeController()
        {
            phones = new List<Phone>();
            phones.Add(new Phone { Id = 1, Name = "Samsung Galaxi" });
            phones.Add(new Phone { Id = 2, Name = "Samsung Galaxi II" });
            phones.Add(new Phone { Id = 3, Name = "Samsung Galaxi II" });
            phones.Add(new Phone { Id = 4, Name = "Samsung ACE" });
            phones.Add(new Phone { Id = 5, Name = "Samsung ACE II" });
            phones.Add(new Phone { Id = 6, Name = "HTC One S" });
            phones.Add(new Phone { Id = 7, Name = "HTC One X" });
            phones.Add(new Phone { Id = 8, Name = "Nokia N9" });
        }
        public ActionResult Index(int? page)
        {
            int pageSize = 3;
            int pageNumber = (page ?? 1);
            return View(phones.ToPagedList(pageNumber, pageSize));
        }
    }
}

Дя упрощения примера я создаю обычный список моделей в конструкторе констроллера.

Чтобы воспользоваться функциональностью пагинации, надо подключить к классу пространства имен PagedList.Mvc и PagedList.

В представление же передается пагинированный список в виде объекта IPagedList<T>, который создается с помощью метода расширения ToPagedList(). Этот метод принимает два параметра: номер страницы и число объектов на страницу. Здесь номер страницы передается в виде параметра метода, а если его нет (то есть он имеет значение null), то используется первая страница. А в качестве количества объектов на страницу используется число 3.

Пагинированный список представляет обычный список с теми же методами, только добавляются несколько дополнительных свойств, например, PageNumber (номер страницы), PageCount (количество страниц), PageSize (максимальное количество объектов на странице) и ряд других.

А представление Index.cshtml будет выглядеть следующим образом:

@model PagedList.IPagedList<PagingApp.Models.Phone>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
@{
    ViewBag.Title = "Index";
}

<h2>Список телефонов</h2>

<table class="table">
    <tr>
        <th>Название</th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
    </tr>
}

</table>
<br />
Страница @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) из @Model.PageCount

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

Для стилизации ссылок пагинации в начале представления подключается файл стилей PagedList.css. Для самой пагинации и создания ссылок используется хелпер Html.PagedListPager().

В итоге хелпре пагинации образует нам ряд ссылок:

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850