mrkt 的程式學習筆記: ASP.NET MVC - 資料分頁(1) 使用MvcPaging

做專案的時候除了表單常常碰到之外，資料表格的顯示也是常常需要處理的，

而資料表格的顯示也通常會需要做到資料分頁的功能。

製作ASP.NET WebForm的網頁時，使用GridView的話，可以使用內建的分頁功能，

而在.NET 3.5後還有提供一個DataPager的控制項，專門處理資料分頁的功能。

到了使用ASP.NET MVC來做網頁時，因為沒有控制項的提供，所以包括資料表格就必須要自己處理，

當然，資料分頁的功能也需要自己動手做。

目前網路上已經有很多相關資料分頁套件可以使用，但是這邊就從一個最基本的功能來做介紹，

並延伸之後ASP.NET MVC資料分頁相關介紹。

MvcPaging

網站：http://blogs.taiga.nl/martijn/tag/paging/

GitHub：https://github.com/martijnboland/MvcPaging

本文是使用ASP.NET MVC2，下面為作者所做的MVC2 Demo Source Code

https://github.com/martijnboland/MvcPaging/tree/mvc2

可以先看看作者的這一篇文章「Paging with ASP.NET MVC」，之所以可以做到資料分頁的功能，

最重要的地方在於「IPagedList<T>」，裡面定義了以下的Property：

public interface IPagedList<T> : IList<T>
{
    int PageCount { get; }
    int TotalItemCount { get; }
    int PageIndex { get; }
    int PageNumber { get; }
    int PageSize { get; }
    bool HasPreviousPage { get; }
    bool HasNextPage { get; }
    bool IsFirstPage { get; }
    bool IsLastPage { get; }
}

所以把要做資料分頁的集合給轉換成IPagedList<T>型別，這樣在ViewPage就可以顯示分頁後的資料，

另外在ViewPage中也還有另外一個重點，那就是「Html.Pager()」，這是MvcPaging自訂的Html Helper方法，

如此一來就可以在網頁上顯示分頁功能列了，先看看使用MvcPaging後的資料分頁結果：

就直接來看看如何使用MvcPaging來完成資料分頁：

一、下載MvcPaging原始碼

https://github.com/martijnboland/MvcPaging/tree/mvc2

點擊紅色框框中的Downloads，就可以下載包含原始碼、Demo專案、單元測試的壓縮檔案

解開壓縮檔後，可以看到有以下的目錄，而我們會需要用到「MvcPaging」這個專案

二、加入MvcPaging專案到現有方案中。

在方案總管中，於方案上按下滑鼠右鍵，點選「加入」—>「現有專案」

（加入前要先將MvcPaging目錄複製到目前方案目錄下）

選擇「MvcPaging.csproj」後再Click「開啟舊檔」（或是直接在MvcPaging.csproj上面Double-click）

已將「MvcPaging專案」加入到Solution中

然後在MVC網站專案中去加入MvcPaging的參考

選擇加入參考

加入參考完成

三、Controller的Action部分

加入後就是要開始來實作了，首先看看Controller的Action部分：

public ActionResult PageMethod1(int? page)
{
  int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
  var result = this.productService.GetCollection();
  return View(result.ToPagedList(currentPageIndex, 5));
}

currentPageIndex為要顯示第幾個分頁的資料，記得要從0開始算。

而回傳ViewPage的Model則是需要把從資料庫取出的資料集合給轉換成IPagedList，

使用ToPagedList方法，方法的第一個參數就是要顯示的第幾頁，第二個參數則是每個分頁顯示的資料數。

四、修改ViwPage以及放置Pager

再來看看ViewPage的部份：

ViewPage的部份有兩個地方要特別注意

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ViewMaster.Master" Inherits="System.Web.Mvc.ViewPage<IPagedList<Product>>" %>
<%@ Import Namespace="MvcPaging"%>
<%@ Import Namespace="MVC_Page.Models" %>

最上方的Inherits要改為 IPagedList，另外也需要去宣告匯入 MvcPaging 的命名空間。

再來就是放上Pager

<div class="pager">
  <%= Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount) %>
</div>

而Model.PageSize、Model.PageNumber、Model.TotalItemCount都是IPagedList所定義的Property，

都是在Action中使用ToPagedList()方法而產生。

※補充

另外還有個地方要提醒一下，那就是Pager的樣式表，

在我們從GitHub所下載的壓縮檔中，有個「MvcPaging.Demo」網站專案，在裡面的Content目錄中，

可以從Site.css取得 class 為 pager 的樣式內容，或是使用下面的內容：

/* Pager */.pager {    margin:8px 3px;    padding:3px;} .pager .disabled {    border:1px solid #ddd;    color:#999;    margin-top:4px;    padding:3px;    text-align:center;} .pager .current {    background-color:#06c;    border:1px solid #009;    color:#fff;    font-weight:bold;    margin-top:4px;    padding:3px 5px;    text-align:center;} .pager span, .pager a{    margin: 4px 3px;} .pager a {    border:1px solid #c0c0c0;    padding:3px 5px;    text-align:center;    text-decoration:none;}