ASP.NET MVC 之表格分页

简单效果图：（框架：MVC+NHibernate）

ASP.NET MVC 之表格分页

要点：

（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 ==  ? TotalRecordCount / PageSiae : TotalRecordCount / PageSiae + ;

            }

        }

        /// <summary>

        /// 默认分页，页大小5，当前第一页

        /// </summary>

        public GridModel()

        {

            this.PageSiae = ;

            this.CurrentPageIndex = ;

        }

        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 = ;

                    foreach (var cloth in Model.Clothes)

                    {

                        n += ;

                    <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 -  },

                { "Selected", false },

                { "Inactive", Model.CurrentPageIndex ==  }

            });

        //获取第一页和最后一页

        var startPageIndex = Math.Max(, Model.CurrentPageIndex - Model.PageCount / );

        var endPageIndex = Math.Min(Model.PageCount, Model.CurrentPageIndex + Model.PageCount / );

        // 添加中间的页码 如： 上一页 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 +  },

                { "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: #;

    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: #;

    margin: 0px 1px 0px 1px;

}

.pagerButtonDisabled

{

    border: none;

    color: #;

    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[].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 = , int pageSize = , int generId = )

        {

            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）数据展示页引入分页功能：

ASP.NET MVC 之表格分页

（2）分页版页加入链接：

ASP.NET MVC 之表格分页

（3）分页链接响应路径：

ASP.NET MVC 之表格分页

(4)注意各页面之间的数据Model传递。

秒客网

ASP.NET MVC 之表格分页

相关文章