.net MVC 中提供了一个分页组件“MvcPager”，用起来还算方便，实用性较强。
简单写一下使用方法，如有不足的地方，请各位大大给小弟指正出来。
一、准备工作
使用这个组件需要 MvcPager.dll 与 MvcPager.js
下载地址：http://pan.baidu.com/s/1jI5BpKa
二、代码
1、项目引用MvcPager.dll
2、在页面分页显示，首先需要一些数据，这里创建了一个实体 LoginModel 包含用户名、密码两个属性，代码如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebTest.Models { public class LoginModel { /// <summary> /// 用户名 /// </summary> public string UserName { get; set; } /// <summary> /// 密码 /// </summary> public string Pwd { get; set; } } }
3、控制器中写一个返回实体列表（列表为“PagedList”）的方法，代码如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Webdiyer.WebControls.Mvc; using WebTest.Models; namespace WebTest.Controllers { public class LoginController : Controller { /// <summary> /// 实体列表 /// </summary> /// <returns></returns> public ActionResult PageTest(int pageIndex = 1) { int totalCount = 200; int pageSize = 10; List<LoginModel> userList = new List<LoginModel>(); for (int i = 1; i <= totalCount; i++) { LoginModel model = new LoginModel(); model.UserName = "用户" + i; model.Pwd = i.ToString(); userList.Add(model); } PagedList<LoginModel> pList = userList.ToPagedList(pageIndex, pageSize); pList.PageSize = pageSize; pList.TotalItemCount = totalCount; pList.CurrentPageIndex = pageIndex; return View(pList); } } }
4、如果需要 使用跳转按钮功能 则页面要添加 MvcPager.js，如果不需要则不用添加了。 视图代码如下：
@using WebTest.Models; @using Webdiyer.WebControls.Mvc; @model PagedList<LoginModel> @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>PageTest</title> <style type="text/css"> /*分页容器 主体样式*/ .pager { padding:10px; } /*可用的按钮*/ .able { margin: 0 2px; padding: 3px 10px; border: 1px solid #ddd; background-color: #fff; color: #777; cursor: default; } /*不可用的按钮*/ .disable { margin: 0 2px; padding: 3px 10px; border: 1px solid #ddd; background-color: #fff; color: #777; cursor:default; } /*当前按钮*/ .current { margin: 0 2px; padding: 3px 10px; border: 1px solid #337ab7; background-color: #337ab7; color: #fff; cursor: default; } </style> </head> <body> <div style="padding:10px;"> @foreach(var item in Model) { <table> <tr> <td style="130px;"> 名称： @item.UserName </td> <td> 密码： @item.Pwd </td> </tr> </table> } </div> @Html.Pager(Model, new PagerOptions { Id = "pager", PageIndexParameterName = "pageIndex",//控制器参数 ContainerTagName = "span",//分页容器形式（默认好像是div） CssClass = "pager",//容器css class ShowMorePagerItems = false,//“更多”按钮不显示 CurrentPagerItemTemplate = "<span class="current">{0}</span>",//当前按钮 模版 DisabledPagerItemTemplate = "<span class="disable">{0}</span>",//不可用按钮 模版 PagerItemTemplate = "<span class="able">{0}</span>",//可用按钮 模版 FirstPageText = "首页", PrevPageText = "上一页", NextPageText = "下一页", LastPageText = "末页", PageIndexBoxId = "pagebox", GoToButtonId = "goBtn" } ) <input type="text" id="pagebox" /> <button id="goBtn">跳转</button> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/MvcPager.min.js"></script> <script type="text/javascript"> $(function () { $("#goBtn").click(function () { var pager = Webdiyer.MvcPagers.getById("pager"); if (pager != null) { pager.goToPage($("#pagebox").val()); } }); }); </script> </body> </html>
PagerOptions 有一些属性（自行百度，都能看明白），代码里我只写了几个常用的
下面的几个都是分页组件的模版(分页按钮本身都是a标签，加上模版就是在a标签外面套上模版，下面的几个就是 a标签外面套了一个样式分别为current、disableable的span标签 这样能让分页组件变得好看一些^_^)
CurrentPagerItemTemplate = "<span class="current">{0}</span>",//当前按钮 模版
DisabledPagerItemTemplate = "<span class="disable">{0}</span>",//不可用按钮 模版（比如当前页为第一页时，“上一页”、“首页” 这两个按钮就是“不可用按钮”）
PagerItemTemplate = "<span class="able">{0}</span>",//可用按钮 模版
如果要加上跳转按钮功能，则需要在页面引用jquery与MvcPager.js，
PageIndexBoxId = "pagebox", //指向文本框
GoToButtonId = "goBtn"//指向按钮
并加入 上面代码中的js就可以啦。
5、运行后如下图：
试了下 可以顺利切换。^_^