最近接触了一下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进行分页查询，取出数据，返回给前台进行展示
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 using System.Web.Routing; 7 using System.Web.UI.WebControls; 8 using Controllers.Extend; 9 using Model; 10 using Webdiyer.WebControls.Mvc; 11 12 namespace Controllers.Controllers 13 { 14 public class MvcPagerController : BaseController 15 { 16 public ActionResult Search(int pageIndex = 1, string loginName = null) 17 { 18 int pageSize = 1; 19 20 IQueryable<UserInfo> userInfoList = CurrentBllSession.UserInfoBll.GetIQueryable(); 21 if (!string.IsNullOrWhiteSpace(loginName)) 22 { 23 userInfoList = userInfoList.Where(a => a.LoginName.Contains(loginName)); 24 } 25 PagedList<UserInfo> userInfoPagedList = userInfoList.OrderBy(a => a.AddTime).ToPagedList(pageIndex, pageSize); 26 27 ViewData["loginName"] = loginName; 28 return View("Index", userInfoPagedList); 29 } 30 31 public ActionResult Delete(int id,int pageIndex,string loginName) 32 { 33 CurrentBllSession.UserInfoBll.Delete(new UserInfo() {UserInfoId = id}); 34 35 return RedirectToAction("Search",new{ pageIndex=pageIndex,loginName=loginName}); 36 } 37 } 38 }
这里返回PageList<UserInfo>对象给前台的强类型视图，注意这里的form的method=“get”,因为分页条的链接是基于url来进行访问后台的，搜索的参数都是通过url带过去的，如果变为post，那么搜索的功能将会失效。
1 @{ 2 Layout = null; 3 } 4 @using Model; 5 @using Webdiyer.WebControls.Mvc 6 @model PagedList<UserInfo> 7 <!DOCTYPE html> 8 9 <html> 10 <head> 11 <meta name="viewport" content="width=device-width" /> 12 <title>Index</title> 13 <link href="~/Content/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> 14 <link href="~/Content/Scripts/MvcPager/pagerstyles.css" rel="stylesheet" /> 15 </head> 16 <body> 17 @*查询*@ 18 <div style="260px;margin:0 auto;"> 19 <form id="searchForm" action="/MvcPager/Search" method="get"> 20 <span>用户名：</span> 21 <input type="text" name="loginName" id="title" value="@Request.QueryString["loginName"]" style="120px" /> 22 <input type="submit" value="搜索" /> 23 </form> 24 </div> 25 <br/> 26 27 @*列表-分页*@ 28 <div style="700px;margin:0 auto;"> 29 <table class="table table-bordered table-striped"> 30 <tr> 31 <th> 32 用户名 33 </th> 34 <th> 35 密码 36 </th> 37 <th> 38 创建时间 39 </th> 40 <th> 41 操作 42 </th> 43 </tr> 44 45 @{ 46 string loginName = (string)(ViewData["loginName"] ?? ""); 47 48 for (int i = 0; i < Model.Count; i++) 49 { 50 <tr> 51 <td> 52 @Model[i].LoginName 53 </td> 54 <td> 55 @Model[i].LoginPassword 56 </td> 57 <td> 58 @Model[i].AddTime.ToString("yyyy-MM-dd") 59 </td> 60 <td> 61 <a href="/MvcPager/Delete/@Model[i].UserInfoId?pageIndex=@Model.CurrentPageIndex&loginName=@loginName">删除</a> 62 </td> 63 </tr> 64 } 65 } 66 67 </table> 68 69 <div class="text-center"> 70 @Html.Pager(Model, new PagerOptions 71 { 72 //ControllerName = "MvcPager",//默认的Controller和Action是由Url来决定，这里也可以手动更改 73 //ActionName = "Search", 74 PageIndexParameterName = "pageIndex", 75 ContainerTagName = "ul", 76 FirstPageText = "首页", 77 PrevPageText = "上一页", 78 NextPageText = "下一页", 79 LastPageText = "末页", 80 CssClass = "pagination", 81 PagerItemTemplate = "<li>{0}</li>", 82 CurrentPagerItemTemplate = "<li class='active'><a href='#'>{0}</a></li>", 83 DisabledPagerItemTemplate = "<li class='disabled'><a>{0}</a></li>", 84 Id = "bootstrappager", 85 }) 86 </div> 87 </div> 88 89 </body> 90 </html> 91 <script src="~/Content/Scripts/jquery-2.0.3.min.js"></script> 92 <script src="~/Content/Scripts/MvcPager/jquery.unobtrusive-ajax.min.js"></script> 93 <script src="~/Content/Scripts/MvcPager/MvcPager.js"></script>
主要是这张图，设置分页条的代码，这里用到了MvcPager的分页功能,是对HtmlHelper的扩展
三、效果图
