asp.net MVC通用分页组件使用方便通用性强

时间：2018-03-10 16:06:57 阅读：243 评论：0 收藏：0 [点我收藏+]

标签：ueditor 页码 get 设置 under mod string 使用方法 div

该分页控件的显示逻辑:

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>