.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 = )
{
int totalCount = ;
int pageSize = ; List<LoginModel> userList = new List<LoginModel>();
for (int i = ; 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="width: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、运行后如下图：
试了下 可以顺利切换。^_^