一、操作教程

1.在【Blogsystem.MvcSite】UI層，右擊點選【管理NuGet程式包】

2.然後搜尋【Webdiyer.MVCPager】點選【下載】

3.在【控制器】中修改程式碼（紅色框框是修改的資料）。

4.在【檢視】中修改的程式碼。

5.最後看效果

二、學習原始碼

1.自己寫的獲取資料分頁的方法：

 /// <summary>
        ///  根據使用者Id獲得文章
        /// </summary>
        /// <param name="userid"></param>
        /// <returns></returns>
        public async Task<List<ArticleDto>> GetAllArticlesByUserId(Guid userid, int pageIndex, int pageSize)
        {
            /*
             Include：引入外來鍵
             當前——>.Include(m=>n.User)：文章——>使用者
             */
            using (IDAL.IArticleService articleAvc = new DAL.ArticleService())
            {
                var list = await articleAvc.GetAllByPageOrder(pageSize, pageIndex,asc:false).Include(m => m.User)
                    .Where(u => u.UserId.Equals(userid))
                    //需要進行Dto轉換
                    .Select(u => new ArticleDto()
                    {
                        Title = u.Title,
                        BadCount = u.BadCount,
                        GoodCount = u.GoodCount,
                        Email = u.User.Email,//用到使用者表的Email
                        Content = u.Content,
                        CreateTime = u.CreateTime,
                        Id = u.Id,
                        ImagePath = u.User.ImagePath//用到使用者表的頭像
                    })
                    .ToListAsync();

                //去另外一張表獲取
                using (IArticleToCategoryService articleToCategoryService = new ArticleToCategoryService())
                {
                    //迴圈新增
                    foreach (var articleDto in list)
                    {
                        var cates = await articleToCategoryService.GetAllAsync().Where(u => u.ArticleId.Equals(articleDto.CategoryIds)).ToListAsync();
                        articleDto.CategoryIds = cates.Select(m => m.BlogCategoryId).ToArray();//ID
                        articleDto.CategoryName = cates.Select(m => m.BlogCategory.CategroyNmae).ToArray();//Name
                    }
                    return list;
                }
            }
        }

2.【控制器】中的程式碼：

 [HttpGet]
        //加上過濾器
        [BlogSystemAuth]
        //顯示文章列表
        public async Task<ActionResult> ArticleListTwo(int pageIndex = 1, int pagesize = 3)
        {
            //需要給頁籤前端 總頁碼數，當前頁碼，可現實的總頁碼數
            var articleMgr = new ArticleManeger();
            var userid = Guid.Parse(Session["userid"].ToString());
            //當前使用者的第N頁資料
            var articles = await new ArticleManeger().GetAllArticlesByUserId(userid, pageIndex-1, pagesize);
            //獲取當前文章總條數
            var datacount = await articleMgr.GetDataCount(userid);
            return View(new PagedList<Dto.ArticleDto>(articles,pageIndex,pagesize,datacount));
        }

3.【檢視】中的程式碼：

@using Webdiyer.WebControls.Mvc
@model Webdiyer.WebControls.Mvc.PagedList<BlogSystem.Dto.ArticleDto>

@{
    ViewBag.Title = "ArticleListTwo";
}

<h2>ArticleListTwo</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CreateTime)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.GoodCount)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.BadCount)
            </th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CreateTime)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.GoodCount)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.BadCount)
                </td>
                <td>
                    @Html.ActionLink("修改", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("詳情", "ArticleDetails", new { id = item.Id }) |
                    @Html.ActionLink("刪除", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    </tbody>


    <!--分頁-->
    <tfoot>
        <tr>
            <!--合併-->
            <td colspan="6">
                <nav>
                    @Html.Pager(Model,new PagerOptions {
                   PageIndexParameterName= "pageIndex",
                   ContainerTagName="ul",//最外層：無序列表
                   CssClass="pagination",//樣式
                   CurrentPagerItemTemplate="<li class=\"active\"><a href=\"\">{0}</li>",//模板
                   DisabledPagerItemTemplate="<li class=\"disabled\"><a>{0}</a></li>",
                   PagerItemTemplate="<li>{0}</li>",
                   Id="bootstrappager"
               })
                </nav>
            </td>
        </tr>
    </tfoot>
</table>


@section headers{
    <style>
        .pagination {
            display:flex;
            flex-direction:row;
            justify-content:center;
            margin:0;
            padding:3px;
        }
    </style>
    }