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 ...
随机推荐
- JMeter录制脚本
Jmeter 是一个非常流行的性能测试工具,虽然与LoadRunner相比有很多不足,比如:它结果分析能力没有LoadRunner详细:很它的优点也有很多: l 开源,他是一款开源的免费软件,使用它你 ...
- android-用xml自定义背景（可自定义显示具体那一边）
常见的描边都是闭合的.四个边都有.如下: <?xml version="1.0" encoding="UTF-8"?> <layer-list ...
- transition过渡的趣玩
本例中将三张图(来自网络)进行堆叠,鼠标悬停触发.附有源代码
- (转)SQL中的ISNULL函数介绍
SQL中有多种多样的函数,下面将为您介绍SQL中的ISNULL函数,包括其语法.注释.返回类型等,供您参考,希望对您学习SQL能够有所帮助. ISNULL 使用指定的替换值替换 NULL. 语法ISN ...
- Ubuntu 12.04.5 LTS 上安装hadoop 2.6.0后运行自带的例程wordcount
注:我所有的操作均通过Xshell 5远程连接Ubuntu进行实施 第一步:启动hadoop,利用jps查看hadoop是否已经启动,如果没有启动用start-dfs.sh脚本启动(hadoop2.X ...
- linux删除ORACLE【weber出品必属精品】
关闭数据库 sqlplus / as sysdba shutdown abort 清除oracle软件 su - oracle cd $ORACLE_BASE rm -rf * rm -rf /etc ...
- Objective-C set/get方法
主要内容set get方法的使用 关键字 @property 全自动生成set get方法 // 类的声名 @interface People : NSObject{ int _age; // 成员变 ...
- 让footer在底部(测试它人方法)
要求:网页布局中,页脚在底部.内容不够一页时,在底部.内容超过一页时,出现卷动条,页脚也在被挤到底部 1.测试的这个文章介绍的办法 链接: http://www.cnblogs.com/cheny ...
- 关于css伪类:hover的用法
关于伪类:hover大家都用过,也比较熟悉.今天介绍一种新的用法(不是我发现的,但是以前一直没这么用过).在Chrome浏览器下,当a标签使用display:black;时a:hover的属性浏览器就 ...
- tomcat server.xml 配置示例
规划: 网站网页目录:/web/www 域名:www.test1.com 论坛网页目录:/web/bbs URL:bbs.test1.com/bbs 网站管理 ...