【ASP.NET MVC 回顾】HtmlHepler应用-分页组件
2024-10-15 03:54:09
以前在ASP.NET WebForm开发中会用到许多控件，像DropDownList等。同样ASP.NET MVC中也有类似的控件-HtmlHelper。
HtmlHelper和服务器控件相比，HtmlHelper更灵活一些，而且扩展起来也更方便。实际开发中“分页”功能是必不可少的，于是我自定义了一个HtmlHelper的分页控件，总结出来，希望能帮助到大家。
HtmlHelper扩展方式有两种：
1.@helper
这种方式是使用Razor语法扩展。直接在cshtml中编写即可，非常直观。它有两种实现形式：
- 直接在当前cshtml中编写，然后直接调用：
<h2>Demo</h2>
@helper MyButton(string name,string style){
//todo: 实现 }
<div>
@MyButton("呵呵","margin:3px 3px;") </div>
- 在单独的cshtml中编写，在其他文件中调用，这个cshtml文件必须放在App_Code里面：
<h2>Demo1</h2>
<div>
@hHelpers.MyButton("哈哈","Color:red;")
</div>
2.扩展方法利用C#特性-扩展方法来实现扩展，本文将采用这种方式。废话不多说直接上代码。首先先定义一个PageViewData类，用于存储分页的相关信息
public class PageViewData<T>
{
/// <summary>
/// 当前页
/// </summary>
public int CurrentPage { get; set; } private readonly int _totalPageount;
/// <summary>
/// 总页数
/// </summary>
public int TotalPageCount
{
get
{
return _totalPageount;
}
} private int _totalDataCount;
/// <summary>
/// 数据源总量
/// </summary>
public int TotalDataCount
{
get { return _totalDataCount; }
set { _totalDataCount = value; }
} private int _pageSize;
/// <summary>
/// 每页显示数据大小
/// </summary>
public int PageSize
{
get { return _pageSize; }
set { _pageSize = value; }
} /// <summary>
/// 当前页数据列表
/// </summary>
public IList<T> Items { get; set; } public PageViewData()
{
} public PageViewData(int currentPage, int pageSize, int totalDataCount)
{
CurrentPage = currentPage;
_pageSize = pageSize;
_totalDataCount = totalDataCount;
_totalPageount = (int)Math.Ceiling(_totalDataCount * 1.0 / _pageSize);
} }
然后开始编写分页组件代码。
public static MvcHtmlString PagePanel<T>(this HtmlHelper html, PageViewData<T> pageViewData,
Func<int, string> action,
int showMaxPageCount = 10,
PagingMode mode = PagingMode.Plain)
{
if (showMaxPageCount <= 0)
{
return MvcHtmlString.Empty;
} StringBuilder sb = new StringBuilder(); sb.AppendFormat("<div id=\"kPaging\">");
if (pageViewData.TotalPageCount > 1)
{
if (mode == PagingMode.Detail)
{
sb.AppendFormat("<span style=\"margin:0px 5px;\">第 {0} 页，共{1}页，共{2}条</span>", pageViewData.TotalPageCount < pageViewData.CurrentPage ? 1 : pageViewData.CurrentPage,
pageViewData.TotalPageCount, pageViewData.TotalDataCount);
} int startPageNum, endPageNum; sb.AppendFormat(PageLinkTemplete, action(1), "首页");
if (pageViewData.CurrentPage > 1)
{
sb.AppendFormat(PageLinkTemplete, action(pageViewData.CurrentPage - 1), "上一页");
} //第一页
if (pageViewData.CurrentPage <= 1)
{
startPageNum = 1;
endPageNum = showMaxPageCount;
if (endPageNum > pageViewData.TotalPageCount)
{
endPageNum = pageViewData.TotalPageCount;
}
pageViewData.CurrentPage = 1;
}
else if (pageViewData.CurrentPage >= pageViewData.TotalPageCount)//最后一页
{
startPageNum = pageViewData.TotalPageCount - showMaxPageCount + 1;
endPageNum = pageViewData.TotalPageCount;
if (startPageNum <= 0)
{
startPageNum = 1;
}
pageViewData.CurrentPage = pageViewData.TotalPageCount;
}
else
{
//当前页区域
int regionIndex = 1;
regionIndex = (int)Math.Ceiling(pageViewData.CurrentPage * 1.0 / showMaxPageCount); startPageNum = (regionIndex - 1) * showMaxPageCount + 1;
endPageNum = regionIndex * showMaxPageCount; //TotalPageCount是否小于endPageNum
if (endPageNum > pageViewData.TotalPageCount)
{
endPageNum = pageViewData.TotalPageCount;
}
} for (int i = startPageNum; i <= endPageNum; i++)
{
if (i == pageViewData.CurrentPage)
{
sb.AppendFormat(CurrentPageLinkTemplete, i);
}
else
{
sb.AppendFormat(PageLinkTemplete, action(i), i);
}
} if (pageViewData.CurrentPage < pageViewData.TotalPageCount)
{
sb.AppendFormat(PageLinkTemplete, action(pageViewData.CurrentPage + 1), "下一页");
} sb.AppendFormat(PageLinkTemplete, action(pageViewData.TotalPageCount), "末页");
} sb.AppendFormat("</div>"); return MvcHtmlString.Create(sb.ToString());
}
最后调用
<style type="text/css">
#kPaging {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
FONT-SIZE: 0.85em;
PADDING-BOTTOM: 3px;
MARGIN: 3px;
PADDING-TOP: 3px;
FONT-FAMILY: Tahoma,Helvetica,sans-serif;
TEXT-ALIGN: center;
} #kPaging .currentPage {
PADDING-RIGHT: 6px;
PADDING-LEFT: 6px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
COLOR: #000;
MARGIN-RIGHT: 3px;
PADDING-TOP: 2px;
} #kPaging .pageLink {
BORDER-RIGHT: #ccdbe4 1px solid;
PADDING-RIGHT: 8px;
BACKGROUND-POSITION: 50% bottom;
BORDER-TOP: #ccdbe4 1px solid;
PADDING-LEFT: 8px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #ccdbe4 1px solid;
COLOR: #0061de;
MARGIN-RIGHT: 3px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #ccdbe4 1px solid;
TEXT-DECORATION: none;
}
</style> <h2>title</h2>
@Html.PagePanel(new PageViewData<Student>(6, 10, 58), i => string.Format("#?page={0}", i), 10)
展示效果：
它的样式我们可以自定义，只要重写#kPaging、.pageLink、.currentPage选择器内容即可。
最新文章
- 2>&1 linux
- centos 7.0 修改ssh默认连接22端口 和 添加防火墙firewalld 通过端口
- js中获取键盘事件【转】
- 史上最全的RunLoop介绍
- 【转】【C#】ColorMatrix
- Remove LUN from OCFS2
- LA3902 Network
- 通过手机Web实现手机摇一摇的功能
- Unable to generate a temporary class (result=1)解决方法
- Android 获取系统短信内容
- [Effective Modern C++] Item 5. Prefer auto to explicit type declarations - 相对显式类型声明，更倾向使用auto
- [Swust OJ 247]--皇帝的新衣(组合数+Lucas定理)
- 多微博账号同时发微博的插件--fawave
- ConfigParser-- 读取写入配置文件
- Elasticsearch-深入理解索引原理
- 【转】【JAVA资料免费下载】158个JAVA免豆精品资料汇总——下载目录
- MongDB-高级
- 数学:确定性的丧失 (M·克莱因 著)
- python学习 day01 基础介绍
- 真实的物理机安装Centos7系统后网卡只有lo没有eno1的解决办法：实际上是物理机未安装网驱动卡