详解ASP.NET MVC pager 分页

ASP.NET MVC框架已经进入2.0时代，本文将从ASP.NET MVC数据分页谈起，希望能对大家有所帮助。

在网页上进行表格资料或其他显示资料的分页是一种十分常见的需求，以前我们有 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);     
}      
public ActionResult Index()  
{  
    IQueryable<Customer> custs =  
        from cust in db.Customers  
        where cust.City == "Taiwan" 
        select cust;      
 
    return View(custs);  
} 

之后在你的 View 中宣告继承时可透过泛型指派 IQueryable 进去：

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

或是转型成统一个 IEnumable ，这也是比较常见的用法：

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

然后你就可以利用 foreach 取出所有资料并将资料显示出来了：

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

这就是标准的 ASP.NET MVC 取得资料并显示在 View 中的 Pattern。

<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>     
<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 专桉的过程中，除了自行研究如何有效分页以外，也上网找了好几套 ASP.NET MVC 分页的解决方桉，最后我们总结出一个最好用的就是这个元件 ( Paging with ASP.NET MVC )。

　　要利用这个元件进行资料分页，不外乎有几件事必须做到：

　　需传入一个 page 参数到 Action 中，用以指定你目前要显示「第几页」的资料。

　　准备传入的资料(Model)，可透过 Paging with ASP.NET MVC 元件中提供的 Extension Method 将 IList, IQueryable, 或 IEnumable 型别的资料转换成 IPagedList 的型别，并传入 View 中。

透过一个自订的 Html Helper 在 View 中必须显示「分页导览列」的资讯 (如下图)

　　依据上面三个步骤进行修改，Action 的程式码会变成这样：

view plaincopy to clipboardprint?  
// 分页后每页显示的笔数     
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));     
}      
// 分页后每页显示的笔数  
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>>" %>      
<%@ Page Language="C#" 
         Inherits="System.Web.Mvc.ViewPage<IPagedList<Customer>>" %> 

然后再宣告汇入 MvcPaging 命名空间，好让 Html.Pager 这个 Html Helper Method 可以使用。

备注： 也可以在 web.config 设定，请参考 ASP.NET 如何预设汇入指定的命名空间(Namespace) 文章!

<%@ Import Namespace="MvcPaging"%>     
<%@ Import Namespace="MvcPaging"%>  

然后原本显示资料的程式「完全不用改写」，只要加上「分页导览列」即可：

view plaincopy to clipboardprint?  
<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>      
<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 内的分页了，是不是还不错呢！