asp.net MVC通用分页组件 使用方便 通用性强
该分页控件的显示逻辑:
1 当前页面反色突出显示,链接不可点击
2 第一页时首页链接不可点击
3 最后一页时尾页链接不可点击
4 当前页面左右各显示页码可以设置调节,如果左右一样则居中
5 当左边页码不足时,右侧补充
6 当右侧页面不足时左侧补充
7 总显示页码数为左侧+右侧+1(当前)
组成部分:
1 PageModel 便于向组件传递参数
public class PageModel
{
/// <summary>
/// 数据总条数
/// </summary>
public int DataCount { get; set; }
/// <summary>
/// 当前页码
/// </summary>
public int Page { get; set; }
/// <summary>
/// 每页条数
/// </summary>
public int PageSize { get; set; }
/// <summary>
/// 当前页码左边显示页数
/// </summary>
public int NumsOfLeft { get; set; }
/// <summary>
/// 当前页码右边显示页数
/// </summary>
public int NumsOfRight { get; set; }
/// <summary>
/// 每页允许显示的最大条数
/// 如果PageSize大于MaxPage则以MaxPage为准
/// </summary>
public int MaxPage { get; set; }
/// <summary>
/// 页面前面的URL
/// 比如URL为http://www.chengchenxu.com/1
/// 1为页码,则该属性应该设置为:
/// http://www.chengchenxu/
/// </summary>
public string Url { get; set; }
public PageModel()
{
//设置的默认值
this.PageSize = 10;
this.NumsOfLeft = 4;
this.NumsOfRight = 4;
this.MaxPage = 30;
}
2 分部视图: 这是一个强类型View,最上面的要对应到你的项目的命名空间中.
@model ChengChenXu.com.PageModel.Models.PageModel
<ul class="pagination">
@{
//页码逻辑运算
double d = (double)Model.DataCount / Model.PageSize;
int pageNum = (int)Math.Ceiling(d);
Model.Page = Model.Page < 1 ? 1 : Model.Page;
Model.Page = Model.Page > pageNum ? pageNum : Model.Page;
Model.PageSize = Model.PageSize > Model.MaxPage ? Model.MaxPage : Model.PageSize;
int startNum, endNum;
if (Model.Page > Model.NumsOfLeft)
{
endNum = Model.Page + Model.NumsOfRight;
}
else
{
endNum = Model.Page + Model.NumsOfRight + (Model.NumsOfLeft - Model.Page + 1);
}
if (pageNum - Model.Page >= Model.NumsOfRight)
{
startNum = Model.Page - Model.NumsOfLeft;
}
else
{
startNum = Model.Page - Model.NumsOfLeft - (Model.NumsOfRight - (pageNum - Model.Page));
}
startNum = startNum < 1 ? 1 : startNum;
endNum = endNum > pageNum ? pageNum : endNum;
//END 页码逻辑运算
//开始显示页码
//显示首页
if (pageNum == 1 || Model.Page == 1)
{
<li class="disabled"><a href="#" onclick="return false;">«</a></li>
}
else
{
<li><a href="@Model.Url">«</a></li>
}
//END 显示首页
//显示页码
for (int i = startNum; i <= endNum; i++)
{
if (i == Model.Page)
{
<li class="active"><a href="#" onclick="return false;">@i</a></li>
}
else
{
<li><a href="@Model.Url@i">@i</a></li>
}
}
//END 显示页码
//显示尾页
if (pageNum == 1 || Model.Page == pageNum)
{
<li class="disabled"><a href="#" onclick="return false;">»</a></li>
}
else
{
<li><a href="@Model.Url@pageNum">»</a></li>
}
//END 显示尾页
}
</ul>
使用方法:
1 在需要使用的地方添加以下代码:
第一个参数为分部View的文件名,(要放到Shared文件夹中)
第二个参数为页面使用ViewBag传进来的PageModel对象 注意命名空间和ViewBag的动态标签
@Html.Partial("PagePartial", ViewBag.PageModel as ChengChenXu.com.PageModel.Models.PageModel)
2 在Controller中创建PageModel对象并使用ViewBag传递
public ActionResult Index(int id=1,int pagesize=10)
{
//模拟200条数据
List<string> list = new List<string>();
for (int i = 1; i <= 200; i++)
{
list.Add("第"+i+"条数据");
}
ViewBag.List = list;
//创建PageModel对象
Models.PageModel pm = new Models.PageModel();
pm.DataCount = list.Count;//数据总条数
pm.Page = id;//当前页码
pm.PageSize = pagesize;//每页数量
pm.Url = "/home/index/"; //URL
ViewBag.PageModel = pm; //传递PageModel
return View();
}
生成代码
样式表请自己设计 DEMO中直接使用Bootstrap框架分页样式.
<ul class="pagination">
<li class="disabled"><a href="#" onclick="return false;">«</a></li>
<li class="active"><a href="#" onclick="return false;">1</a></li>
<li><a href="/home/index/2">2</a></li>
<li><a href="/home/index/3">3</a></li>
<li><a href="/home/index/4">4</a></li>
<li><a href="/home/index/5">5</a></li>
<li><a href="/home/index/6">6</a></li>
<li><a href="/home/index/7">7</a></li>
<li><a href="/home/index/8">8</a></li>
<li><a href="/home/index/9">9</a></li>
<li><a href="/home/index/20">»</a></li>
</ul>
源码和DEMO下载:
本文为博主原创,转载请保留出处:
http://chengchenxu.com/Article/22/mvc-fenye