最近接触了一下MvcPager,昂。。。来做个笔记吧
其实，我喜欢前后端分离，分页这种东西前端负责的地方，后端不用顾问，这里的MvcPager有点让我想起服务器控件，毕竟用到了HtmlHelper。
但是挺方便的。。以前我们写分页，后端会封装一Page<T>类，现在我们可以用MvcPager给我们提供好的PageList<T>，功能有点类似，不过MvcPager的功能要强大
一、使用MvcPager这个控件，需要以下支持
1.后端MvcPager.dll引用:
2.前端需要
Css:pagerstyles.css,以及其他主题样式 图片等（PS:我的Demo是用的bootstrap）
Js:Jq,jquery.unobtrusive-ajax.min.js,MvcPager.js(PS:同步的分页不需要全部引用，异步的分页是需要引用的，这里我们暂时都先引用哈)
二、利用MvcPager提供的方法ToPageList进行分页查询，取出数据，返回给前台进行展示
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.UI.WebControls;
using Controllers.Extend;
using Model;
using Webdiyer.WebControls.Mvc; namespace Controllers.Controllers
{
public class MvcPagerController : BaseController
{
public ActionResult Search(int pageIndex = , string loginName = null)
{
int pageSize = ; IQueryable<UserInfo> userInfoList = CurrentBllSession.UserInfoBll.GetIQueryable();
if (!string.IsNullOrWhiteSpace(loginName))
{
userInfoList = userInfoList.Where(a => a.LoginName.Contains(loginName));
}
PagedList<UserInfo> userInfoPagedList = userInfoList.OrderBy(a => a.AddTime).ToPagedList(pageIndex, pageSize); ViewData["loginName"] = loginName;
return View("Index", userInfoPagedList);
} public ActionResult Delete(int id,int pageIndex,string loginName)
{
CurrentBllSession.UserInfoBll.Delete(new UserInfo() {UserInfoId = id}); return RedirectToAction("Search",new{ pageIndex=pageIndex,loginName=loginName});
}
}
}
这里返回PageList<UserInfo>对象给前台的强类型视图，注意这里的form的method=“get”,因为分页条的链接是基于url来进行访问后台的，搜索的参数都是通过url带过去的，如果变为post，那么搜索的功能将会失效。
@{
Layout = null;
}
@using Model;
@using Webdiyer.WebControls.Mvc
@model PagedList<UserInfo>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Scripts/MvcPager/pagerstyles.css" rel="stylesheet" />
</head>
<body>
@*查询*@
<div style="width:260px;margin:0 auto;">
<form id="searchForm" action="/MvcPager/Search" method="get">
<span>用户名：</span>
<input type="text" name="loginName" id="title" value="@Request.QueryString["loginName"]" style="width:120px" />
<input type="submit" value="搜索" />
</form>
</div>
<br/>
@*列表-分页*@
<div style="width:700px;margin:0 auto;">
<table class="table table-bordered table-striped">
<tr>
<th>
用户名
</th>
<th>
密码
</th>
<th>
创建时间
</th>
<th>
操作
</th>
</tr>
@{
string loginName = (string)(ViewData["loginName"] ?? "");
for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>
@Model[i].LoginName
</td>
<td>
@Model[i].LoginPassword
</td>
<td>
@Model[i].AddTime.ToString("yyyy-MM-dd")
</td>
<td>
<a href="/MvcPager/Delete/@Model[i].UserInfoId?pageIndex=@Model.CurrentPageIndex&loginName=@loginName">删除</a>
</td>
</tr>
}
}
</table>
<div class="text-center">
@Html.Pager(Model, new PagerOptions
{
//ControllerName = "MvcPager",//默认的Controller和Action是由Url来决定，这里也可以手动更改
//ActionName = "Search",
PageIndexParameterName = "pageIndex",
ContainerTagName = "ul",
FirstPageText = "首页",
PrevPageText = "上一页",
NextPageText = "下一页",
LastPageText = "末页",
CssClass = "pagination",
PagerItemTemplate = "<li>{0}</li>",
CurrentPagerItemTemplate = "<li class='active'><a href='#'>{0}</a></li>",
DisabledPagerItemTemplate = "<li class='disabled'><a>{0}</a></li>",
Id = "bootstrappager",
})
</div>
</div>
</body>
</html>
<script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Content/Scripts/MvcPager/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Content/Scripts/MvcPager/MvcPager.js"></script>
主要是这张图，设置分页条的代码，这里用到了MvcPager的分页功能,是对HtmlHelper的扩展
三、效果图
