前言

小夥伴們，
大家好，我是Rector。
最近Rector忙於換工作，沒有太多時間來更新我們的ASP.NET MVC 5系列文章 [一步一步創建ASP.NET MVC5程序Repository+Autofac+Automapper+SqlSugar]，直到現在才擠些時間趕緊更新一篇，小夥伴們等得太久了。

寫系列文章是一件並不容易的事情，相信有過寫系列文章經驗朋友也應該有所體會。

本文知識要點

本期是該系列的第十一篇，上一篇《一步一步創建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)》我們了解了母版頁和部分視圖，並使用母版頁和部分視圖重新組織了頁面的共用區域的HTML代碼，本文我們將要涉及到的內容為：

• 通用分頁的封裝
• 文章分頁的實現

通用分頁的封裝

在之前兩期中，我們的文章列表頁面是沒有分頁功能的，而是使用如下方法：

public IEnumerable<Post> FindHomePagePosts(int limit = 20)
        {
            using (var db = DbFactory.GetSqlSugarClient())
            {
                var list = db.Queryable<Post>().OrderBy(x => x.Id, OrderByType.Desc).Take(limit).ToList();
                return list;
            }
        }
 

來讀取文章表中的前N(20)條記錄作為首頁的文章列表數據源。那麽，本文將為大家封裝一個通用的分頁信息類以及分頁泛型方法，並最終實現首頁文章列表的數據分頁功能。分頁效果如下圖：

創建IPagedList接口及實現

打開項目TsBlog.Repositories，在此項目中分別新建兩個類：IPagedList.cs和PagedList.cs，代碼分別如下：

IPagedList.cs

using System.Collections.Generic;

namespace TsBlog.Repositories
{
    public interface IPagedList<T> : IList<T>
    {
        int PageIndex { get; }
        int PageSize { get; }
        int TotalCount { get; }
        int TotalPages { get; }
        bool HasPreviousPage { get; }
        bool HasNextPage { get; }
    }
}
 

IPagedLIst.cs

using System;
using System.Collections.Generic;
using System.Linq;

namespace TsBlog.Repositories
{
    /// <summary>
    /// 分頁組件實體類
    /// </summary>
    /// <typeparam name="T">泛型實體</typeparam>

    [Serializable]
    public class PagedList<T> : List<T>, IPagedList<T>
    {
        /// <summary>
        /// 構造函數
        /// </summary>
        /// <param name="source">數據源</param>
        /// <param name="pageIndex">分頁索引</param>
        /// <param name="pageSize">分頁大小</param>
        public PagedList(IQueryable<T> source, int pageIndex, int pageSize)
        {
            var total = source.Count();
            TotalCount = total;
            TotalPages = total / pageSize;

            if (total % pageSize > 0)
                TotalPages++;

            PageSize = pageSize;
            PageIndex = pageIndex;

            AddRange(source.Skip(pageIndex * pageSize).Take(pageSize).ToList());
        }

        /// <summary>
        /// 構造函數
        /// </summary>
        /// <param name="source">數據源</param>
        /// <param name="pageIndex">分頁索引</param>
        /// <param name="pageSize">分頁大小</param>
        public PagedList(IList<T> source, int pageIndex, int pageSize)
        {
            TotalCount = source.Count();
            TotalPages = TotalCount / pageSize;

            if (TotalCount % pageSize > 0)
                TotalPages++;

            PageSize = pageSize;
            PageIndex = pageIndex;
            AddRange(source.Skip(pageIndex * pageSize).Take(pageSize).ToList());
        }

        /// <summary>
        /// 構造函數
        /// </summary>
        /// <param name="source">數據源</param>
        /// <param name="pageIndex">分頁索引</param>
        /// <param name="pageSize">分頁大小</param>
        /// <param name="totalCount">總記錄數</param>
        public PagedList(IEnumerable<T> source, int pageIndex, int pageSize, int totalCount)
        {
            TotalCount = totalCount;
            TotalPages = TotalCount / pageSize;

            if (TotalCount % pageSize > 0)
                TotalPages++;

            PageSize = pageSize;
            PageIndex = pageIndex;
            AddRange(source);
        }

        /// <summary>
        /// 分頁索引
        /// </summary>
        public int PageIndex { get; }
        /// <summary>
        /// 分頁大小
        /// </summary>
        public int PageSize { get; private set; }
        /// <summary>
        /// 總記錄數
        /// </summary>
        public int TotalCount { get; }
        /// <summary>
        /// 總頁數
        /// </summary>
        public int TotalPages { get; }

        /// <summary>
        /// 是否有上一頁
        /// </summary>
        public bool HasPreviousPage
        {
            get { return (PageIndex > 0); }
        }
        /// <summary>
        /// 是否有下一頁
        /// </summary>
        public bool HasNextPage
        {
            get { return (PageIndex + 1 < TotalPages); }
        }
    }
}

其中，IPagedList.cs為一個分頁信息接口，包含了分頁的基本信息，如：當前頁索引(PageIndex)，分頁大小(PageSize)，總記錄數(TotalCount)，總頁數(TotalPages)等等。而PagedList.cs類文件則是對IPagedList.cs接口的實現。

添加泛型倉儲分頁接口

打開項目TsBlog.Repositories 的 IRepository.cs 文件，在其中新建分頁接口，如下：

/// <summary>
/// 根據條件查詢分頁數據
/// </summary>
/// <param name="predicate"></param>
/// <param name="orderBy"></param>
/// <param name="pageIndex">當前頁面索引</param>
/// <param name="pageSize">分布大小</param>
/// <returns></returns>
IPagedList<T> FindPagedList(Expression<Func<T, bool>> predicate, string orderBy = "", int pageIndex = 1, int pageSize = 20);

再打開此項目中的 GenericRepository.cs 泛型倉儲實現類，在其中實現FindPagedList這個分頁方法，如下：

/// <summary>
/// 根據條件查詢分頁數據
/// </summary>
/// <param name="predicate"></param>
/// <param name="orderBy"></param>
/// <param name="pageIndex">當前頁面索引</param>
/// <param name="pageSize">分布大小</param>
/// <returns></returns>
public IPagedList<T> FindPagedList(Expression<Func<T, bool>> predicate, string orderBy = "", int pageIndex = 1, int pageSize = 20)
{
    using (var db = DbFactory.GetSqlSugarClient())
    {
        var totalCount = 0;
        var page = db.Queryable<T>().OrderBy(orderBy).ToPageList(pageIndex, pageSize, ref totalCount);
        var list = new PagedList<T>(page, pageIndex, pageSize, totalCount);
        return list;
    }
}

類似地操作，打開項目 TsBlog.Services，並打開文件 IService.cs，在其中添加分頁服務接口，如下：

/// <summary>
/// 根據條件查詢分頁數據
/// </summary>
/// <param name="predicate"></param>
/// <param name="orderBy"></param>
/// <param name="pageIndex">當前頁面索引</param>
/// <param name="pageSize">分布大小</param>
/// <returns></returns>
IPagedList<T> FindPagedList(Expression<Func<T, bool>> predicate, string orderBy = "", int pageIndex = 1, int pageSize = 20);

再打開此項目中的泛型服務類GenericService.cs，在其中實現分頁服務接口，如下：

/// <summary>
/// 根據條件查詢分頁數據
/// </summary>
/// <param name="predicate"></param>
/// <param name="orderBy"></param>
/// <param name="pageIndex">當前頁面索引</param>
/// <param name="pageSize">分布大小</param>
/// <returns></returns>
public IPagedList<T> FindPagedList(Expression<Func<T, bool>> predicate, string orderBy = "", int pageIndex = 1, int pageSize = 20)
{
    return _repository.FindPagedList(predicate, orderBy, pageIndex, pageSize);
}

到此，我們的泛型倉儲和服務的通用分頁接口和實現就封裝完成了，現在我們需要使用以上的分頁封裝，在UI層來實現文章列表的分頁功能。

切換到項目 TsBlog.Frontend 。

安裝第三方分頁組件

為了方便，本示例教程使用的是第三方的分頁組件來實現UI層的分頁功能，組件為:PagedList。安裝的方式為：nuget，所以與以前幾期的nuget包安裝類似，打開nuget包管理工具，搜索關鍵詞PagedList，在查詢出來的包中，選擇PagedList.Mvc和PagedList兩個分頁組件包並安裝，如下：

分頁組件安裝完成之後，我們再打開 HomeController 控制器，修改Index這個Action，HomerController.cs修改後的完整代碼如下：

using PagedList;
using System.Linq;
using System.Web.Mvc;
using TsBlog.AutoMapperConfig;
using TsBlog.Frontend.Extensions;
using TsBlog.Services;
using TsBlog.ViewModel.Post;

namespace TsBlog.Frontend.Controllers
{
    public class HomeController : Controller
    {
        /// <summary>
        /// 文章服務接口
        /// </summary>
        private readonly IPostService _postService;
        public HomeController(IPostService postService)
        {
            _postService = postService;
        }
        /// <summary>
        /// 首頁
        /// </summary>
        /// <returns></returns>
        public ActionResult Index(int? page)
        {
            //var list = _postService.FindHomePagePosts();
            //讀取分頁數據,返回IPagedList<Post>
            page = page ?? 0;
            var list = _postService.FindPagedList(x => !x.IsDeleted && x.AllowShow, pageIndex: (int)page, pageSize: 10);
            var model = list.Select(x => x.ToModel().FormatPostViewModel());
            ViewBag.Pagination = new StaticPagedList<PostViewModel>(model, list.PageIndex, list.PageSize, list.TotalCount);
            return View(model);
        }
    }
}

最後，再打開Index對應的視圖文件：/Views/Home/Index.cshtml，添加分頁控件，如下：

@using PagedList
@using PagedList.Mvc
@model IEnumerable<TsBlog.ViewModel.Post.PostViewModel>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "ASP.NET MVC 5 系列文章教程--首頁";
}
<div class="jumbotron">
    <h1>小夥伴，你好</h1>
    <p>歡迎來到 Rector 的ASP.NET MVC 5 系列文章教程。在這裏，Rector將和你一起一步一步創建一個集成Repository+Autofac+Automapper+SqlSugar的WEB應用程序。</p>
    <p>你準備好了嗎？</p>
    <p>......</p>
    <p>讓我們開始ASP.NET MVC 5 應用程序的探索之旅吧!!!</p>
</div>
<strong class="post-title">文章列表(@(Model.Count())篇)</strong>
<ul class="list-unstyled post-item-box">
    @foreach (var p in Model)
    {
        <li>
            <h2><a href="~/post/details/@p.Id">@p.Title</a></h2>
            <p class="post-item-summary">@p.Summary ... <a href="~/post/details/@p.Id">閱讀全文</a></p>
        </li>
    }
</ul>
@Html.PagedListPager((IPagedList)ViewBag.Pagination, page => Url.Action("index", new { page }), new PagedListRenderOptions
{
    LinkToFirstPageFormat = "首頁",
    LinkToPreviousPageFormat = "上一頁",
    LinkToNextPageFormat = "下一頁",
    LinkToLastPageFormat = "末頁",
    DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded,
    DisplayLinkToLastPage = PagedListDisplayMode.Never,
    DisplayEllipsesWhenNotShowingAllPageNumbers = true,
    MaximumPageNumbersToDisplay = 5
})

以上所有更改完成後，就完成了我們對通用分頁的封裝和實現，當然，這個通用分頁是非常簡單的，只能滿足單表數據的分頁查詢和讀取。更復雜的分頁需求請自行根據思路進行實現。

完成以上步驟之後，我們重新編譯和生成項目 TsBlog.Frontend 。最後，在瀏覽器中打開地址： http://localhost:54739/ ，檢查一下，數據分頁功能是否起作用了呢？

好了，如果你喜歡Rector，或者是喜歡本系列文章，請為我點個贊，以鼓勵Rectro繼續寫出更好的文章，或者系列文章。

本期源碼托管地址：請至首發地址《一步一步創建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十一)》查看

看完教程如果覺得還不過癮的，想“勾對”的，歡迎加入圖享網官方QQ群：483350228，如果你按照教程還原出來的程序運行有問題，請參照本期源碼對應調整與修改遇到問題的，也歡迎加入QQ群。有什麽，你懂的。。。^_^

謝謝你的耐心閱讀，本系列未完待續，我們下期再見……

同時，也歡迎大家關註我們的.NET編程愛好者社區：https://2sharings.com 每天都有.NET的開發技術幹貨更新哦。

[https://2sharings.com] 一個.NET編程愛好者社區，專註.NET/C#開發，幫助你找到疑難問題的更優美、更高級的解決方案

一步一步創建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十一)