一、背景
用MVC來開發后台管理系統，主要是由於開發后台的時候，遇到列表分頁時，對於初學者有時候會不知所措，網上的的mvc分頁五花百門，而且文章都是不全面的，如果你不想花太多時間在這里，不妨用MVCpager，對於MVCPager網上也有很多文章介紹，都是不全面而且凌亂，本文將全面介紹，旨在統一一個MVCPager介紹文章，省去你看文檔的麻煩（對初學者來說是不省時間的），但是MVCPager有人在維護，版本不斷更新，基於此，本文章適用於想快速搭建MVC列表分頁的開發者，有經驗的開發者也可以參考下；
二、操作步驟
1、網上有PageList，但本文只談MVCPager，現在用得比較多的是2.0、3.0版本，用NuGet獲取的話，目前是2.01版本，現在先來介紹2.01版本，先從NUGET獲取，選擇下面中文版本，上面的是1.0版本，本章主要討論2.0版本，如圖：
2、創建后台controller，控制器返回時判斷是否是Ajax異步請求，因為列表請求都是異步請求，這里為免參數過長，添加了參數對象，參數過長往往會有數據泥團和數據重復的壞味道，這里需要注意因為MVCPager前端列表控件接受的是IPageList接口的對象，這里不能強制轉換，你也可以新建一個實體實現Ipagelist接口來一個映射，將實體映射到你新建的類，但有點麻煩，這里供給那些不想太多時間的開發者，所以我這里封裝了一個擴展方法泛型方法，避免代碼重復，因為我這里已經封裝了一個自己的pagelist<T>泛型集合，我也可以用PageList<T>實現IPageList接口，這里是應用接口的一個很好的例子，但為了省時間，做一個適配，你也可以使用你的List<T>集合，假如你沒有封裝自己的PageList，直接創建一個PagedList對象，只要賦值給CurrentPageIndex、TotalItemCount和PageSize即可，注意PagedList構造函數里面賦值indexPage=1，PageSize設置實際的頁大小，如圖：
擴展方法
3、頁面創建Index視圖，Index_Partial視圖，這里需要添加引用jquery.unobtrusive-ajax.min.js，你可以通過NeGet控制台獲得，命令是Install-Package Microsoft.jQuery.Unobtrusive.Ajax –version 3.0.0，並且在頁面Index_Partial中using Webdiyer.WebControls.Mvc；
4、在Index視圖中添加注冊@{Html.RegisterMvcPagerScriptResource();}，但如果頁面多了也會有代碼重復的壞味道，於是我就在Razor引擎擴展方法里面注冊一下，再調用Partial，這時候在index_Partial，添加列表代碼，添加插件方法，需要引用Using Webdiyer.WebControls.Mvc，在Index視圖中用<div id=‘portlet-body’>包裹着，這里的id需要在MvcAjaxOptions選型中綁定，用於更新div，這個很重要，如果你有form，當你點擊頁面編號時需要帶上條件，那么需要在DataFormID綁定form的id，這個時候就可以運行你的項目了；
5、另外關於參數對象，獲取你還想了解一下，那么我這里的封裝，給大家展現一下，在接收參數的時候，參數是http請求時認name的而這里封裝的參數對象，在頁面需要命名為Params.參數名，這里才能接收到，另外在Index_Partial的Ajax.Pager方法選項PageIndexParameterName=“indexpage”設置頁數名字要和Query對象的一致，不然接收不到；
6、說了那么多沒有一些代碼復制好像也不爽，那么就將上面對應的代碼貼出來；
using Bo.MiniCatchService; using Bo.Model; using Bo.Web.WorkRecordManage.Base; using Bo.Web.WorkRecordManage.Models.UserModel; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Webdiyer.WebControls.Mvc; namespace Bo.Web.WorkRecordManage.Controllers { public class MvcPagerController : Controller { private readonly UserService _UserService; public MvcPagerController(UserService UserService) { this._UserService = UserService; } public ActionResult Index(Query<User, UserParam> query) { try { query.List = this._UserService.GetPageList(e => true, query.PageIndex, query.PageSize).AsPagedList<User>(); } catch (Exception ex) { throw; } if (Request.IsAjaxRequest()) return View("Index_Partial", query); else return View(query); } } }
public static class PagerListExtentsions { public static PagedList<T> AsPagedList<T>(this PageList<T> pagelist) { var pdl = new PagedList<T>(pagelist.Items, 1, pagelist.PageSize); pdl.CurrentPageIndex = pagelist.PageIndex; pdl.PageSize = pagelist.PageSize; pdl.TotalItemCount = pagelist.Total; return pdl; } }
public class Query<TModel,TParam> where TParam :new() { public Query() { this.PageIndex = 1; this.PageSize = 10; //this._Total = 0; this.Params = new TParam(); } public int PageIndex { get; set; } public int PageSize { get; set; } //public int _Total { get; set; } public string _ViewPartial { get; set; } public TParam Params { get; set; } public IEnumerable<TModel> List { get; set; } public bool IsHasCount(){ return this.List != null; } }
@model Query<Bo.Model.User, Bo.Web.WorkRecordManage.Models.UserModel.UserParam> @using Bo.Web.WorkRecordManage.Base @using Webdiyer.WebControls.Mvc @{ ViewBag.Title = "Index"; } <div class="page-content"> <div class="container-fluid"> <div class="row-fluid"> <div style="padding-top:20px;" class="span12"> <div class="alert alert-success"> <span class="label label-important">NOTE:</span> 請按下方提示操作 </div> @using (Html.BeginForm("Import", "User", FormMethod.Post, new { @id = "UserImport" })) { @Html.ImportFileFor("UserImport", "User", "Import", "用戶導入") <a href="~/ExcelTemplate/用戶導入模板.xlsx" class="btn purple">下載模板 <i class="m-icon-swapright m-icon-white"></i></a> } <div id="portlet-body"> @Html.RegisterPagerPartial("Index_Partial", Model) </div> </div> </div> </div> </div>
@model Query<Bo.Model.User, Bo.Web.WorkRecordManage.Models.UserModel.UserParam> @using Bo.Web.WorkRecordManage.Base @using QD.Framework; @using Webdiyer.WebControls.Mvc @{ Layout = null; } <div class="portlet box grey"> <div class="portlet-title"> <div class="caption"><i class="icon-cogs"></i>用戶信息</div> <div class="tools"> </div> </div> <div class="portlet-body flip-scroll"> <table class="table table-bordered table-hover table-striped table-condensed flip-content"> <thead> <tr> <th>名稱</th> <th>工號</th> <th>創建時間</th> <th>郵件地址</th> <th>操作</th> </tr> </thead> <tbody> @if (Model.IsHasCount()) { foreach (var item in Model.List) { <tr> <td> @if (item.Name.IsNullOrWhiteSpace()) { <button onclick="SetName('@item.UserID')" class="btn red mini">設置名字</button> } else { @item.Name } </td> <td>@item.UserID</td> <td>@item.CreateTime</td> <td> @if (item.Email.IsNullOrWhiteSpace()) { <button onclick="SetEmail('@item.UserID')" class="btn red mini">設置郵箱地址</button> } else { @item.Email } </td> <td> <button type="button" onclick="Delete('@item.UserID')" class="btn red mini">刪除</button> <button type="button" onclick="checkIn('@item.JobNumber','@item.UserID')" class="btn green mini">獲取數據</button> </td> </tr> } } else { <p>暫無數據，系統沒10秒更新數據一次</p> } </tbody> </table> <div class="row-fluid"> @Ajax.Pager( (IPagedList)Model.List, new PagerOptions { AutoHide = false, PageIndexParameterName = "PageIndex", PrevPageText = "上頁", NextPageText = "下頁", FirstPageText = "首頁", LastPageText = "尾頁", PagerItemsSeperator = "", CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>" }, new MvcAjaxOptions { UpdateTargetId = "portlet-body", HttpMethod = "Post" }, new { id = "graypager" }) </div> </div> </div>
namespace Bo.Web.WorkRecordManage.Base { public static class BoRenderPartialExtensions { public static MvcHtmlString RegisterPagerPartial(this HtmlHelper htmlHelper, string partialViewName, object model) { htmlHelper.RegisterMvcPagerScriptResource(); return htmlHelper.Partial(partialViewName, model); } } }
三、需要注意的：很多人有時會使用@Html.Pager這時候是不能夠進行無刷新的，應該使用@ajax.Pager；
如果有遺漏，請及時通知我補充；