MVC 3.0 实例系列之表格数据的分页 (16).doc

我要学ASP.NET MVC 3.0（十六）： MVC 3.0 实例系列之表格数据的分页概述上节我们学习了如何在MVC 3应用程序中实现一个简单表格并在表格之中加上了排序的表头，使我们的表格在使用起了更加人性化，这些都是使用了MVC 3.0的相关特性来完成的。我们在程序中添加了一个辅助类EmployeeGridModel，来显示我们的Grid的数据，包括所有要传递及初始化的数据，在表格排序的时候起到了很大的作用，同样的我们在分页的时候也需要这样的辅助类。这节我们继续使用MVC的新特性来为Grid中的数据添加分页功能，有了分页功能，表格就不会显得单调，显示起来就更加有美感。问题分析通过上节的学习我们知道，在MVC 程序中使用参数可以实现排序，那么我们使用参数怎么实现分页呢？分页有需要那些参数呢？首先：作为一个表格我们必须知道他总共有多少条数据TotalRecordCount，每页显示几条数据PageSize，这样就确定了表格的总页数PageCount其次：我们要知道表格中的数据要从哪一页开始索引显示CurrentPageIndex这样我们就初步把一些参数设想出来了，为了简单期间，我们每页默认显示5条数据，你也可以设置成你想要的值。而数据总条数可以从数据库中得到，总结后得出参数：page当前页：当前表格索引页。pageSize每页显示条数：当前表格中显示几条数据。修改辅助类修改Model文件夹的EmployeeGridModel类向类中添加如下代码（以前的代码不变后续功能要使用）. public EmployeeGridModel() /默认值 每页显示5条记录 从第1页开始 this.PageSize = 5; this.CurrentPageIndex = 1; / / 当前页的索引 / public int CurrentPageIndex get; set; / / 每页显示的记录条数 / public int PageSize get; set; / / 总记录条数 / public int TotalRecordCount get; set; / / 分页总数 / public int PageCount get if (TotalRecordCount % PageSize = 0) return TotalRecordCount / PageSize; else return TotalRecordCount / PageSize + 1; 在这里我们设置了分页默认每页显示5条记录，从第一页开始显示。创建Action在EmployeeController添加名为Paged的方法该方法包含两个参数page和pageSize代码如下 public ActionResult Paged(int page = 1, int pageSize = 5) var model = new EmployeeGridModel CurrentPageIndex = page, PageSize = pageSize, /确定记录总数（才能计算出PageCount页数） TotalRecordCount = this.DataContext.Employee.Count() ; / 获取当前页的信息 model.Employees = this.DataContext.Employee .Skip(model.CurrentPageIndex - 1) * model.PageSize) .Take(model.PageSize); return View(model); 首先我们初始化一个辅助类EmployeeGridModel，读取了数据库中表的记录条数，为相关属性设置默认值，返回一个辅助类的Employeelist注意：此处我们的OrderBy可以参照上篇中的具体操作，这里就不多赘述。创建视图View为Paged的Action添加一个视图View，选择强类型为EmployeeGridModel修改代码为model MVC3.Grid.Models.EmployeeGridModel ViewBag.Title = Paged; Layout = /Views/Shared/_Layout.cshtml;分页列表 总共有 Model.TotalRecordCount 条记录，每页显示 Model.PageSize 条 你正在查看的是 Model.PageCount 页的第 Model.CurrentPageIndex 页 编号 姓名 性别 生日 是否婚配 foreach (var item in Model.Employees) item.EmployeeNO item.EmployName item.Sex item.Birthday if (item.Marital = 1) :(是) if (item.Marital != 1) :(否)   这样一来，我们的页面基本就算是做好了，运行起来看看此时我们的表格数据基本已经是完成了的，每页显示5条，从第一页开始，数据都跟数据库完全符合。好下面我们继续来学习如何创建分页控件。创建分页链接首先我们看看一般的分页控件是怎么形态我们可以看到分页控件是由一个一个的分页链接来组成的，每点击一次就有不同的数据筛选出来。下面我们就创建分页链接鼠标右击Shared文件夹-新建-视图新建名为_SmartLink的分部视图选择强类型视图EmployeeGridModel修改_SmartLink代码为model MVC3.Grid.Models.EmployeeGridModel /文本编写器 var razorWriter = ViewContext.Writer; /判断当前链接是否选中 if (bool)ViewDataInactive) /将当前的Text输出 加入了css样式 该样式可以写在样式表、母版页、当前页中 razorWriter.Write(string.Format(1, pagerButtonDisabled, ViewDataText); else /路由参数 var routeData = new RouteValueDictionary page, ViewDataPageIndex.ToString() , pageSize, Model.PageSize ; var htmlAttributes = new Dictionary(); /判断是否为选中状态 添加CSS样式 if (bool)ViewDataSelected) htmlAttributes.Add(class, pagerButtonCurrentPage); else htmlAttributes.Add(class, pagerButton); var linkMarkup = Html.ActionLink( ViewDataText.ToString(), / 超链接文本 Html.ViewContext.RouteData.Valuesaction.ToString(), / Action Html.ViewContext.RouteData.Valuescontroller.ToString(), / Controller routeData, / 路由参数 htmlAttributes / HTML属性适用于超链接 ).ToHtmlString(); razorWriter.Write(linkMarkup); 上面的代码注意就是判断当前的链接是否被选中，如果选中就执行Action方法添加CSS样式，否则就输出Html内容然后为Site.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;这样一个分页连接就做好了，如果选择某一页的话就会根据路由参数去匹配分页 /路由参数 var routeData = new RouteValueDictionary page, ViewDataPageIndex.ToString() , pageSize, Model.PageSize ;但是仅仅有了分页链接还是不够的，分页连接是一个一个单独的，我们需要把他做成一个列表形式的控件好下面我们就来创建分页控件。创建分页控件鼠标右击Shared文件夹-新建-视图命名为_Pager，创建为EmployeeGridModel的强类型视图，选择分部视图，以便主页能调用他。修改_Pager代码如下model MVC3.Grid.Models.EmployeeGridModel / 创建上一页链接 Html.RenderPartial(_PagerLink, 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(_PagerLink, Model, new ViewDataDictionary Text, i , PageIndex, i , Selected, i = Model.CurrentPageIndex , Inactive, i = Model.CurrentPageIndex ); / 创建下一页 Html.RenderPartial(_PagerLink, Model, new ViewDataDictionary Text, 下一页 , PageIndex, Model.CurrentPageIndex + 1 , Selected, false , Inactive, Model.CurrentPageIndex = Model.PageCount ); 从上面的代码可以看出，我们的分页控件完全是由分页链接组成的，第一页和最后一页分部写了，中间的使用了遍历读取所有的分页。给每个分页链接添加了参数，确保他们在_PagerLink中能够使用CSS及调用Action方法。这样我们的一个简单的分页控件就做好了。下面我们要调用分页控件了。为Grid添加分页控件回到我们Paged.cshtml，我们在最后的合并行添加一个分页控件，来完成我们表格的分页。将空格改为调用_Pager即可。 Html.Partial(_Pager, Model) 运行效果我们点击上下页，功能已经完成。唯一的缺憾是我们的控件，在最后一页的时候就会缺少几行，有点丑。我们可以对他进行美化填充Paged.cshtml完整代码：model MVC3.Grid.Models.EmployeeGridModel ViewBag.Title = Paged; Layout = /Views/Shared/_Layout.cshtml; int i = 0;分页列表 总共有 Model.TotalRecordCount 条记录，每页显示 Model.PageSize 条 你正在查看的是 Model.PageCount 页的第 Model.CurrentPageIndex 页 编号 姓名 性别 生日 是否婚配 foreach (var item in Model.Employees) item.EmployeeNO item.EmployName item.Sex string.Format(0:yyyy年MM月dd日