首页 > 代码库 > MVCPager使用
MVCPager使用
一、背景
用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=http://www.mamicode.com/"~/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); } }}
如果有遗漏，请及时通知我补充；
MVCPager使用