詳解ASP.NET MVC分頁(yè)的實(shí)現(xiàn)方法
ASP.NET MVC分頁(yè)已經(jīng)有很多文章講述過(guò)，這里我們將講述的ASP.NET MVC分頁(yè)的實(shí)現(xiàn)，需要靠自己設(shè)計(jì)，這就需要了解分頁(yè)的原理，以及相關(guān)數(shù)據(jù)庫(kù)的操作。51CTO編輯推薦《ASP.NET MVC框架視頻教程》
在ASP.NET中，GridView控件本身就帶有分頁(yè)的功能，只要把當(dāng)前頁(yè)面的索引值賦給GridView的PageIndex就可以實(shí)現(xiàn)了分頁(yè)，至于數(shù)據(jù)怎么分頁(yè)，全都由GridView封裝起來(lái)了。
ASP.NET MVC分頁(yè)的實(shí)現(xiàn)就只能靠自己來(lái)設(shè)計(jì)了。首先來(lái)說(shuō)一下分頁(yè)的原理。現(xiàn)在有一個(gè)張news表，中間有很多信息，我們假設(shè)一頁(yè)顯示5條記錄，這樣，頁(yè)面數(shù)量=總記錄數(shù)/5；這里，如果出現(xiàn)小數(shù)，得進(jìn)位取整。如比總記錄和數(shù)為51，那么分的頁(yè)面數(shù)量是11，最后一頁(yè)只有一條記錄。好，有這樣一個(gè)思路后，現(xiàn)在就來(lái)做ASP.NET MVC中的分頁(yè)了。
1、 數(shù)據(jù)庫(kù)和表
創(chuàng)建一個(gè)Data_Company的數(shù)據(jù)庫(kù)，建一張news表，表結(jié)構(gòu)如下圖：
ID是主鍵，并助是自動(dòng)增長(zhǎng)列。
2、 現(xiàn)在，我們用O/R Designer來(lái)創(chuàng)建news表的LINQ To SQL的實(shí)體類(lèi)。
創(chuàng)建一個(gè)名為MvcCompany的ASP.NET MVC Web Application項(xiàng)目，然后選中Models，右鍵，“添加”，“新建項(xiàng)”，選中C#中的“數(shù)據(jù)”，如下圖：
選擇“LINQ to SQL類(lèi)”，名稱(chēng)設(shè)為“CompanyData.dbml”，然后“添加”。
打開(kāi)“服務(wù)器資源管理器”，創(chuàng)建連接，展開(kāi)表，找到news表，拖到CompanyData.dbml的左邊表視圖區(qū)（注：.dbml視圖左邊是SQL表和SQL視圖區(qū)，右邊是SQL存儲(chǔ)過(guò)程和SQL函數(shù)區(qū)），效果如下圖：
在“解決方案資源管理器”下的，“Models”多了三個(gè)文件，CompanyData.dbml，展開(kāi)它，會(huì)有CompanyData.dbml.layout和CompanyData.designer.cs，前者是CompanyData.dbml視圖的一些信息（比如news表在的坐標(biāo)等信息），后者是news實(shí)體類(lèi)及Data_Company數(shù)據(jù)庫(kù)的類(lèi)，在數(shù)據(jù)庫(kù)類(lèi)中聚合了news實(shí)體類(lèi)。
3、 添加news列表類(lèi)。因?yàn)橐粋€(gè)news實(shí)體類(lèi)，一次只能表示一條記錄，如果呈現(xiàn)一個(gè)news表中的數(shù)據(jù)，最好定義一個(gè)集合類(lèi)來(lái)存臨時(shí)來(lái)存放news記錄的集合。
類(lèi)的實(shí)現(xiàn)如下：
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- namespace MvcCompany.Models
- {
- public class NewList<T> : List<T>
- {
- /**//// <summary>
- /// 頁(yè)面索引值
- /// </summary>
- public int PageIndex { get; private set; }
- /**//// <summary>
- /// 每頁(yè)記錄的數(shù)量
- /// </summary>
- public int PageSize { get; private set; }
- /**//// <summary>
- /// 記錄總條數(shù)
- /// </summary>
- public int TotalCount { get; private set; }
- /**//// <summary>
- /// 共有的頁(yè)數(shù)和
- /// </summary>
- public int TotalPages { get; private set; }
- public NewList(IQueryable<T> source, int pageIndex, int pageSize)
- {
- PageIndex = pageIndex;
- PageSize = pageSize;
- TotalCount = source.Count();
- // 進(jìn)上去取整（ 總記錄條數(shù)/一面記錄的條數(shù)）
- TotalPages = (int)Math.Ceiling(TotalCount / (double)pageSize);
- this.AddRange(source.Skip(pageIndex * pageSize).Take(PageSize));
- }
- /**//// <summary>
- /// 是否存在前續(xù)頁(yè)
- /// </summary>
- public bool HasPreviousPage
- {
- get { return (PageIndex > 0); }
- }
- /**//// <summary>
- /// 是否存在后續(xù)頁(yè)
- /// </summary>
- public bool HasNextPage
- {
- get { return (PageIndex + 1 < AllPages); }
- }
- }}
這里，我們實(shí)現(xiàn)了一個(gè)泛型的集合列表NewList（當(dāng)然，這里的本質(zhì)上可以當(dāng)其他實(shí)體類(lèi)的集合列表），在這個(gè)類(lèi)中間，有四個(gè)字段，訪(fǎng)問(wèn)修飾符都是public的，分另為：
PageIndex：當(dāng)前頁(yè)面的索引值
PageSize：每個(gè)頁(yè)面的記錄的條數(shù)
AllCount：記錄的總條數(shù)
AllPages：共有的頁(yè)面總數(shù)
在NewList 構(gòu)造函數(shù)中，有如下代碼：
- public NewList(IQueryable<T> list, int pageIndex, int pageSize)
- {
- PageIndex = pageIndex;
- PageSize = pageSize;
- AllCount = source.Count();
- AllPages = (int)Math.Ceiling(AllCount / (double)pageSize);
構(gòu)造函的參數(shù)有三個(gè)，一個(gè)是list，就是實(shí)體類(lèi)的一個(gè)集合，還有就是頁(yè)面索引值和每個(gè)頁(yè)面的記錄條數(shù)。
第1、2代碼很容易理角，第3行代碼是得到列表的總記錄條數(shù)，第4行代碼，就完成了我們?cè)陂_(kāi)始時(shí)分析的分頁(yè)實(shí)現(xiàn)的公式：頁(yè)面數(shù)量=總記錄數(shù)/每頁(yè)記錄數(shù)，其中Math.Ceiling就是把小數(shù)部分進(jìn)到整數(shù)的函數(shù)。
最關(guān)鍵的是第5行代碼，首先看Skip(PageIndex*PageSize)，頁(yè)面索引值乘上每頁(yè)記錄數(shù)，得到是當(dāng)前頁(yè)面以前的所有記錄數(shù)，Skip是跳過(guò)這些記錄，而得到后面的所有記錄，Take(PageSize)是得到PageSize條數(shù)的記錄，比如，我們想要第三頁(yè)的記錄，這個(gè)頁(yè)面的索引值為2（因?yàn)樗饕祻?開(kāi)始）PageIndex=2，每頁(yè)顯示5條記錄，PageSize=5，就是要跳過(guò)list中的前10條記錄，然后再取前5條記錄，即取list中的第11條到第15條記錄，也就是第3頁(yè)的記錄了。
在這里，微軟提供了Skip和Tabke函數(shù)，讓我們做起分頁(yè)來(lái)，得心應(yīng)手。
接下來(lái)是this.AddRange()函數(shù)，可以把批量的數(shù)據(jù)放到當(dāng)前集合中（因?yàn)镹ewList本身就是一個(gè)集合）。
代碼的后半部分是兩個(gè)屬性：
- public bool HasPreviousPage
- {
- get { return (PageIndex > 0); }
- }
- public bool HasNextPage
- {
- get { return (PageIndex + 1 < AllPages); }
- }
這兩個(gè)屬性是為頁(yè)面顯示“上一頁(yè)”和“下一頁(yè)”，因?yàn)楫?dāng)我們顯示第一頁(yè)的時(shí)候，“上一頁(yè)”是不需要顯示的，如果最后一頁(yè)，是沒(méi)有“下一頁(yè)“的，所以在這里定義了兩個(gè)屬性，來(lái)判斷是否有上一頁(yè)和下一頁(yè)。
先看HasPreviousPage屬性，如果PageIndex是大于0的，說(shuō)明不是在第一頁(yè)，所以就反回true，如果小于等于0（在這里小于0是沒(méi)有意思義的，因?yàn)轫?yè)面的索引值最小是0），說(shuō)明是第一頁(yè)，所以返回是false。
再看HasNextPage屬性，因?yàn)轫?yè)面索引值的最大數(shù)，與頁(yè)面的最大數(shù)差1(索引從0開(kāi)始的原因)，所以當(dāng)PageIndex+1小于AllPages時(shí)，說(shuō)沒(méi)有沒(méi)到最后一頁(yè)，返回值是true，如果PageIndex+1大于等于AllPages時(shí)（大于也沒(méi)有意義），說(shuō)明是最后一頁(yè)，返回值為false。
4、 添加NewsController。選中Controller，右鍵添加一個(gè)NewsController 的Controller。
代碼如下：
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
- using System.Web.Mvc.Ajax;
- using MvcCompany.Models;
- using System.Configuration;
- namespace MvcCompany.Controllers
- {
- public class NewsController : Controller
- {
- DataClassesDataContext DCDC;
- int pageSize;
- public NewsController()
- {
- DCDC = new DataClassesDataContext();
- pageSize = Convert.ToInt32(ConfigurationManager.AppSettings["pagesize"]); //每個(gè)頁(yè)面的數(shù)量存放在web.config的appsetting里的pagesize節(jié)中，值為5
- }
- public ActionResult Index(int? page)
- {
- var NewsList = DCDC.news.Select(newss=>newss);
- var paginatedNews = new NewList<news>(NewsList, page ?? 0, pageSize); //實(shí)現(xiàn)分頁(yè)功能
- return View(paginatedNews);
- }
- [AcceptVerbs(HttpVerbs.Post)]
- public ActionResult Index(FormCollection formValues)
- {
- int? index = int.Parse(formValues.GetValue("pageindex").AttemptedValue);
- int page = index ??0 ;
- var NewsList = DCDC.news.Select(newss => newss);
- var paginatedNews = new NewList<news>(NewsList, page, pageSize); //實(shí)現(xiàn)分頁(yè)功能
- return View(paginatedNews);
- }
- }
- }
關(guān)于兩個(gè)Index重載，我們?cè)谠O(shè)計(jì)完Views再討論。
5、 添加View。選中NewsController，右鍵，添加View，會(huì)彈出如下圖：
在這里，我們選中MvcCompany.Models.news，在View content下拉列表中選擇List（因?yàn)橐獙?shí)現(xiàn)列表分頁(yè)）。
Index.aspx頁(yè)面代碼如下：
- <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcCompany.Models.NewList<MvcCompany.Models.news>>" %>
- <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
- 新聞
- </asp:Content>
- <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
- <!--前半部分-->
- <%using (Html.BeginForm())
- { %>
- <h2>
- 新聞列表</h2>
- <table>
- <tr>
- <th>
- 編號(hào)
- </th>
- <th>
- 題目
- </th>
- <th>
- 時(shí)間
- </th>
- <th>
- 內(nèi)容
- </th>
- </tr>
- <% foreach (var item in Model)
- { %>
- <tr>
- <td>
- <%= Html.Encode(item.ID)%>
- </td>
- <td>
- <%= Html.Encode(item.title)%>
- </td>
- <td>
- <%= Html.Encode(String.Format("{0:g}", item.datetimes))%>
- </td>
- <td>
- <%= Html.Encode(item.contents)%>
- </td>
- </tr>
- <% } %>
- </table>
- <hr />
- <!--后半部分-->
- <% =Html.RouteLink("首頁(yè)", "UpcomingNews", new { page = 0 })%>|
- <% if (Model.HasPreviousPage)
- {%>
- <% =Html.RouteLink("上一頁(yè)", "UpcomingNews", new { page = (Model.PageIndex - 1) })%>|
- <%} %>
- <% if (Model.HasNextPage)
- {%>
- <% =Html.RouteLink("下一頁(yè)", "UpcomingNews", new { page = (Model.PageIndex + 1) })%>|
- <%} %>
- <% =Html.RouteLink("尾頁(yè)", "UpcomingNews", new { page = Model.PageSize - 1 })%>
- 第
- <%=Html.TextBox("pageindex", Model.PageIndex, new {style="width:30px;"})%>頁(yè)<input
- type="submit" value="轉(zhuǎn)到" id="sub" />
- <%} %>
- </asp:Content>
代碼的前半部分，很好理解。
代碼的后半部分，我們來(lái)分析一下，首頁(yè)，是采用
Html.RouteLink(“首頁(yè)”,”UpcomingNews”,new{ page=0})，是要定位到名稱(chēng)為”UpcomingNews”的路由，這個(gè)路由在Global.asax中，代碼如下：
- routes.MapRoute(
- "UpcomingNews",
- "News/page/{page}",
- new { controller = "News", action = "Index" });
路由的名稱(chēng)是”UpcominNews”，Url格式是News/page/{page}，News和page是url的一種格式，后面{page}是參數(shù)，這個(gè)參數(shù)的名稱(chēng)要與View中，后半部分的new{page=0}的page，以及NewsController中的方法Index(int? page)中的page都必需統(tǒng)一。如果有請(qǐng)求
News/page/2的url，實(shí)際上請(qǐng)求的是 news?page=2的頁(yè)網(wǎng)（路由在ASP.NET MVC官上有說(shuō)明）。
首頁(yè)為中的page=0，最終會(huì)成為NesController中Index(int? page)方法，的實(shí)參，返回首頁(yè)數(shù)據(jù)（及數(shù)據(jù)庫(kù)表的前5條數(shù)據(jù)）。
上一頁(yè)，在當(dāng)前頁(yè)數(shù)PageIndex的基礎(chǔ)上減1。
下一頁(yè)，在當(dāng)前頁(yè)數(shù)PageIndex的基礎(chǔ)上加1
（注：上面的加減1都不會(huì)越界，因?yàn)楫?dāng)顯示第一頁(yè)時(shí)，“上一頁(yè)”的超連接就不會(huì)顯示。當(dāng)最后一頁(yè)時(shí)，“下一頁(yè)”的超連接就不會(huì)顯示）
尾頁(yè)同首頁(yè)。
現(xiàn)在的一個(gè)問(wèn)題是“轉(zhuǎn)到”第幾頁(yè)的實(shí)現(xiàn)，我們知道，轉(zhuǎn)到第幾頁(yè)的“幾”，得用戶(hù)輸入，所以這里用一個(gè)Html.TextBox來(lái)實(shí)現(xiàn)，完全代碼是
- <%=Html.TextBox("pageindex", Model.PageIndex, new {style="width:30px;"})%>
最終會(huì)生成一個(gè)名稱(chēng)為pageindex的intup，類(lèi)型為T(mén)ext，它的值始終為當(dāng)前的索引頁(yè)值Model.PageIndex，其中有一個(gè)寬度的屬性new {style="width:30px;"}。
同時(shí)還有一個(gè)<input type="submit" value="轉(zhuǎn)到" id="sub" />用來(lái)向后參提交。因?yàn)榇a中有<form>表單，所以可以在NewsController中接收這個(gè)提交。
Index(FormCollection formValues)方法用來(lái)處理這個(gè)提交。這里會(huì)從formValues.GetValue("pageindex").AttemptedValue中午到客戶(hù)端用戶(hù)輸入“pageindex”文本框中的值。從而來(lái)完成定向。
至此，我們就用ASP.NET MVC實(shí)現(xiàn)了一個(gè)分頁(yè)功能，相比之下要難ASP.NET的GridView自動(dòng)分頁(yè)好多。
在這個(gè)例子中，我們?cè)贛odels層中提供了實(shí)體類(lèi)及news表的集合類(lèi)。在Controller層增加了NewsController類(lèi)。在View層增加了News的view，從M-V-C角度，分別完成了對(duì)分頁(yè)的功能。
【編輯推薦】
