MvcPager 概述

MvcPager分页控件是在ASP.NET MVC Web应用程序中实现分页功能的一系列扩展方法，该分页控件的最初的实现方法借鉴了网上流行的部分源代码， 尤其是ScottGu的PagedList<T>类和相关方法，经过站长不断完善和改进后推出的比较成熟而且功能强大的ASP.NET MVC分页解决方案。

MvcPager主要功能：

1. 实现最基本的url route分页功能；
2. 支持手工输入或选择页索引并对输入的页索引进行有效性验证；
3. 支持使用jQuery实现Ajax分页，生成的Html代码更精简；
4. Ajax分页模式下支持在分页过程中通过GET或POST方法提交表单数据，实现查询功能；
5. Ajax分页模式下支持浏览器历史记录功能（暂不支持IE7及早期版本和Opera浏览器）；
6. Ajax分页模式下，若客户端浏览器不支持或禁用Javascript功能时优雅降级为普通分页
7. 搜索引擎友好，无论是普通分页还是Ajax分页，搜索引擎都可以直接搜索到所有页面。
8. 支持最新的ASP.NET MVC 4.0 和 5.0 RC1；
9. 支持IE、Firefox、Opera、Chrome及Safari等常用浏览器；

MvcPager 2.0 更新说明

MvcPager 2.0版在原1.5版的基础上进行了比较大的升级，重写了大量代码，新增了不少功能，优化了最终生成的html代码，尤其是在Ajax分页模式下，最终生成的html代码比1.5版减少了二倍以上，且html代码更符合html 5规范，主要更新说明如下：

• 新增 IPagedList<T>接口；
• 新增 DisplayNameFor HtmlHelper扩展方法使其支持 IPagedList<T>和PagedList<T>；
• Ajax分页模式时浏览器历史记录支持（暂不支持IE7以下及Opera浏览器，下一版本中完善）；
• Ajax分页模式下支持在分页过程中，通过GET和POST自动提交查询条件，实现多条件查询功能；
• ToPagedList扩展方法新增了当前页索引超出总页数时改变当前页索引为最后一页的页索引，同时返回最后一页数据的功能；
• 当MvcPager当前使用的路由定义中页索引参数的默认值为UrlParameter.Optional或页索引参数在路由参数中不存在时，生成的首页url将自动移除页索引参数，使其与默认首页url保持一致，利于SEO优化；
• PagerOptions新增FirstPageRouteName属性，指定第一页默认的路由名称，去掉页索引参数，优化SEO；
• 解决分页时url中中文参数被反复编码的bug。
• 移除PagerOptions.UseJqueryAjax属性；
• PagerOptions的SeperatorHtml属性更名为PagerItemsSeperator；
• 移除HtmlHelper的AjaxPager扩展方法，Ajax分页模式统一使用AjaxHelper的Pager扩展方法，不再支持Microsoft Ajax，仅支持jQuery，与官方保持一致；
• Ajax.Pager扩展方法不再接受AjaxOptions参数，改为MvcAjaxOptions，MvcAjaxOptions继承自AjaxOptions;
• MvcAjaxOptions新增属性EnablePartialLoading，用于支持Ajax分页模式下局部加载功能；
• MvcAjaxOptions新增属性DataFormId，用于标识在Ajax分页模式下，分页时向服务器端通过Ajax提交的数据所在的Form和ID，用于实现Ajax分页模式下的查询功能；
• 解决了PagerOptions.AlwaysShowFirstLastPageNumber为true时，第一页页索引按钮和更多页按钮显示不正确的问题；
• 新增了两个PagedList构造函数；
• 为IEnumerable<T>接口添加ToPagedList扩展方法；
• 新增HtmlHelper扩展方法RegisterMvcPagerScriptResource，用于注册MvcPager的客户端jQuery插件脚本；
• MvcPager 2.0 for ASP.NET 4.0目标编译框架为.Net Framework 4.0，可用于目标框架为.Net Framework 4.0或4.5的ASP.NET MVC 4.0项目中；
• 取消对ASP.NET MVC 2.0的支持，仅支持ASP.NET MVC 3.0以上版本；

升级说明：

从MvcPager 1.5升级到2.0时，需注意以下事项：

1. 原HtmlHelper的AjaxPager扩展方法已移除，需要改为使用AjaxHelper的Pager扩展方法；
2. 当需要使用页索引输入或下拉框以及使用Ajax分页模式时，必须用Html.RegisterMvcPagerScriptResource方法注册客户端脚本，否则无法正常分页；
3. 使用AjaxHelper的Pager扩展方法时，原AjaxOptions参数需改为MvcAjaxOptions；
4. PagerOptions的SeperatorHtml属性改为PagerItemsSeperator；

运行最低需求：

1. jQuery 1.7及以上版本；（仅当启用页索引输入或选择框以及使用Ajax分页模式时才必需）
2. ASP.NET MVC 4.0及以上版本；

2.0版已知问题：

1. Ajax分页模式下浏览器历史记录支持功能暂不支持IE7以下及Opera浏览器；
2. Url中值为空的参数在分页后将被从Url中去除；如：/articles/show/2?cls=news&type= 在分页后type参数将丢失，Url变为：/articles/show/3?cls=news
3. 为AjaxForm使用Ajax分页查询功能时，web.config中的UnobtrusiveJavaScriptEnabled必须设为true（默认），否则会导致分页时数据被加载两次；

　首先右击项目-管理NuGet程序包，联机搜索MvcPager,并安装

 1 @model PagedList<string>
 2
 3 <h5>Digg style:</h5>
 4 @Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="diggpager"})
 5 <h5>meneame style:</h5>
 6 @Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="menepager"})
 7 <h5>Flickr style:</h5>
 8 @Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="flickrpager"})
 9 <h5>Black style:</h5>
10 @Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="blackpager"})
11 <h5>Gray style:</h5>
12 @Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="graypager"})
13 <h5>badoo style:</h5>
14 @Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",ShowPageIndexBox = true,CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="badoopager"})
15 @section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

View

 1 /* digg style*/
 2 div#diggpager {padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center}
 3 div#diggpager a {border-right: #aaaadd 1px solid; padding-right: 5px; border-top: #aaaadd 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #aaaadd 1px solid; color: #000099; padding-top: 2px; border-bottom: #aaaadd 1px solid; text-decoration: none}
 4 div#diggpager a:hover {border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid}
 5 div#diggpager a:active {border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid}
 6 div#diggpager span.current {border-right: #000099 1px solid; padding-right: 5px; border-top: #000099 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #000099 1px solid; color: #fff; padding-top: 2px; border-bottom: #000099 1px solid; background-color: #000099}
 7 div#diggpager a.disabled {border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid}
 8 /* meneame style*/
 9 div#menepager {padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 3px; margin: 3px; color: #ff6500; padding-top: 3px;; text-align: center}
10 div#menepager a {border-right: #ff9600 1px solid; padding-right: 7px; background-position: 50% bottom; border-top: #ff9600 1px solid; padding-left: 7px; background-image: url(images/meneame.jpg); padding-bottom: 5px; border-left: #ff9600 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff9600 1px solid; text-decoration: none}
11 div#menepager a:hover {border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794}
12 div#menepager a:active {border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794}
13 div#menepager span.current {border-right: #ff6500 1px solid; padding-right: 7px; border-top: #ff6500 1px solid; padding-left: 7px; font-weight: bold; padding-bottom: 5px; border-left: #ff6500 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff6500 1px solid; background-color: #ffbe94}
14 div#menepager a.disabled {border-right: #ffe3c6 1px solid; padding-right: 7px; border-top: #ffe3c6 1px solid; padding-left: 7px; padding-bottom: 5px; border-left: #ffe3c6 1px solid; color: #ffe3c6; margin-right: 3px; padding-top: 5px; border-bottom: #ffe3c6 1px solid}
15 /*flickr style*/
16 div#flickrpager {padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px;; text-align: center}
17 div#flickrpager a {border: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; padding-left: 6px; padding-bottom: 2px;  color: #0061de; margin-right: 3px; padding-top: 2px; text-decoration: none}
18 div#flickrpager a:hover {border: #000 1px solid;background-image: none; color: #fff;background-color: #0061de}
19 div#flickrpager a:active {border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de}
20 div#flickrpager span.current {padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #ff0084; margin-right: 3px; padding-top: 2px}
21 div#flickrpager a.disabled {padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px}
22 /* black-red style*/
23 div#graypager{font-size: 11px; color: #fff; font-family: tahoma, arial, helvetica, sans-serif; background-color: #3e3e3e;text-align: center;padding:6px 0px}
24 div#graypager a {padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #3e3e3e; text-decoration: none}
25 div#graypager a:hover {color: #fff; background-color: #ec5210}
26 div#graypager a:active {color: #fff; background-color: #ec5210}
27 div#graypager span.current {padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #313131}
28 div#graypager a.disabled {padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #868686; padding-top: 2px; background-color: #3e3e3e}
29 /*black style*/
30 div#blackpager {padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 10px; margin: 3px; color: #a0a0a0; padding-top: 10px; background-color: #000; text-align: center}
31 div#blackpager a {border-right: #909090 1px solid; padding-right: 5px; background-position: 50% bottom; border-top: #909090 1px solid; padding-left: 5px; background-image: url(images/bar.gif); padding-bottom: 2px; border-left: #909090 1px solid; color: #c0c0c0; margin-right: 3px; padding-top: 2px; border-bottom: #909090 1px solid; text-decoration: none}
32 div#blackpager a:hover {border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(images/invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040}
33 div#blackpager a:active {border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(images/invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040}
34 div#blackpager span.current {border-right: #ffffff 1px solid; padding-right: 5px; border-top: #ffffff 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ffffff 1px solid; color: #ffffff; margin-right: 3px; padding-top: 2px; border-bottom: #ffffff 1px solid; background-color: #606060}
35 div#blackpager a.disabled {border-right: #606060 1px solid; padding-right: 5px; border-top: #606060 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #606060 1px solid; color: #808080; margin-right: 3px; padding-top: 2px; border-bottom: #606060 1px solid}
36 /*badoo style*/
37 div#badoopager {padding-right: 0px; padding-left: 0px; font-size: 13px; padding-bottom: 10px; color: #48b9ef; padding-top: 10px; font-family: arial, helvetica, sans-serif; background-color: #fff; text-align: center}
38 div#badoopager a {border-right: #f0f0f0 2px solid; padding-right: 5px; border-top: #f0f0f0 2px solid; padding-left: 5px; padding-bottom: 2px; margin: 0px 2px; border-left: #f0f0f0 2px solid; color: #48b9ef; padding-top: 2px; border-bottom: #f0f0f0 2px solid; text-decoration: none}
39 div#badoopager a:hover {border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid}
40 div#badoopager a:active {border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid}
41 div#badoopager span.current {border-right: #ff5a00 2px solid; padding-right: 5px; border-top: #ff5a00 2px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ff5a00 2px solid; color: #fff; padding-top: 2px; border-bottom: #ff5a00 2px solid; background-color: #ff6c16}
42 div#badoopager a.disabled {display: none}
43 div#badoopager input[type=text]{width:30px}

pagerstyles.css

public ActionResult ApplyCSS(int id = 1)
{
    using (var db = new DataContext())
    {
        return View(new PagedList>string>(new string[0], id, 1, 80));
    }
}

Controller

应用样式时应尽量使用CSS的ID选择器，避免用class，因为ID选择器优先级高，应用的样式有高优先级，避免其它定义的样式影响到当前的样式。

该示例使用的样式来自网上，感谢原作者的贡献。样式定义在示例项目中content目录下的pagerstyles.css文件中。