森老頭的瘋狂世界

在MVC中網頁的功能幾乎都要自已來，不像ASP.NET Web Form有許多好用的控制項，有好也有壞，有時候練練功也不錯，最近找了幾個有關MVC中的資料分頁連結，都沒有說很喜歡，想說自已動手做一個也順便練練功，正在思考分頁外觀要如何設計呢 ，就拿我常逛的點部落裡的分頁連結動手練功。
 

設定路由，PageIndex由1開始
 

            routes.MapRoute(
                "OrderPager", 
                "Order/{page}", 
                new { controller = "OrderPager", action = "Index", page = 1 },
                new { page = @"\d*" }
            );

 

controller
 

    public class OrderPagerController : Controller
    {
        private OrdersRepository repository = new OrdersRepository();
        public ActionResult Index(int page)
        {
            Pager customPager = new Pager { PageIndex = page, PageSize = 15, ItemTotalCount = repository.GetOrdersCount() };
            ViewData["customPager"] = customPager;
            return View(repository.GetOrders(page, customPager.PageSize));
        }
    }

model
 

    public class Orders
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
    public class OrdersRepository
    {
        private List<Orders> _orders = new List<Orders>();

        public OrdersRepository()
        {
            Random r = new Random();
            //2000筆假資料
            for (int i = 1; i <= 2000; i++)
            {
                Orders _o = new Orders { Id = i, Name = "orders_" + i.ToString(), Price = r.Next(1000) };
                _orders.Add(_o);
            }
        }

        public IEnumerable<Orders> GetOrders(int pageIndex, int pageSize)
        {
            return _orders.Skip((pageIndex - 1) * pageSize).Take(pageSize);
        }

        public int GetOrdersCount()
        {
            return _orders.Count;
        }

view
 

    <p>
        <%= Html.PagerHelper(ViewData["customPager"] as Pager, string.Empty, null) %>
    </p>

 

CSS

    <style type="text/css">
        .Pager
        {
         text-align:left;
         padding:3px;
         margin: 8px 3px;
         font-size:14px;
        }

        .Pager a
        {
         border:#c0c0c0 1px solid;
         text-align:center;
         padding: 3px 7px;
         margin:2px;
         color: #0066cc;
         text-decoration:none;
        }

        .Pager .Current
        {
         background-color:#0066cc;
         margin-top:4px;
         color:#ffffff ;
         font-weight:bold;
        }
    </style>

===============================================================================

分頁：PagerHelper
 

    public class Pager
    {
        public int PageIndex { get; set; }
        public int PageSize { get; set; }
        public int ItemTotalCount { get; set; }
        public int PageCount { get { return (int)Math.Ceiling((double)ItemTotalCount / PageSize); } }
    }

helper extenstion
 

    public static class PagerExtension
    {
        public static string PagerHelper(this HtmlHelper helper, Pager pager, string action, RouteValueDictionary routeValues)
        {
            if (routeValues == null)
                routeValues = new RouteValueDictionary();

            if (!string.IsNullOrEmpty(action))
                if(!routeValues.ContainsKey("action"))
                    routeValues.Add("action", action);

            StringBuilder sb = new StringBuilder();
            sb.Append("<div class=\"Pager\">");

            // 目前頁數非第1頁顯示「上一頁」連結
            if (pager.PageIndex > 1)
                sb.Append(GeneratePageLink("上一頁", pager.PageIndex - 1, helper, routeValues, null));

            // 「<<(前10頁)」 與 「First(第一頁)」連結
            if (pager.PageIndex - 4 > 1)
            {
                sb.Append(GeneratePageLink("First", 1, helper, routeValues, null));
                sb.Append(GeneratePageLink("<<", (pager.PageIndex - 10 >= 1) ? pager.PageIndex - 10 : 1, helper, routeValues, null));
            }

            // pageNumber : [4 / 1(Current) / 4]
            #region 設定顯示頁數的起始值
            int below = pager.PageIndex - 4;
            int above = pager.PageIndex + 4;

            if (below < 1)/*PageIndex 為最前4頁*/
            {   
                below = 1;
                above = pager.PageCount >= below + 8 ? below + 8 : pager.PageCount;
            }
            if (above > pager.PageCount)/*PageIndex 為最後4頁*/
            {
                above = pager.PageCount;
                below = pager.PageCount - 9 < 1 ? 1 : pager.PageCount - 9;
            }
            #endregion

            for (int i = below; i <= above; i++)
            {
                //目前頁數設定Css Class Name Current
                object htmlAttributes = null;
                if(i == pager.PageIndex)
                    htmlAttributes = new { @class = "Current" };

                sb.Append(GeneratePageLink(i.ToString(), i, helper, routeValues, htmlAttributes));
            }

            // 「<<(後10頁)」 與 「Last(最後一頁)」連結
            if (pager.PageIndex + 4 < pager.PageCount)
            {
                sb.Append(GeneratePageLink(">>", (pager.PageIndex + 10 <= pager.PageCount) ? pager.PageIndex + 10 : pager.PageCount, helper, routeValues, null));
                sb.Append(GeneratePageLink("Last", pager.PageCount, helper, routeValues, null));
            }

            // 目前頁數非最後1頁顯示「下一頁」連結
            if (pager.PageIndex < pager.PageCount)
            {
                sb.Append(GeneratePageLink("下一頁", pager.PageIndex + 1, helper, routeValues, null));
            }

            sb.Append("</div>");
            return sb.ToString();
        }

        private static string GeneratePageLink(string linkText, int linkPageIndex, HtmlHelper helper, RouteValueDictionary routeValues, object htmlAttributes)
        {
            var htmlAttr = new RouteValueDictionary(htmlAttributes);
            htmlAttr.Add("title", "page");

            var pageLinkValueDictionary = new RouteValueDictionary(routeValues);
            pageLinkValueDictionary.Add("page", linkPageIndex);

            return helper.RouteLink(linkText, pageLinkValueDictionary, htmlAttr);
        }
    }

Result

 

↓程式下載↓
DemoPager.rar