ASP.NET MVC 開發心得分享 (5):顯示資料分頁

在網頁上進行表格資料或其他顯示資料的分頁是一種十分常見的需求,以前我們有 GridView 或 DataPager 可以幫我們自動分頁,雖然到了 ASP.NET MVC 一切全部重頭來過,但我們也不用真的那麼辛苦的自己實做分頁,因為早就有人幫我們寫好程式並開放原始碼分享給這個世界了。

如果你已經體會到在 ASP.NET MVC 中妥善利用強型別(Strong Typed)特性進行開發的優點時,你將會發現搭配 Visual Studio 2008 進行專案開發的過程有多美妙。以下我先舉一個簡單的例子:

---

你可以在 Controller 中定義一個 Action 方法,並在裡面先取得所有需顯示在 View 中的資料,如果你用 LINQ to SQL 的話,可以直接傳入 IQueryable 型別的物件到 View 中,當成 View 裡面使用的 Model,這樣可以享受延遲載入(Defered Loading) 的效果。

public ActionResult Index()
{
	IQueryable<Customer> custs =   
		from cust in db.Customers   
		where cust.City == "Taiwan"
		select cust; 
		
	return View(custs);
}

之後在你的 View 中宣告繼承時可透過泛型指派 IQueryable<Customer> 進去:

<%@ Page Language="C#" 
         Inherits="System.Web.Mvc.ViewPage<IQueryable<Customer>>" %>

或是轉型成統一個 IEnumable<Customer> ,這也是比較常見的用法:

<%@ Page Language="C#" 
         Inherits="System.Web.Mvc.ViewPage<IEnumable<Customer>>" %>

然後你就可以利用 foreach 取出所有資料並將資料顯示出來了:

<table>
<% foreach (var item in Model) { %>
<tr>
	<td><%= Html.Encode(item.ID) %></td>
	<td><%= Html.Encode(item.Name) %></td>
	<td><%= Html.Encode(item.Tel) %></td>
</tr>
<% } %>
</table>

這就是標準的 ASP.NET MVC 取得資料並顯示在 View 中的 Pattern。

---

我們最近在開發 ASP.NET MVC 專案的過程中,除了自行研究如何有效分頁以外,也上網找了好幾套 ASP.NET MVC 分頁的解決方案,最後我們總結出一個最好用的就是這個元件 ( Paging with ASP.NET MVC )。

要利用這個元件進行資料分頁,不外乎有幾件事必須做到:

  1. 需傳入一個 page 參數到 Action 中,用以指定你目前要顯示「第幾頁」的資料。
  2. 準備傳入的資料(Model),可透過 Paging with ASP.NET MVC 元件中提供的 Extension Method 將 IList<T>, IQueryable<T>, 或 IEnumable<T> 型別的資料轉換成 IPagedList<T> 的型別,並傳入 View 中。
  3. 透過一個自訂的 Html Helper 在 View 中必須顯示「分頁導覽列」的資訊 (如下圖)
    分頁導覽列

依據上面三個步驟進行修改,Action 的程式碼會變成這樣:

// 分頁後每頁顯示的筆數
int defaultPageSize = 10;

// 傳入 page 參數 ( 透過 Model Binder 綁進來的 )
public ActionResult Index(int? page)
{
	IQueryable<Customer> custs =   
		from cust in db.Customers   
		where cust.City == "Taiwan"
		select cust; 
	
	// 計算出目前要顯示第幾頁的資料 ( 因為 page 為 Nullable<int> 型別 )
	int currentPageIndex = page.HasValue ? page.Value - 1 : 0;

	// 透過 ToPagedList 這個 Extension Method 將原本的資料轉成 IPagedList<T>
	return View(custs.ToPagedList(currentPageIndex, defaultPageSize));
}

然後在 View 中顯示資料的地方,透過一個自訂的 Html Helper 方法顯示分頁資訊。

首先必須先修改傳入 View 的 Model 型別

<%@ Page Language="C#" 
         Inherits="System.Web.Mvc.ViewPage<IPagedList<Customer>>" %>

然後再宣告匯入 MvcPaging 命名空間,好讓 Html.Pager 這個 Html Helper Method 可以使用:
備註: 也可以在 web.config 設定,請參考 ASP.NET 如何預設匯入指定的命名空間(Namespace) 文章!

<%@ Import Namespace="MvcPaging"%>

然後原本顯示資料的程式「完全不用改寫」,只要加上「分頁導覽列」即可:

<table>
<% foreach (var item in Model) { %>
<tr>
	<td><%= Html.Encode(item.ID) %></td>
	<td><%= Html.Encode(item.Name) %></td>
	<td><%= Html.Encode(item.Tel) %></td>
</tr>
<% } %>
</table>

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

就這樣簡單幾個步驟即可完成 ASP.NET MVC 內的分頁了,是不是還不錯用呢!

相關連結

  

此文章由 will 發表於 2009/3/21 下午 10:19:14

永久連結 | 評論 (7) | 此文章的RSSRSS comment feed |

分類: ASP.NET MVC

標籤:

收藏:

相關文章

評論

三月 22. 2009 00:42

demo

對於這種有系統的文我還不太會發...

demo tw

三月 22. 2009 01:13

Ausir

.net 不會用

不過我最近也在看一些 MVC 的東西

corAusir 程式逗設計 - 提供設計資料與程式設計 -

blog.corausir.org

或 點我的名字參觀喔

Ausir

五月 9. 2009 04:11

花米

此分页有Bug
在分页 Pager.cs 中修改
/*
* i == this.currentPage 因为在分页中是从0开始的,但是在页面显示是从1开始的,所以这里需要+1
*/
if (i == this.currentPage+1)
{
sb.AppendFormat("<span class=\"current\">{0}</span>", i);
}
else
{
sb.Append(GeneratePageLink(i.ToString(), i));
}
你觉得呢?

花米 cn

五月 9. 2009 17:03

demo

他有分為 PageNumber 和PageIndex

demo tw

五月 21. 2009 13:09

花米




//分析Pager.cs
//本段生成分页链接
//start 首页 =PageNumber=1
//end 总页数
//this.currentPage 当前页(注:第一页时为0,我自己认为)
/*
will 也是这样认为的
// 計算出目前要顯示第幾頁的資料 ( 因為 page 為 Nullable<int> 型別 )
int currentPageIndex = page.HasValue ? page.Value - 1 : 0;

*/
for (int i = start; i <= end; i++)
{
/*我认为
* i == this.currentPage 因为在分页中是从0开始的,但是在页面显示是从1开始的,所以这里需要+1
*/
if (i == this.currentPage+1 /*是我加的 +1*/)
{
//当前页,蓝色部分
sb.AppendFormat("<span class=\"current\">{0}</span>", i);
}
else
{
//其他页,非蓝色部分
sb.Append(GeneratePageLink(i.ToString(), i));
}
}

花米 cn

十二月 16. 2009 16:47

星寂

那個元件的網址有誤哦。
blogs.taiga.nl/.../

星寂 tw

十二月 16. 2009 18:24

Will 保哥

星寂:

Thanks! 已修復!

Will 保哥 tw

新增評論


(將顯示您的Gravatar圖示)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



線上預覽

三月 15. 2010 23:27