MVC3框架好像沒有提供通用的用於分頁的控件，有些好心網友提供了一些不錯的控件。可惜我這個人沒耐心，不願意花一點時間去學習別人控件的用法，就自己花了點時間寫了一段簡單通用代碼，拿出來和那家分享。不是我想去重複發明輪子，只是覺得這個分頁控件內容太少，自己做一個的時間可能要少於學習第三方控件使用的時間，並且維護起來還方便。另外，MVC3實現一個類似的功能非常方便，也不需要做一個專用控件那麼複雜。
對了，忘了補充一下，本人水平所限（非常初級），故高手和批評家輕繞行：），跟我一樣菜鳥請留下。
在正式開始寫代碼之前，先了解一下一點預備知識：@Html.EditorFor。這個東西詳細了我也講不明白，我使用的這點功能是我自己試出來的，我只介紹我用的這點功能，想了解更詳細的話請自己去查。
@Html.EditorFor可以通過一個模板視圖（Template View）編輯和顯示一個Model的內容。具體語法：Html.EditorFor(m => m.Pager, "Pager")，第一個參數是用來傳遞Model的lamda表達式，第二個參數是 Partial Template View的名字。Partial Template View缺省放在Views->Shared->EditorTemplates，如果想換目錄的話請自行查資料，我不知道怎麼換，呵呵。如果想換Area的目錄，我知道，可以問我。
在Partial Template View裏面，@Html.TextBoxFor等方法可以直接編輯模板對應Model裏面的數據，Form提交提交時可以把數據放到Model裏面傳到後臺，前提是模板Model必須是頁面Model的一個屬性，比如UserListModel.Pager，MVC3框架會自動對應過去，多包幾層也沒關係，如UserListModel.XX.BB.Pager，我試過，請放心用。
我們的通用分頁代碼可以用一個Partial Template View來展示，可以取名爲Pager.cshtml。
@Html.EditorFor就說這麼多，下面說一下標題中爲什麼要有“表單(Form)提交”，因爲有的時候我們需要檢索頁面，這樣點分頁的連接的話就可以把頁面上的檢索條件也傳到後臺。所以，我們的分頁代碼中的鏈接不直接使用鏈接，而可以使用提交表單的鏈接：
View Code
function SubmitDefaultForm() {
document.forms[0].submit();
}
function GetPageNumberCtrl() {
return document.getElementById("@Html.IdFor(m => m.PageNumber)");
}
function FirstPage() {
var hidenCtrl = GetPageNumberCtrl();
if (hidenCtrl != null) {
hidenCtrl.value = 1;
}
SubmitDefaultForm();
}
<a href="javascript:FirstPage();">[首頁]</a>
這段代碼，現在只看JS相關的就可以了，尤其劃掉的代碼先不要管。我假設整個畫面只有一個FORM，所以使用document.forms[0].submit();，如果不是一個FORM的話請修改這個FORM提交代碼。
囉嗦了這麼多，現在步入正題，先看分頁的樣子（可以情況自己修改）：
根據頁面顯示，給這個分頁控件（或者通用代碼）見一個Model：
View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace YourNameSpace
{
public class Pager
{
/// <summary>
/// 當前頁碼
/// </summary>
public int PageNumber { get; set; }
/// <summary>
/// 總頁數
/// </summary>
public int TotalPageCount
{
get
{
double pageCount = (double)TotalItemsCount / (double)PageSize;
pageCount = Math.Ceiling(pageCount);
return (int)pageCount;
}
}
/// <summary>
/// 總記錄數
/// </summary>
public int TotalItemsCount { get; set; }
/// <summary>
/// 每頁顯示記錄數
/// </summary>
public int PageSize { get; set; }
public Pager()
{
PageNumber = 1;
TotalItemsCount = 0;
PageSize = 20;
}
}
}
這個段代碼複製到一個文件裏面可以直接使用。注意修改NameSpace就可以了。
然後做一個Partial Template View名字爲Pager.cshtml，放在Views->Shared->EditorTemplates目錄下：
View Code
1 @model YourNameSpace.Pager
2 @using WebBricks.Framework.Mvc.Html;
3
4 <div style="width:100%; text-align:right">
5 <script language="javascript" type="text/javascript">
6
7 function SubmitDefaultForm() {
8 document.forms[0].submit();
9 }
10
11 function GetPageNumberCtrl() {
12 return document.getElementById("@Html.IdFor(m => m.PageNumber)");
13 }
14
15 function FirstPage() {
16 var hidenCtrl = GetPageNumberCtrl();
17 if (hidenCtrl != null) {
18 hidenCtrl.value = 1;
19 }
20 SubmitDefaultForm();
21 }
22
23 function PreviousPage(){
24 var hidenCtrl = GetPageNumberCtrl();
25 if (hidenCtrl != null) {
26 hidenCtrl.value = parseInt(hidenCtrl.value) - 1;
27 }
28 SubmitDefaultForm();
29 }
30
31 function NextPage() {
32 var hidenCtrl = GetPageNumberCtrl();
33 if (hidenCtrl != null) {
34 hidenCtrl.value = parseInt(hidenCtrl.value) + 1;
35 }
36 SubmitDefaultForm();
37 }
38
39 function LastPage(){
40 var hidenCtrl = GetPageNumberCtrl();
41 if (hidenCtrl != null) {
42 hidenCtrl.value = "@Model.TotalPageCount";
43 }
44 SubmitDefaultForm();
45 }
46
47 function ChangeTo(toPage){
48 var hidenCtrl = GetPageNumberCtrl();
49 if (hidenCtrl != null) {
50 hidenCtrl.value = toPage;
51 }
52 SubmitDefaultForm();
53 }
54
55 </script>
56 @Html.HiddenFor(m=>m.PageNumber)
57 記錄數:<span style="color:Red">@Model.TotalItemsCount</span>
58 頁碼:<span style="color:Red">@Model.PageNumber/@Model.TotalPageCount</span>
59
60 @if(Model.PageNumber <= 1)
61 {
62 @:[首頁]
63 @:[上一頁]
64 }
65 else
66 {
67 <a href="javascript:FirstPage();">[首頁]</a>
68 <a href="javascript:PreviousPage();">[上一頁]</a>
69 }
70
71 @if (Model.PageNumber >= Model.TotalPageCount)
72 {
73 @:[下一頁]
74 @:[末頁]
75 }
76 else
77 {
78 <a href="javascript:NextPage();">[下一頁]</a>
79 <a href="javascript:LastPage();">[末頁]</a>
80 }
81
82 跳到第
83 <select onchange="ChangeTo(this.options[this.options.selectedIndex].value);">
84 @for(int i = 1;i <= Model.TotalPageCount; i++)
85 {
86 var selected = "";
87 if(i == Model.PageNumber)
88 {
89 selected = "selected='selected'";
90 }
91 <option value='@i' @selected >@i</option>
92 }
93 </select>
94 頁
95
96 </div>
第一行用於描述模板裏面Model的類型，就是我們前面定義的Pager，注意修改Namespace。第二行跟第12行有關係，具體請看《在MVC3 中給HtmlHelper 添加擴展（Extension）來消除魔鬼代碼》，如果不想看的話，也沒關係，直接把第2行刪除，把第12行改爲return document.getElementById("Pager.PageNumber");。如果還想使用第12行代碼，那麼把下面這個擴展放到你的項目裏：
View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Linq.Expressions;
using System.Web.Mvc;
namespace YourProject.Mvc.Html
{
public static class HtmlHelperExtensions
{
public static string IdFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
{
return html.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));
}
public static string NameFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
{
return html.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression));
}
}
}
同樣需要注意修改Name space。
在頁面Model裏面這樣寫：
public class UserListModel : ModelBase
{
public string KeyWord { get; set; }
public IEnumerable<User> UserList;
public Pager Pager { get; set; }
}
在Controller裏面這樣用：
Pager pager = new Pager();
model.Pager = pager;
model.UserList = _userService.GetPage(string.Empty, pager);
return View(model);
_userService.GetPage(string.Empty, pager)裏面會對Pager的各個屬性進行賦值，點擊分頁鏈接的時候，當前頁碼的數據會通過MVC3直接放到pager.PageNumber裏面。
需要顯示分頁的頁面視圖這麼寫：@Html.EditorFor(m => m.Pager, "Pager")就可以把分頁控件顯示在頁面上了。
就這麼多吧，不明白可以隨時問我：）