HtmlHelper的扩展分页方法

一、新建一个空MVC项目，命名为MVCAppPager

二、新建一个文件夹PageHelper,在文件夹下新建接口IPageList以及实现类PageList

IPageList接口：

 public interface IPageList
    {
        /// <summary>
        /// 第几页
        /// </summary>
        int PageIndex { get; set; }

        /// <summary>
        /// 每页记录数
        /// </summary>
        int PageSize { get; set; }

        /// <summary>
        /// 总页数
        /// </summary>
        int PageTotal { get; }

        /// <summary>
        /// 记录总数
        /// </summary>
        long RecordTotal { get; set; }

        /// <summary>
        /// 每页开始位置
        /// </summary>
        long CurrentStart { get; }
        /// <summary>
        /// 每页结束位置
        /// </summary>
        long CurrentEnd { get; }
    }

PageList实现类：

public class PageList<T> : List<T>, IPageList
    {
        public PageList(IEnumerable<T> source) : base(source)
        {

        }

        public PageList(IEnumerable<T> source, int pageIndex, int pageSize, long recordTotal)
        {
            if (source != null)
            {
                this.AddRange(source);
            }

            PageIndex = pageIndex;
            PageSize = pageSize;
            RecordTotal = recordTotal;

        }

        public int PageIndex { get; set; }

        public int PageSize { get; set; }

        public long RecordTotal { get; set; }

        public int PageTotal
        {
            get
            {
               return  RecordTotal % PageSize ==  ? (int)RecordTotal / PageSize : (int)RecordTotal / PageSize + ;
            }
        }

        public long CurrentStart
        {
            get
            {
                return PageIndex * PageSize + ;
            }
        }

        public long CurrentEnd
        {
            get
            {
                return (PageIndex + ) * PageSize > RecordTotal ? RecordTotal : (PageIndex + ) * PageSize;
            }
        }
    }

三、创建分页HtmlHelper扩展方法Pager

namespace System.Web.Mvc
{
    public static class ExtHelper
    {
        public static MvcHtmlString Pager(this HtmlHelper helper, IPageList list)
        {
            var redirectTo = helper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath;
            var output = new StringBuilder();
            if (list.PageTotal > )
            {
                output.AppendFormat("<div class='paginator'>");
                //处理首页连接
                output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=0&pageSize={1}'>首页</a> ", redirectTo, list.PageSize);

                if (list.PageIndex > )
                {//处理上一页的连接
                    output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, list.PageIndex - , list.PageSize);
                }
                else
                {
                    output.Append("<a class='pageLink'>上一页</a>");
                }

                output.Append(" ");
                int currint = ;
                for (int i = ; i <= ; i++)
                {//一共最多显示10个页码，前面5个，后面5个
                    if ((list.PageIndex + i - currint) >=  && (list.PageIndex + i - currint) < list.PageTotal)
                    {
                        if (currint == i)
                        {//当前页处理
                            output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, list.PageIndex, list.PageSize, list.PageIndex + );
                        }
                        else
                        {//一般页处理
                            output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, list.PageIndex + i - currint, list.PageSize, list.PageIndex + i - currint + );
                        }
                    }
                    output.Append(" ");
                }
                if (list.PageIndex < list.PageTotal - )
                {//处理下一页的链接
                    output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, list.PageIndex + , list.PageSize);
                }
                else
                {
                    output.Append("<a class='pageLink'>下一页</a>");
                }
                output.Append(" ");
                if (list.PageIndex != list.PageTotal - )
                {
                    output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, list.PageTotal - , list.PageSize);
                }
                output.Append(" ");
            }
            output.AppendFormat("第{0}页 / 共{1}页", list.PageIndex+, list.PageTotal);//这个统计加不加都行
            output.AppendFormat("</div>");
            return new MvcHtmlString(output.ToString());
        }
    }
}

注意将命名空间修改为：namespace System.Web.Mvc，这样就不用每个页面都要引用命名空间了

四、控制器方式实现

1.在Models文件夹下，新建一个Order实体

namespace MvcAppPager.Models
{
    public class Order
    {
        public long ID { get; set; }

        public string OrderNo { get; set; }

        public decimal WayFee { get; set; }

        public string EMS { get; set; }

    }
}

2.新建一个Home控制器，实现如下

 public class HomeController : Controller
    {
        /// <summary>
        /// 构造数据
        /// </summary>
        List<Order> list = new List<Order>
            {
                new Order { ID = ,OrderNo="",WayFee=,EMS="C01111"},
                new Order { ID = ,OrderNo="",WayFee=,EMS="C01221"},
                new Order { ID = ,OrderNo="",WayFee=,EMS="C03411"},
                new Order { ID = ,OrderNo="",WayFee=,EMS="C01341"},
                new Order { ID = ,OrderNo="",WayFee=,EMS="C01551"},
                new Order { ID = ,OrderNo="",WayFee=,EMS="C02341"}
            };

        // GET: Home
        public ActionResult Index(int pageIndex = ,int pageSize = )
        {
            List<Order> source = list.Skip(pageIndex * pageSize).Take(pageSize).ToList();
            PageList <Order> orderList = new PageList<Order>(source, pageIndex, pageSize, list.Count);
            return View(orderList);
        }
    }

五、Index视图

@model MvcAppPager.PageHelper.PageList<MvcAppPager.Models.Order>

@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
        .paginator {
            font: 12px Arial, Helvetica, sans-serif;
            padding: 10px 20px 10px ;
            margin: 0px;
        }

            .paginator a {
                border: solid 1px #ccc;
                color: #0063dc;
                cursor: pointer;
                text-decoration: none;
            }

                .paginator a:visited {
                    padding: 1px 6px;
                    border: solid 1px #ddd;
                    background: #fff;
                    text-decoration: none;
                }

            .paginator .cpb {
                border: 1px solid #F50;
                font-weight: ;
                color: #F50;
                background-color: #ffeee5;
            }

            .paginator a:hover {
                border: solid 1px #F50;
                color: #f60;
                text-decoration: none;
            }

            .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover {
                float: left;
                height: 16px;
                line-height: 16px;
                min-width: 10px;
                _width: 10px;
                margin-right: 5px;
                text-align: center;
                white-space: nowrap;
                font-size: 12px;
                font-family: Arial,SimSun;
                padding:  3px;
            }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>订单号</th>
                <th>运单号</th>
                <th>运费</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.ID</td>
                    <td>@item.OrderNo</td>
                    <td>@item.EMS</td>
                    <td>@item.WayFee</td>
                </tr>
            }
        </tbody>
    </table>
    @Html.Pager(Model)
</body>

</html>

六、运行效果如下图：