MVC分頁

 

本演練一步一步教您如何快速上手學會使用ASP.NET MVC Pager

一、在Visual Studio 2008中建立ASP.NET MVC Web應用程序：
從Visual Studio 2008的「文件」菜單中選擇「新建」，而後點擊「項目...」子菜單，在彈出的「新

建項目」窗口左側的「項目類型」列表中選擇「Web」，而後在右邊窗口中選擇「ASP.NET MVC Web

Application」，根據須要修改項目名稱和項目保存位置後點擊「肯定」按鈕，在隨後彈出的「建立單

元測試項目」對話框中選擇「不建立單元測試項目」，而後單點「肯定」按鈕，Visual Studio 2008就

會建立一個包含最基本配置和模板的ASP.NET MVC項目；（注：若是「新建項目」窗口中沒有「ASP.NET

MVC Web Application」項目，則表示您沒有安裝ASP.NET MVC框架，請從這裏下載安裝。）

二、添加對ASP.NET MVC Pager程序集的引用：
在解決方案資源管理器窗口中的「引用」文件夾上點擊右鍵，從彈出的菜單中選擇「添加引用...」，

在彈出的「添加引用」對話框中，點擊最上邊的「瀏覽」標籤頁，在下邊的查找下拉框中定位到

MvcPager.dll所在的文件夾，從下邊的文件列表中選中MvcPager.dll，而後點擊「肯定」按鈕，關閉「

添加引用」窗口，MvcPager會出如今解決方案資源管理器的「引用」文件夾中；

三、建立Model對象：
本演練中咱們使用SQL Server 2005的Northwnd數據庫（數據庫包含在可下載的示例項目中），對

Orders表中的數據進行分頁顯示。首先須要創建Model對象，本演練中咱們使用LINQ to SQL類。在解決

方案資源管理器中Model文件夾上點擊右鍵，選擇「添加」—「新項目...」，在彈出的「添加新項目」

窗口左側「類別」列表中選擇「Data（數據）」，在右邊窗口中選擇「LINQ to SQL類」，根據須要修

改窗口下方的文件名稱（本演練中爲「MvcPagerSample.dbml」），而後點擊「肯定」按鈕，Visual

Studio 2008就會建立一個空白的dbml文件並在設計器中打開。

在Visual Studio 2008服務器資源管理器中新建一個鏈接到Northwnd示例數據庫的鏈接（若數據庫不存

在，能夠將示例中的數據庫文件附加到SQL Server 2005的數據庫中），點擊鏈接名稱打開數據庫，並

展開表節點下的數據庫表，選中其中的「Orders」表並將其拖放到在Visual Studio 2008設計器中打開

的dbml文件中，Visual Studio 2008會自動生成一個Order實體類。

四、建立Controller並編寫Action：
在解決方案資源管理器中的「Controller」文件夾上點擊右鍵，從彈出的菜單中選擇「新

建」—「Controller」，在彈出的「Add Controller」對話框中修改Controller名稱爲

OrdersController，而後點擊「新建」按鈕，Visual Studio 2008會建立一個新的Controller類並在編

輯器中打開，該Controller類中已默認建立了一個名爲Index的Action，咱們將使用該Action來獲取分

頁的數據並將其傳遞給View顯示。

在OrdersController類中將要用到ASP.NET MVC Pager中的PagedList類和ToPagedList擴展方法，因此

在修改Action以前，須要先引入Webdiyer.WebControls.Mvc 命名空間，在OrdersController最上方的

引入命名空間代碼中，添加以下代碼：using Webdiyer.WebControls.Mvc;，而後修改Index的Action代

碼以下：

public ActionResult Index(int? id)
        {
            using (var db = new MvcPagerSampleDataContext())
            {
                PagedList<Order> orders = db.Orders.ToPagedList(id ?? 1, 20);
                return View(orders);
            }
        }
ToPagedList擴展方法的第一個參數表示當前頁索引（從1開始），第二個參數是每頁顯示的記錄數，此

處咱們設爲20。

五、建立View並編寫數據顯示代碼：
在剛剛修改的Index的Action方法內點擊右鍵，從快捷菜單中選擇「Add View」，在彈出的「Add View

」對話框中按默認設置直接點擊「添加」按鈕，Visual Studio 2008會自動在Views文件夾下建立一個

Orders文件夾並生成名爲Index.aspx的View文件，同時在編輯器中打開Index.aspx以即可以當即對該

View進行修改。

在Index.aspx文件中引入Order實體類所在的命名空間和MvcPager所在的Webdiyer.WebControls.Mvc命

名空間，相似於這樣：

<%@ Import Namespace="MvcPagerSample.Models"%>
<%@ Import Namespace="Webdiyer.WebControls.Mvc"%>

而後將頁面最上方Page指令代碼中的 Inherits="System.Web.Mvc.ViewPage" 改成：

Inherits="System.Web.Mvc.ViewPage<PagedList<Order>>"，並加入以下數據顯示代碼：

<table width="98%"><tr><th>訂單編號</th><th>訂單日期</th><th>顧客編號</th><th>收貨地址

</th></tr>
    <%foreach(Order od in Model)
     {
         %>
         <tr><td><%=od.OrderID %></td><td><%=od.OrderDate.ToString() %></td>
         <td><%=od.CustomerID %></td><td><%=od.ShipAddress %></td></tr>
         <%
     } %>
  </table>
而後將MvcPager分頁控件放到頁面中以實現分頁，代碼以下：

<%=Html.Pager(Model,new PagerOptions{PageIndexParameterName="id"}) %>

由於本示例中咱們使用的是默認的Route 「{controller}/{action}/{id}」，將最後的id參數作爲分頁

參數，所以須要設置MvcPager中的PagerOptions的PageIndexParameterName屬性值，該值默認

爲「pageIndex」。

六、添加Orders連接並運行示例：
打開解決方案資源管理器中Views文件夾下的Home文件夾中的Index.aspx，添加對剛纔建立的顯示

Orders的頁面的連接，代碼以下：

<%=Html.ActionLink("訂單分頁示例","Index","Orders") %>

而後按住ctrl+F5鍵便可用Visual Studio 2008內置的web服務器運行和查看示例效果。

本文摘自http://www.webdiyer.com/Controls/MvcPager/Walkthrough1