ASP.NET MVC 之表格分页

来源：互联网发布：baocms7.6源码下载编辑：程序博客网时间：2024/06/06 00:54

本文转载自：http://www.cnblogs.com/dean-Wei/p/3530953.html

简单效果图：（框架：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传递。

阅读全文

0 0