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 要來得方便與容易。

      刪除

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。

最近的留言