1. 程式人生 > >HtmlHelper的擴展分頁方法

HtmlHelper的擴展分頁方法

++ ora fff sys source mode pagelist ring ack

一、新建一個空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 == 0 ? (int)RecordTotal / PageSize : (int)RecordTotal / PageSize + 1; } } public long CurrentStart { get { return PageIndex * PageSize + 1; } } public long CurrentEnd { get { return (PageIndex + 1) * PageSize > RecordTotal ? RecordTotal : (PageIndex + 1) * 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 > 1)
            {
                output.AppendFormat("<div class=‘paginator‘>");
                //處理首頁連接  
                output.AppendFormat("<a class=‘pageLink‘ href=‘{0}?pageIndex=0&pageSize={1}‘>首頁</a> ", redirectTo, list.PageSize);

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

                output.Append(" ");
                int currint = 5;
                for (int i = 0; i <= 10; i++)
                {//一共最多顯示10個頁碼,前面5個,後面5個  
                    if ((list.PageIndex + i - currint) >= 0 && (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 + 1);
                        }
                        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 + 1);
                        }
                    }
                    output.Append(" ");
                }
                if (list.PageIndex < list.PageTotal - 1)
                {//處理下一頁的鏈接  
                    output.AppendFormat("<a class=‘pageLink‘ href=‘{0}?pageIndex={1}&pageSize={2}‘>下一頁</a> ", redirectTo, list.PageIndex + 1, list.PageSize);
                }
                else
                {
                    output.Append("<a class=‘pageLink‘>下一頁</a>");
                }
                output.Append(" ");
                if (list.PageIndex != list.PageTotal - 1)
                {
                    output.AppendFormat("<a class=‘pageLink‘ href=‘{0}?pageIndex={1}&pageSize={2}‘>末頁</a> ", redirectTo, list.PageTotal - 1, list.PageSize);
                }
                output.Append(" ");
            }
            output.AppendFormat("第{0}頁 / 共{1}頁", list.PageIndex+1, 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 = 1,OrderNo="20160510",WayFee=20,EMS="C01111"},
                new Order { ID = 2,OrderNo="20160512",WayFee=10,EMS="C01221"},
                new Order { ID = 3,OrderNo="20160515",WayFee=15,EMS="C03411"},
                new Order { ID = 4,OrderNo="20160518",WayFee=11,EMS="C01341"},
                new Order { ID = 5,OrderNo="20160520",WayFee=16,EMS="C01551"},
                new Order { ID = 6,OrderNo="20160521",WayFee=13,EMS="C02341"}
            };

        // GET: Home
        public ActionResult Index(int pageIndex = 0,int pageSize = 2)
        {
            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 0;
            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: 700;
                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: 0 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>

HtmlHelper的擴展分頁方法