最近接觸了一下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="width: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="width:120px" /> 22 <input type="submit" value="搜索" /> 23 </form> 24 </div> 25 <br/> 26 27 @*列表-分頁*@ 28 <div style="width: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的擴展
三、效果圖
