用@Html.EditorFor在MVC3中封装带表单(Form)提交的分页控件（通用代码）
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")就可以把分页控件显示在页面上了。
就这么多吧，不明白可以随时问我：）
