網頁

2011年9月17日 星期六

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後的資料分頁結果:

image

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

 

一、下載MvcPaging原始碼

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

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

image

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

image

 

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

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

image

(加入前要先將MvcPaging目錄複製到目前方案目錄下)

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

image

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

image

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

image

選擇加入參考

image

加入參考完成

image

 

三、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;
}

 

最後再來看看完成分頁的結果:

分頁第二頁

image

分頁最後一頁

image

另外,因為已經從GitHub上面下載了原始檔,所以也建議各位有空的話可以去了解分頁是如何實作出來的,

了解實作的部份之後,就可以從中去做變化。

 

下一篇再來介紹如何自訂自己的Pager功能列~

 

延伸閱讀:

Demo小舖 - ASP.NET MVC 分頁的解決方案 MVCPaging

我的Coding之路 - 初學ASP.NET MVC學習筆記(十)-分頁

Will保哥 - ASP.NET MVC 開發心得分享 (5):顯示資料分頁(MvcPaging)

 

以上

4 則留言:

  1. 大大你好
    小弟按照你的步驟作
    但分頁一直跑不出來
    原本顯示分頁的位置顯示"MvcPaging.Pager"這句文字

    能否請大大指點迷津

    回覆刪除
    回覆
    1. ㄟ...... 我似乎沒有通靈的能力,我無法領略你所說的錯誤狀況,
      如果可以的話能不能程式碼 email 給我,
      我的 email 在「我的完整簡介」中有...

      刪除
  2. 您好:
    請問一下以下的GetCollection()方法是自已要撰寫的方法嗎?
    var result = this.productService.GetCollection()
    另外,在controller部份需要using類別嗎?

    謝謝大大的指導

    回覆刪除
    回覆
    1. Hello, 你好
      是的 GetCollection() 這個方法是 ProductService 類別裡的一個方法,
      另外你說的「在controller部份需要using類別嗎」
      如果有使用了其他 Namespace 的類別,就必須要使用 using 去加入 Namespace 的使用,
      我想這是基本的 C# 操作的範圍。

      如果你是第一次尋找有關 ASP.NET MVC 的分頁實作方式的話,
      我會建議你看我部落格裡的另一個有關分頁的系列文章「ASP.NET MVC 資料分頁 - 使用 PagedList.Mvc」
      http://kevintsengtw.blogspot.tw/2013/10/aspnet-mvc-pagedlistmvc.html
      PagedList.Mvc 在使用上會比 MvcPager 要來得方便與容易。

      刪除