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;">&laquo;</a></li>
}
else
{
<li><a href="@Model.Url">&laquo;</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;">&raquo;</a></li>
}
else
{
<li><a href="@Model.Url@pageNum">&raquo;</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;">&laquo;</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">&raquo;</a></li>
</ul>

源码和DEMO下载:

ChengChenXu.com.PageModel.rar

本文为博主原创,转载请保留出处:
http://chengchenxu.com/Article/22/mvc-fenye