很多时候需要这样的功能，对表格进行分页、排序和检索。这个有很多实现的方式，有现成的表格控件、用前端的mvvm，用户控件。但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意。这里自己实现一次，功能不是高大全，但求一个清楚明白，也欢迎园友拍砖。前端是bootstrap3+jPaginate，后台基于membership。没什么难点。
先上效果图。
分页其实就是处理好 每页项目数、总项目数、总页数、当前页。为了方便复用，就先从仓库开始说起。
一、建立仓库
1.定义Ipager接口，需要分页的模型仓库继承这个接口
namespace Protal.Model.Abstract{ /// <summary> /// 分页处理 /// </summary> public interface IPager { /// <summary> /// 每页项目数 /// </summary> /// <value>The page item count.</value> int PageItemCount { get; set; } /// <summary> /// 总页数 /// </summary> /// <value>The totoal page.</value> int TotoalPage { get; } /// <summary> /// 显示的页数 /// </summary> /// <value>The display page.</value> int displayPage { get; set; } /// <summary> /// 满足条件的总数目 /// </summary> int Totalitem { get; set; } }}2.定义IUsersRepository，主要处理User 相关的业务逻辑。Find函数是主要的查询方法，order表示顺反排序。
public interface IUsersRepository : IPager { /// <summary> /// Post List /// </summary> /// <param name="order">Order Expression</param> /// <param name="filter">Filter Expression</param> /// <param name="skip">Records to skip</param> /// <param name="take">Records to take</param> /// <returns>List of users</returns> IEnumerable<User> Find(int order=0,string filter="", int skip = 0, int take = 10); /// <summary> /// Get single post /// </summary> /// <param name="name">User ID</param> /// <returns>User object</returns> User FindByname(string name); /// <summary> /// Add new user /// </summary> /// <param name="user">Blog user</param> /// <returns>Saved user</returns> User Add(User user); /// <summary> /// Update user /// </summary> /// <param name="user">User to update</param> /// <returns>True on success</returns> bool Update(User user); /// <summary> /// Save user profile /// </summary> /// <param name="user">Blog user</param> /// <returns>True on success</returns> bool SaveProfile(User user); /// <summary> /// Delete user /// </summary> /// <param name="username">User ID</param> /// <returns>True on success</returns> bool Remove(string username); }二、仓库的实现和绑定
主要方法：Membership的中的User和我们自定义的不一样，所以存在一个转换
public class UsersRepository : IUsersRepository { /// <summary> /// The _user List /// </summary> private List<User> _userList = new List<User>(); /// <summary> /// The _page item count /// </summary> private int _pageItemCount; /// <summary> /// The _display page /// </summary> private int _displayPage; /// <summary> /// The _usercount /// </summary> private int _usercount; /// <summary> /// The _total item /// </summary> private int _totalitem; /// <summary> /// 标记是否有查询条件 没有的话则返回全部数目 /// </summary> private Func<User, bool> _func; /// <summary> /// Gets or sets the users. /// </summary> /// <value>The users.</value> public List<User> Users { get { int count; var usercollection = Membership.GetAllUsers(0, 999, out count); if (count == _usercount) return _userList; _usercount = count; var members = usercollection.Cast<MembershipUser>().ToList(); foreach (var membershipUser in members)//这里存在一个转换 { _userList.Add(new User { Email = membershipUser.Email, Username = membershipUser.Username, //roles password }); } return _userList; } set { _userList = value; } } //查询public IEnumerable<User> Find(int order = 0, string filter = "", int skip = 0, int take = 10) { if (take == 0) take = Users.Count; //过滤 _func = string.IsNullOrEmpty(filter) ? (Func<User, bool>) (n => n.Username != "") : (n => n.Username.Contains(filter)); var users = Users.Where(_func).ToList(); //更新总数目 _totalitem = users.Count; users = order == 0 ? users.OrderBy(n => n.Username).ToList() : users.OrderByDescending(n => n.Username).ToList(); return users.Skip(skip).Take(take); } /// <summary> /// 每页项目数 /// </summary> /// <value>The page item count.</value> public int PageItemCount { get { if (_pageItemCount == 0) { _pageItemCount = ProtalConfig.UserPageItemCount; } return _pageItemCount; } set { _pageItemCount = value; } } /// <summary> /// 总页数 /// </summary> /// <value>The totoal page.</value> public int TotoalPage { get { var page = (int) Math.Ceiling((double) Totalitem/PageItemCount); return page==0?1:page; } } /// <summary> /// 显示的页数 /// </summary> /// <value>The display page.</value> public int displayPage { get { if (_displayPage == 0) { _displayPage = ProtalConfig.UserdisplayPage; } return _displayPage; } set { _displayPage = value; } } /// <summary> /// 满足条件的总数目 保持更新 /// </summary> /// <value>The total item.</value> public int Totalitem { get { if (_func == null) _totalitem = Users.Count; return _totalitem; } set { _totalitem = value; } }}ProtalConfig.UserdisplayPage 这里是通过配置实现一个默认页数，让用户可以再webconfig中更改行列的数目。
public static int UserPageItemCount { get { if (_userPageItemCount == 0) { _userPageItemCount = WebConfigurationManager.AppSettings["UserPageItemCount"] != null ? Convert.ToInt16(WebConfigurationManager.AppSettings["UserPageItemCount"]) : 5; } return _userPageItemCount; } set { _userPageItemCount = value; } }再进行绑定：
_kernel.Bind<IUsersRepository>().To<UsersRepository>();
三、控制器部分
我们需要两个页面，一个主页面Index，一个负责局部刷新的部分视图 Usertable
下面是主要的方法，主要逻辑都在在仓库中处理了。
[Authorize] public class UserManagerController : Controller { /// <summary> /// The _repository /// </summary> private Readonly IUsersRepository _repository; /// <summary> /// Initializes a new instance of the <see cref="UserManagerController"/> class. /// </summary> /// <param name="iRepository">The i repository.</param> public UserManagerController(IUsersRepository iRepository) { _repository = iRepository; } /// <summary> /// Indexes the specifIEd page index. /// </summary> /// <param name="pageIndex">Index of the page.</param> /// <returns>ActionResult.</returns> public ActionResult Index(int pageIndex=1) { VIEwBag.displayPage = _repository.displayPage; pageIndex = HandlePageindex(pageIndex); //支持地址栏直接分页 VIEwBag.CurrentPage = pageIndex; return VIEw(); } /// <summary> /// Users table. 分页模块 /// </summary> /// <param name="pageIndex">Index of the page.</param> /// <param name="order">The order.</param> /// <param name="filter">The filter str.</param> /// <returns>ActionResult.</returns> public ActionResult Usertable(int pageIndex = 1, int order = 0, string filter = "") { pageIndex = HandlePageindex(pageIndex); var skip = (pageIndex - 1) * _repository.PageItemCount; var users = _repository.Find(order,filter, skip, _repository.PageItemCount); //总用户数 VIEwBag.TotalUser = _repository.Totalitem; //总页数 VIEwBag.TotalPageCount = _repository.TotoalPage; ; return PartialVIEw(users); } /// <summary> /// 处理页数 防止过大或过小 /// </summary> /// <param name="index"></param> /// <returns></returns> private int HandlePageindex(int index) { var totoalpage = _repository.TotoalPage; if (index == 0) return 1; return index > totoalpage ? totoalpage : index; }}四、视图部分HTML jquery
1.Index.csHTML
<script src="~/Scripts/form.Js"></script><p class="container"> <h4 class="bottomline">管理用户</h4> <p> <button data-target="#adduser" ID="adduserbt" data-toggle="modal" class="btn btn-info btn-hover">新增用户</button> <button class="btn btn-danger" ID="deluser">删除</button> <span class="errorinfo"></span> <input type="search" class="pull-right" ID="usersearch" placeholder="搜索"/> </p> <p ID="userpart"> @HTML.Action("Usertable",new{pageIndex=VIEwBag.CurrentPage}) </p> <p ID="userpager"></p> <input type="hIDden" ID="dispalypage" value="@VIEwBag.displayPage"/> <input type="hIDden" ID="page" value="@VIEwBag.CurrentPage"/> <input type="hIDden" ID="currentpage" value="@VIEwBag.CurrentPage"/></p><p class="modal fade adduserBox"ID="adduser" tabindex="1" role="dialog" aria-hIDden="true"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hIDden="true" >×</button> <h4 class="modal-Title">Add new User</h4> </p> <p class="modal-body"> @{ HTML.RenderAction("Create","UserManager"); } </p> </p></p>@section Scripts { @Scripts.Render("~/bundles/jqueryval")}2.Usertable.csHTML,角色部分还未处理，这个表格更新之后，也会更新满足条件的用户数和新的总页数，触发Jpaginate重新分页一次。
@model IEnumerable<Protal.Model.Data.User.User> <table ID="usertable" class="table table-striped table-condensed table-hover table-bordered"> <tr> <th><input type="checkBox" ID="allcheck" /><label for="allcheck">全选</label></th> <th><a href="#" ID="usersort" data-order="0" class="glyphicon-sort">名称</a></th> <th>角色</th> <th>E-mail</th> </tr> <tbody> @foreach (var item in Model) { <tr> <td> <input type="checkBox" data-ID="@item.Username" /></td> <td> <a>@item.Username</a> </td> <td> @HTML.Raw(item.Role) </td> <td> @item.Email</td> </tr> }</tbody> <tfoot> <tr> <td colspan="4"> <span>@HTML.Raw("共"+VIEwBag.TotalUser+"人")</span> @*<span>@VIEwBag.TotalPageCount</span>*@ </td> </tr> </tfoot> </table> <input type="hIDden" ID="totoalpage" value="@VIEwBag.TotalPageCount"/>3.脚本
其中用到的像checkall，infoShow 都是自己扩展的一些简单的方法，用于全选和提示。
$(function () { var options = { dataType: 'Json', success: processjson }; pageagin($("#totoalpage").val()); //分页 function pageagin(totalcount) { $("#userpager").paginate({ count: totalcount, start: $("#page").val(), dispaly: $("#dispalypage").val(), boder: false, border_color: '#fff',//自己调整样式。 text_color: 'black', background_color: 'none', border_hover_color: '#ccc', text_hover_color: '#000', background_hover_color: '#fff', images: false, mouse: 'press', onChange: function (page) { //翻页 paging(page); $("#currentpage").val(page); } }); } //分页更新 function paging(page) { $.post("/Users/Usertable", { pageIndex: page, order: $("#userpart").attr("data-order"), filter: $.trim($("#usersearch").val()) }, function (data) { $("#userpart").HTML(data); }); } //排序 $("#usersort").live("click",function () { $("#userpart").triggerdataOrder(); paging( $("#currentpage").val()); }); //搜索 $("#usersearch").keyup(function() { paging($("#currentpage").val()); pageagin($("#totoalpage").val()); }); //处理form $("#userForm").submit(function () { $(this).AJAXsubmit(options); return false; }); function processjson(data) { if (data == 1) { location.reload(); } else { alert("添加失败"); } } //高亮 $("#unav li:eq(0)").addClass("active"); $("#adnav li:eq(2)").addClass("active"); //全选/全不选 $("#allcheck").checkall($("#usertable tbody input[type='checkBox']")); //删除用户 $("#deluser").click(function () { var checks = $("#usertable tbody input[type='checkBox']:checked"); var lens = checks.length; if (lens == 0) { $.infoShow("未选择删除对象",0); return false; } if (confirm("确定要删除所选中用户？")) { for (var i = 0; i < lens; i++) { var $chek = checks.eq(i); var ID = $chek.attr("data-ID"); var tr = $chek.parent().parent(); $.post("Users/DeleteUser", { ID: ID }, function (data) { if (data == 1) { tr.fadeOut(); $.infoShow("删除成功", 1); } else { $.infoShow("删除失败", 0); } }); } } return true; }); // 增加用户 $("#adduserbt").click(function() { $(".modal-header").show(); }); })到这里就是全部的代码,供大家和自己参考。
再给大家看两个效果图，一个是kendoui的grID，一个是Angular做的分页。后面有机会给大家介绍。
Kendo- GrID
Kendo和MVC框架融合度比较高，它的核心代码如下：
@model IEnumerable<Kendo.Mvc.Examples.Models.Productviewmodel>@(HTML.Kendo().GrID(Model) .name("GrID") .Columns(columns => { columns.Bound(p => p.ProductID).Groupable(false); columns.Bound(p => p.Productname); columns.Bound(p => p.UnitPrice); columns.Bound(p => p.UnitsInStock); }) .Pageable() .sortable() .Scrollable() .Filterable() .DataSource(dataSource => dataSource .AJAX() .ServerOperation(false) ))AngularJs 核心还是调用封装好的API函数，相当于上面的仓库中的方法，然后通过模型绑定。
总结一下：自己实现代码量比较多，功能不全，有重复造轮子的感觉，但可以较好的控制，基本够用；kendo的方式感觉高大全，用熟了开发速度快。就是多一些引用，且需要担心kendoui和其他的ui框架会有冲突。前端MVVM的方式我了解还不够深，感觉前端脚本的代码量也蛮多，效果不错。但生成的HTML代码很少。上面这个表格。Chrome F12或者右键查看源码都是下面这样子的：
主要的就一个p
<p data-ng-app="blogadmin" data-ng-vIEw="" ID="ng-vIEw"></p>
自我保护倒是蛮好，也就是SEO可能有问题。应该还有更好的方式，猿友们指点指点。
<HTML><head> <Title>name of the blog (admin)</Title> <link rel="shortcut icon" href="/pics/blogengine.ico" type="image/x-icon" /> <Meta charset="utf-8" /> <Meta http-equiv="X-UA-Compatible" content="IE=edge, Chrome=1" /> <Meta name="apple-mobile-web-app-capable" content="yes" /> <Meta name="apple-mobile-web-app-status-bar-style" content="black" /> <Meta name="format-detection" content="telephone=no" /> <Meta name="vIEwport" content="wIDth=device-wIDth, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="/Content/bootstrap/bootstrap.CSS" rel="stylesheet"/><link href="/Content/bootstrap/bootstrap-theme.CSS" rel="stylesheet"/><link href="/Content/toastr.CSS" rel="stylesheet"/><link href="/Content/Font-awesome.CSS" rel="stylesheet"/><link href="/Content/editor.CSS" rel="stylesheet"/><link href="/Content/app.CSS" rel="stylesheet"/> <script type="text/JavaScript"> if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msVIEwportStyle = document.createElement("style"); var mq = "@-ms-vIEwport{wIDth:auto!important}"; msVIEwportStyle.appendChild(document.createTextNode(mq)); document.getElementsByTagname("head")[0].appendChild(msVIEwportStyle); } </script></head><body> <script type="text/JavaScript"> var SiteVars = { ApplicationrelativeWebroot: '/', relativeWebroot: '/', BlogInstanceID: '96d5b379-7e1d-4dac-a6ba-1e50db561b04', Username: 'admin', UserRights: ['VIEwDetailedErrorMessages', 'AccessadminPages', 'AccessadminSettingsPages', 'ManageWidgets', 'VIEwPublicComments', 'VIEwUnmoderatedComments', 'CreateComments', 'ModerateComments', 'VIEwPublicposts', 'VIEwUnpublishedposts', 'CreateNewposts', 'EditOwnposts', 'EditOtherUsersposts', 'DeleteOwnposts', 'DeleteOtherUsersposts', 'PublishOwnposts', 'PublishOtherUsersposts', 'VIEwPublicPages', 'VIEwUnpublishedPages', 'CreateNewPages', 'EditOwnPages', 'VIEwratingsOnposts', 'submitratingsOnposts', 'VIEwRoles', 'CreateNewRoles', 'EditRoles', 'DeleteRoles', 'EditOwnRoles', 'EditOtherUsersRoles', 'CreateNewUsers', 'DeleteUserSelf', 'DeleteUsersOtherThanSelf', 'EditOwnUser', 'EditOtherUsers'], absoluteWebroot: 'http://localhost:53265/', Version: 'BlogEngine.NET ' + '2.9.1.0', IsPrimary: 'True', Isadmin: 'True', AppRoot: function (url) { window.location = '/' + url; return false; }, BlogRoot: function (url) { window.location = '/' + url; } }; </script> <script type="text/JavaScript" src="admin.res.axd"></script> <p ID="container" class="app-wrapper ltr"> <p data-ng-app="blogadmin" data-ng-vIEw="" ID="ng-vIEw"></p> </p> <script src="/scripts/jquery-2.0.3.Js"></script><script src="/scripts/jquery.valIDate.Js"></script><script src="/scripts/jquery.form.Js"></script><script src="/scripts/toastr.Js"></script><script src="/Scripts/angular.min.Js"></script><script src="/Scripts/angular-route.min.Js"></script><script src="/Scripts/angular-animate.min.Js"></script><script src="/Scripts/angular-sanitize.min.Js"></script><script src="/admin/be-grID.Js"></script><script src="/admin/app.Js"></script><script src="/admin/controllers/dashboard.Js"></script><script src="/admin/controllers/blogs.Js"></script><script src="/admin/controllers/posts.Js"></script><script src="/admin/controllers/pages.Js"></script><script src="/admin/controllers/Tags.Js"></script><script src="/admin/controllers/categorIEs.Js"></script><script src="/admin/controllers/comments.Js"></script><script src="/admin/controllers/users.Js"></script><script src="/admin/controllers/roles.Js"></script><script src="/admin/controllers/profile.Js"></script><script src="/admin/controllers/settings.Js"></script><script src="/admin/controllers/packages.Js"></script><script src="/admin/controllers/common.Js"></script><script src="/admin/services.Js"></script><script src="/scripts/bootstrap.Js"></script><script src="/scripts/moment.Js"></script></body></HTML>PS：这个东西没什么难度，逻辑都在仓库中，要源码的同学我后续分离出来了再贴出来。当然这个又很多方式，我也不是要秀什么框架，但我目前项目的需求是要这么分开的。一个控制器是可用解决所有问题，但我其他模型也要分页又要便于测试难道我都写在控制器中吗？ 总结
以上是内存溢出为你收集整理的Asp.Net MVC实现分页、检索、排序的代码展示全部内容，希望文章能够帮你解决Asp.Net MVC实现分页、检索、排序的代码展示所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）