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

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

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

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

ASP.NET MVC 之表格分页的更多相关文章

ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender
(原文) 昨天在ASP.NET MVC利用PagedList分页(一)的最后一节提到,一个好的用户体验绝对不可能是点击下一页后刷新页面,所以今天来说说利用Ajax+PagedList实现无刷新(个人 ...
asp.net mvc easyui datagrid分页
提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...
ASP.NET MVC利用PagedList分页（一）
前几天看见博客园上有人写ASP.NET MVC的分页思想,这让我不禁想起了PagedList.PagedList是NuGet上提供的一个分页的类库,能对任何IEnumerable<T>进行 ...
ASP.NET MVC 简单的分页思想与实现
首先我们通过VS创建一个空的基于Razor视图引擎的ASP.NET MVC3 Web应用程序,命名为JohnConnor.Web 对创建过程或Razor不太了解的看官,请移步 ASP.NET MVC ...
asp.net mvc多条件+分页查询解决方案
开发环境vs2010 css:bootstrap js:jquery bootstrap paginator 原先只是想做个mvc的分页,但是一般的数据展现都需要检索条件,而且是多个条件,所以就变成了 ...
实现Asp.Net MVC无刷新分页
整个过程主要就是:一开始进入页面是,在页面加载完成之后直接通过$(function(){ LoadRegisterUserInfo(1,10,0,0);//加载注册用户信息 });无条件加载数据,调 ...
asp.net mvc 导出表格
适合使用的场合: .net 中从前台中的table导出成excel文件,兼容各种浏览器. 使用工具: org.in2bits.MyXls.dll 从前台获取表格的thead和表格的tbody,将其转化 ...
Asp.NET MvC EF实现分页
打开Visual Studio 2017 选择项目----->管理nuget包其他版本也有输入paged 下载安装 pagedList和pagedList.mvc 在model文件新建一 ...
Asp.net Mvc使用PagedList分页
git:https://github.com/troygoode/PagedList 1. Nuget 安装package watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...

随机推荐

Hacker（22）----解除系统中的密码
Win7系统中,用户可以设置BIOS密码以及系统登录密码,这些密码都有各自的用途.但对黑客而言,完全可以采用不同的方式绕过这些密码.下面介绍黑客如如何接触这些密码. 一.解除BIOS密码 BIOS密码 ...
ORA-24324、ORA-12560、ORA-12514
SQL> startup ERROR: ORA-24324: 未初始化服务句柄 ORA-01041: 内部错误, hostdef 扩展名不存在. SQL> conn sys /nolog; ...
mysql三种binlog日志的理解
最近,一直在纠结要不要改数据库binlog的日志格式,原先用的是row格式,导致数据库binlog日志较大,磁盘空间本来也不是很大,所以就想看看能不能改变binlog日志.在该binlog日志之前,先 ...
line-hight-(行高)解析
行高定义:line-height属性是指文本行基线之间的距离. 顶线.中线.基线.底线概念从上到下四条线分别是顶线.中线.基线.底线,很像才学英语字母时的四线三格,我们知道vertical-alig ...
AngularJs练习Demo12Provider
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
visifire 图表属性样式设置说明，字体，阴影设置
基于注释的Spring Security实战
一.准备工作预准备的工具及软件有: 1. Eclipse IDE:我使用Eclipse JEE 3.7版,即eclipse-jee-indigo-SR2-win32-x86_64.zip 2. JD ...
hdu5360 Hiking(水题)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Hiking Time Limit: 6000/3000 MS (Java/Oth ...
Aphache VFS
http://blog.csdn.net/hemingwang0902/article/details/4733911 http://jackyrong.iteye.com/blog/1330946 ...
Oracle11g R2学习系列之五回闪
Oracle里面有一个回闪的操作,这个貌似sql server是没有的.要使用这个功能,需要用到两个时间内部函数 TIMESTAMP和TO_TIMESTAMP.其中,函数TO_TIMESTAMP的语法 ...

ASP.NET MVC 之表格分页

ASP.NET MVC 之表格分页的更多相关文章

随机推荐

热门专题