ASP.NET MVC 之表格分页

浏览数：63 / 时间：2015年06月09日

简单效果图：（框架：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;
        }
    }
}

View Code

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>

View Code

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>

View Code

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);
    }
}

View Code

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);
        }