ASP.NET MVC 之表格分页
简单效果图：（框架：MVC+NHibernate）
要点：
（1）首先建立表格分页Model(GridModel.cs)
（2）然后建立数据展示页(PageCloth.cshtml)
（3）再建分页版页（_Pager.cshtml）
（4）建立分页链接功能(_SmartLink.cshtml)
（5）调用分页功能(HomeController.cs)
详细步骤：
1、建立表格分页Model(GridModel.cs)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Entity; using System.Runtime.Serialization; namespace BLUS.Models { public class GridModel { /// <summary> /// 总记录数 /// </summary> public int TotalRecordCount { set; get; } /// <summary> /// 页大小-每页显示几条记录 /// </summary> public int PageSiae { set; get; } /// <summary> /// 当前第几页 /// </summary> public int CurrentPageIndex { set; get; } /// <summary> /// 总页数 /// </summary> public int PageCount { get { return TotalRecordCount % PageSiae == 0 ? TotalRecordCount / PageSiae : TotalRecordCount / PageSiae + 1; } } /// <summary> /// 默认分页，页大小5，当前第一页 /// </summary> public GridModel() { this.PageSiae = 5; this.CurrentPageIndex = 1; } public IList<Cloth> Clothes { get; set; } } }
2、然后建立数据展示页(PageCloth.cshtml)
@model BLUS.Models.GridModel @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>GetClothByGenreId</title> <link href="../../Content/Manage.css" rel="stylesheet" type="text/css" /> </head> <body> <div style=" width:880px;"> <table style=" width:100%;"> <tr> <th class="width25"> 序号 </th> <th class="width65"> 图片 </th> <th class="width700"> 描述 </th> <th class="width50"> 价格 </th> <th class="width80"> 操作 </th> </tr> <tbody> @{ int n = 0; foreach (var cloth in Model.Clothes) { n += 1; <tr> <td> @n </td> <td> <img style=" width:50px; height:50px;" alt="@cloth.Title" src="../FlashImageUpload/ImageList/@cloth.ImgName" /> </td> <td> @cloth.Title </td> <td> @cloth.Price </td> <td> @Html.ActionLink("编辑", "ClothEdit", "Home", new { clothId = cloth.ClothId }, null) @Html.ActionLink("删除", "ClothDel", "Home", new { clothId = cloth.ClothId }, null) </td> </tr> } } </tbody> </table> <div style=" width:880px; height:40px; background-color:White; text-align:center;"> @Html.Partial("_Pager", Model) </div> </div> </body> </html>
3、再建分页版页（_Pager.cshtml）
@model BLUS.Models.GridModel @{ ViewBag.Title = "_Pager"; } <div> @{ // 创建上一页链接 Html.RenderPartial("_SmartLink", Model, new ViewDataDictionary { { "Text", "上一页" }, { "PageIndex", Model.CurrentPageIndex - 1 }, { "Selected", false }, { "Inactive", Model.CurrentPageIndex == 1 } }); //获取第一页和最后一页 var startPageIndex = Math.Max(1, Model.CurrentPageIndex - Model.PageCount / 2); var endPageIndex = Math.Min(Model.PageCount, Model.CurrentPageIndex + Model.PageCount / 2); // 添加中间的页码 如： 上一页 1 2 3 4 下一页 for (var i = startPageIndex; i <= endPageIndex; i++) { Html.RenderPartial("_SmartLink", Model, new ViewDataDictionary { { "Text", i }, { "PageIndex", i }, { "Selected", i == Model.CurrentPageIndex }, { "Inactive", i == Model.CurrentPageIndex } }); } // 创建下一页 Html.RenderPartial("_SmartLink", Model, new ViewDataDictionary { { "Text", "下一页" }, { "PageIndex", Model.CurrentPageIndex + 1 }, { "Selected", false }, { "Inactive", Model.CurrentPageIndex == Model.PageCount } }); } </div>
4、建立分页链接功能(_SmartLink.cshtml)
@model BLUS.Models.GridModel @{ ViewBag.Title = "_SmartLink"; } <style type="text/css"> a.pagerButton, a.pagerButton:visited { border: solid 0px black; padding: 1px; text-decoration: none; color: #006; margin: 0px 1px 0px 1px; } a.pagerButton:hover { border: solid 1px red; color: Black; } a.pagerButtonCurrentPage { border: solid 1px #00a; padding: 1px; text-decoration: none; color: White; background-color: #006; margin: 0px 1px 0px 1px; } .pagerButtonDisabled { border: none; color: #999; padding: 1px; } </style> @{ //文本编写器 var razorWriter = ViewContext.Writer; //判断当前链接是否选中 if ((bool)ViewData["Inactive"]) { //将当前的Text输出 加入了css样式 该样式可以写在样式表、母版页、当前页中 razorWriter.Write(string.Format("<span class=\"{0}\">{1}</span>", "pagerButtonDisabled", ViewData["Text"])); } else { //路由参数 var routeData = new RouteValueDictionary { { "page", ViewData["PageIndex"].ToString() }, { "pageSize", Model.PageSiae }, { "generId",Model.Clothes[0].GenreId.GenreId } }; var htmlAttributes = new Dictionary<string, object>(); //判断是否为选中状态 添加CSS样式 if ((bool)ViewData["Selected"]) { htmlAttributes.Add("class", "pagerButtonCurrentPage"); } else { htmlAttributes.Add("class", "pagerButton"); } var linkMarkup = Html.ActionLink( ViewData["Text"].ToString(), // 超链接文本 Html.ViewContext.RouteData.Values["action"].ToString(), // Action Html.ViewContext.RouteData.Values["controller"].ToString(), // Controller routeData, // 路由参数 htmlAttributes // HTML属性适用于超链接 ).ToHtmlString(); razorWriter.Write(linkMarkup); } }
5、调用分页功能(HomeController.cs)
public ActionResult PageCloth(int page = 1, int pageSize = 5, int generId = 0) { string sql = "SELECT * FROM Cloth WHERE GenreId={0}"; sql = string.Format(sql, generId); var model = new GridModel { CurrentPageIndex = page, PageSiae = pageSize, //确定记录总数（才能计算出PageCount页数） TotalRecordCount = clothlService.GetListBySql(sql).Count() }; model.Clothes = clothlService.GetListByPage(model, generId); return View(model); }
附：
（1）数据展示页引入分页功能：
（2）分页版页加入链接：
（3）分页链接 响应路径：
(4)注意各页面之间的数据Model传递。