學習ASP.NET Core Razor 編程系列十九——分頁

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RazorMvcBooks.Models;
using Microsoft.AspNetCore.Mvc.Rendering;
using X.PagedList; 

namespace RazorMvcBooks.Pages.Books
{
    public class IndexModel : PageModel
    {
        private readonly RazorMvcBooks.Models.BookContext _context; 

        public IndexModel(RazorMvcBooks.Models.BookContext context)
        {
            _context = context;
        }
 

        public List<Book> Books;
        public SelectList Publishs;
        public string Publish { get; set; }
        public string NameSort { get; set; }
        public string DateSort { get; set; }
        public string CurrentFilter { get; set; }
        public string CurrentSort { get; set; } 

        public X.PagedList.IPagedList<Book> Book { get;set; } 

        public async Task OnGetAsync(string publish, string searchString,string sortOrder,int? pageIndex)
        {

            ViewData["CurrentSort"] = sortOrder;
            Publish = publish;
            int pageSize = 5;
            ViewData["SearchString"] = searchString;
            var page = pageIndex ?? 1; 

            //查詢
            IQueryable<string> PublishingQuery = from m in _context.Book
                                             orderby m.Publishing
                                             select m.Publishing;
 
            var books = from m in _context.Book
                         select m;
 

            if (!String.IsNullOrEmpty(searchString))
            {
                books = books.Where(s => s.Name.Contains(searchString));
            } 

            if (!String.IsNullOrEmpty(publish))
            {
                books = books.Where(x => x.Publishing == publish);
            }
            Publishs = new SelectList(await PublishingQuery.Distinct().ToListAsync()); 

            //排序
            NameSort = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
            DateSort = sortOrder == "Date" ? "date_desc" : "Date"; 

            ViewData["NameSortParm"] = NameSort;
            ViewData["DateSortParm"] = DateSort; 
 

            switch (sortOrder)
            {

                case "name_desc":
                    books = books.OrderByDescending(s => s.Name);
                    break;

                case "Date":
                    books = books.OrderBy(s => s.ReleaseDate);
                    break;

                case "date_desc":
                    books = books.OrderByDescending(s => s.ReleaseDate);

                    break;

                default:
                    books = books.OrderBy(s => s.Name);
                    break;

            }

            Book = await books.AsNoTracking().ToPagedListAsync(page, pageSize);
            //將分頁結果放入ViewData供View使用
            ViewData["books"] = Book; 

        }
    }
}

代碼中將總頁數參數、當前的排序順序參數和當前的篩選器參數添加到方法簽名中。

public async Task OnGetAsync(string publish, string searchString,string sortOrder,int? pageIndex)

第一次顯示頁面，或若是用戶未單擊分頁或排序連接，則全部參數都爲null。若是單擊分頁連接，頁面變量將包含要顯示的頁碼。

名爲 CurrentSort 的ViewData元素提供了當前已排序的試圖，由於這必須包含在分頁連接中以保持排序順序在分頁時相同。

名爲 searchString的ViewData元素提供了當前已篩選的視圖。爲了在分頁過程當中維護篩選規則以及在頁面從新顯示的時候把篩選值恢復到文本框中，該值必定要被包含進分頁連接裏

若是分頁期間更改搜索字符串，顯示的頁會被重置爲 1，由於新的篩選器可能會致使顯示不一樣的數據。在文本框中輸入了值以及按下提交按鈕搜索字符串就會改變。在這種狀況下，searchString參數不爲 null。

在OnGetAsync方法的結尾，ToPagedListAsync方法將書籍查詢結果轉換爲支持分頁的集合類型，集合中包含了恰好能放進單頁的書籍實體。而後將這個單頁大小的書籍集合傳遞給視圖。

Book = await books.AsNoTracking().ToPagedListAsync(page, pageSize);

代碼中的ToPagedListAsync方法得到頁面數和當前頁碼，並對IQueryable執行語句。當IQueryable調用ToPagedListAsync時，該方法將返回只包含在請求頁裏的書籍列表。屬性HasPreviousPage和HasNextPage可用來啓用或禁用Previous和Next分頁按鈕。

Book屬性咱們變動爲

public X.PagedList.IPagedList<Book> Book { get;set; }

3、向書籍列表視圖添加分頁連接

在Pages/Books/Index.cshtml中，用如下代碼替換現有代碼。高亮代碼爲更改的代碼。

@page
@model RazorMvcBooks.Pages.Books.IndexModel
@using X.PagedList.Mvc.Core;
@using X.PagedList.Mvc.Common;
@using X.PagedList;
<!--// 7.6及以上版本須要引入Common命名空間，以支持PagedListRenderOptions .7.5如下的版本則不須要。--> 

@{
    ViewData["Title"] = "Index";
} 

<h2>Index</h2> 
<p>
    <a asp-page="Create">Create New</a>
</p>

<form>
    <p>
        <select asp-for="Publish" asp-items="Model.Publishs">
            <option value="">All</option>
        </select>
        書籍名稱
        <input type="text" name="SearchString">
        <input type="submit" value="查詢" />
    </p>
</form> 

<table class="table">
    <thead>
        <tr>
            <th>
                <a asp-page="./Index" asp-route-sortOrder="@Model.NameSort">
                    @Html.DisplayNameFor(model => model.Book[0].Name)
                </a> 

            </th>
            <th>
                <a asp-page="./Index" asp-route-sortOrder="@Model.DateSort">
                    @Html.DisplayNameFor(model => model.Book[0].ReleaseDate)
                </a>

            </th>
            <th>
                @Html.DisplayNameFor(model => model.Book[0].Author)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Book[0].Price)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Book[0].Publishing)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Book)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ReleaseDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Author)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Publishing)
                </td>
                <td>
                    <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                    <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
                    <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
                </td>
            </tr>
        }

    </tbody>
    <tfoot>
        <tr>
            <td class="text-muted" colspan="4">
                每頁 @Model.Book.PageSize 條記錄，本頁有 @Model.Book.Count 條記錄,共有 @Model.Book.TotalItemCount 條記錄。
               第 @(Model.Book.PageCount < Model.Book.PageNumber ? 0 : Model.Book.PageNumber) 頁，共 @Model.Book.PageCount 頁。
                @*這個條件表達式的目的是防止出現 記錄爲0的狀況，會出現 總頁數爲0，而當前是第1頁的狀況。*@

            </td>
        </tr>
    </tfoot>
</table> 

@{

    var prevDisabled = !Model.Book.HasPreviousPage ? "disabled" : "";
    var nextDisabled = !Model.Book.HasNextPage ? "disabled" : "";
} 

<a asp-action="./Index"
 asp-route-publish="@Model.Publish"
   asp-route-sortOrder="@ViewData["CurrentSort"]"
   asp-route-pageIndex="@(Model.Book.PageNumber - 1)"
   asp-route-searchString="@ViewData["SearchString"]"
   class="btn btn-default @prevDisabled">
    上一頁
</a>

<a asp-action="./Index"
 asp-route-publish="@Model.Publish"
   asp-route-sortOrder="@ViewData["CurrentSort"]"
   asp-route-pageIndex="@(Model.Book.PageNumber + 1)"
   asp-route-searchString="@ViewData["SearchString"]"
   class="btn btn-default @nextDisabled">
    下一頁
</a>

其中經過標記幫助程序顯示分頁按鈕：

<a asp-action="./Index"
 asp-route-publish="@Model.Publish"
   asp-route-sortOrder="@ViewData["CurrentSort"]"
   asp-route-pageIndex="@(Model.Book.PageNumber - 1)"
   asp-route-searchString="@ViewData["SearchString"]"
   class="btn btn-default @prevDisabled">
    上一頁
</a>

咱們在Visual Studio 2017中按F5運行應用，並在瀏覽器中瀏覽書籍列表頁。以下圖。

在瀏覽器中單擊以確保分頁工做原理的不一樣的排序順序中的分頁連接。而後輸入搜索字符串，而後重試以驗證分頁還適用正確使用排序和篩選的分頁。

4、向書籍列表視圖添加分頁連接

雖然上面咱們實現了分頁功能，可是通常分頁，須要有頁面顯示，以下圖。

如何實現上圖中的分頁樣式呢？在Pages/Books/Index.cshtml中把書籍列表視圖中「</table>」後面的代碼，用如下代碼替換，就能夠實現。

@Html.PagedListPager(Model.Book, pageIndex => Url.Action("Index", new { pageIndex, sortOrder = ViewData["CurrentSort"], 
searchString = ViewData["SearchString"], pageSize = ViewData["PageSize"] }),
 new PagedListRenderOptions { LinkToFirstPageFormat = "首頁", LinkToNextPageFormat = "下一頁", LinkToPreviousPageFormat = "上一頁",
 LinkToLastPageFormat = "末頁", MaximumPageNumbersToDisplay = 5, DisplayItemSliceAndTotal = false })

咱們在Visual Studio 2017中按F5運行應用，並在瀏覽器中瀏覽書籍列表頁。使用鼠標單擊頁碼「4」，咱們能夠驗證分頁功能的正確使用。以下圖。