實戰MvcPager（PagerOptions自定義樣式&同、異步）

　　ASP.NET MVC下的分頁控件MvcPager用起來簡直太嗨呸了，兩句代碼實現一個分頁，而且需要改變樣式的時候直接構造PagerOptions類

　　實戰無需多說，拿來用之即可。個人覺得對性能影響不大的東西，如果不是感受其編碼思想，只需了解使用功能，無需深入，就和人的生命本來就有限，取舍也因人而異

 

一、首先是簡單拼接字符串的分頁CssPager，直接改八改八樣式和字符串就能用了

　　封裝好的Html擴展方法：

  /// <summary>
        /// 分頁
        /// </summary>
        /// <param name="htmlhelper"></param>
        /// <param name="pageSize"></param>
        /// <param name="currentPage"></param>
        /// <param name="totalCount"></param>
        /// <param name="href"></param>
        /// <returns></returns>
        public static string GetPager(this HtmlHelper htmlhelper, int pageSize, int currentPage, int totalCount, string href)
        {
            pageSize = pageSize == 0 ? 3 : pageSize;
            var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //總頁數
            var output = new StringBuilder();
            if (totalPages > 1)
            {
                if (currentPage != 1)
                {//處理首頁連接
                    output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex=1&pageSize={1}'>首頁</a></li> ", href, pageSize);
                }
                else
                {
                    output.Append("<li><a class='news_next3' style='cursor:default;background-color:#C4C4C4;' href='javascript:void(0)'>首頁</a></li> ");
                }
                if (currentPage > 1)
                {//處理上一頁的連接
                    output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex={1}&pageSize={2}'> ↶ </a></li> ", href, currentPage - 1, pageSize);
                }
                else
                {
                    output.Append("<li><a class='news_next3' style='cursor:default;background-color:#C4C4C4;' href='javascript:void(0)'> ↶ </a></li> ");
                }

                output.Append(" ");


                int start = 0, end = 0, tmpStart = 0, tmpEnd = 0;
                if (currentPage >= 1 && currentPage - 2 >= 1)
                {
                    start = currentPage - 2;
                }
                else if (currentPage >= 1 && currentPage - 2 < 1)
                {
                    start = 1;
                    tmpEnd = 2 - currentPage + 1;
                }

                if (totalPages >= currentPage && currentPage + 2 <= totalPages)
                {
                    end = currentPage + 2;
                }
                else if (totalPages >= currentPage && currentPage + 2 > totalPages)
                {
                    end = totalPages;
                    tmpStart = (currentPage + 2) - totalPages;
                }

                start = start - tmpStart < 1 ? 1 : start - tmpStart;
                end = end + tmpEnd > totalPages ? totalPages : end + tmpEnd;

                for (int i = start; i <= end; i++)
                {
                    if (currentPage != i)
                    {

                        output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex={1}&pageSize={2}'>{3}</a></li> ", href, i, pageSize, i);
                    }
                    else
                    {
                        output.AppendFormat("<li><a class='news_next2' href='{0}pageIndex={1}&pageSize={2}'>{3}</a></li> ", href, i, pageSize, i);
                    }
                }


                if (currentPage < totalPages)
                {//處理下一頁的鏈接
                    output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex={1}&pageSize={2}'> ↷ </a></li> ", href, currentPage + 1, pageSize);
                }
                else
                {
                    output.Append("<li><a class='news_next3' style='cursor:default;background-color:#C4C4C4;' href='javascript:void(0)'> ↷ </a></li> ");
                }
                output.Append(" ");
                if (currentPage != totalPages)
                {
                    output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex={1}&pageSize={2}'>末頁</a></li> ", href, totalPages, pageSize);
                }
                else
                {
                    output.Append("<li><a class='news_next3' style='cursor:default;background-color:#C4C4C4;' href='javascript:void(0)'>末頁</a></li> ");
                }
                output.Append(" ");
            }
            //output.AppendFormat("<p>共{0}條記錄  {1}/{2} 頁</p>", totalCount, currentPage, totalPages);
            return output.ToString();
        }

　　View中調用，樣式包就不貼了，源碼里有

@Html.Raw(Html.GetPager(3, Model.CurrentPageIndex, Model.TotalItemCount, string.Format("?cid={0}&nid={1}&", 1, 2)))

 

二、MvcPager兩句代碼搞定：Action中new PagedList（2.0版本直接調用IEnumerable<T>的ToPagedList擴展方法），view中調用MvcPager封裝的Html.Pager擴展方法

　　Action:

 public ActionResult Index(int pageIndex = 1, int pageSize = 3)
        {
            List<People> list = new List<People>() { 
                                 new People(){ ID=1,Name="lily",Age=16},
                                 ......
                                 };
            var data = list.Skip((pageIndex - 1) * pageSize).Take(pageSize);
            PagedList<People> pl = new PagedList<People>(data, pageIndex, pageSize, list.Count);
            if (Request.IsAjaxRequest())
            {
                return PartialView("_AjaxIndex", pl);
            }
            return View(pl);
        }

　　1、默認顯示的樣式

@Html.Pager(Model, new PagerOptions()
       {
           PageIndexParameterName = "pageIndex",
           ShowPageIndexBox = true,
           PageIndexBoxType = PageIndexBoxType.DropDownList,
           ShowGoButton = true,
           PageIndexBoxWrapperFormatString = "跳轉到第{0}頁"
       })

　　2、添加大部分樣式都可以通過構造PagerOptions給屬性賦值就能搞定，但是要給原生生成的A標簽添加樣式就需要修改源碼了

@Html.Pager(Model, new PagerOptions()
       {
           //分頁外側標簽，默認為div
           ContainerTagName = "ul",
           //上、下一頁  // "<span class=\"news_next3\"> ↶ </span>" HTML會被渲染
           PrevPageText = " ↶ ",
           NextPageText = " ↷ ",
           //默認
           //FirstPageText = "首頁",
           //LastPageText = "尾頁",
           //AlwaysShowFirstLastPageNumber = false,
           //ShowPrevNext = true,
           PageIndexParameterName = "pageIndex",
           //顯示下拉頁
           //ShowPageIndexBox = true,
           //PageIndexBoxType = PageIndexBoxType.DropDownList,
           //ShowGoButton = true,
           //GoButtonText = "Go",
           //PageIndexBoxWrapperFormatString = "跳轉到第{0}頁",

           ////首、末、上、下、頁碼 的a標簽，a標簽外側全部嵌套span
           //PagerItemWrapperFormatString = "<span class=\"news_next3\">{0}</span>",

           //當前頁碼（不包含首、末、上、下） 嵌套span標簽
           CurrentPagerItemWrapperFormatString = "<li><span class=\"news_next2\">{0}</span></li>",
           //其他頁碼（不包含首、末、上、下） 嵌套span標簽
           NumericPagerItemWrapperFormatString = "<li><span class=\"news_next3\">{0}</span></li>",
           //首、末、上、下（不包含頁碼） 嵌套span標簽，與上相反
           NavigationPagerItemWrapperFormatString = "<li><span class=\"news_next3\">{0}</span></li>",

           //pageIndex超出范圍，一般直接修改url和刪除掉最后一頁數據時候發生
           InvalidPageIndexErrorMessage = "頁索引無效",
           PageIndexOutOfRangeErrorMessage = "頁索引超出范圍"
       })

　　3、圖片右側為AJAX分頁，調用Ajax.Pager和Html.AjaxPager都是可以的，唯一需要注意的是把分頁控件放到UpdateTargetId里面

@Ajax.Pager(Model, new PagerOptions()
       {
           PageIndexParameterName = "pageIndex",
           ShowPageIndexBox = true,
           PageIndexBoxType = PageIndexBoxType.DropDownList,
           ShowGoButton = true,
           PageIndexBoxWrapperFormatString = "跳轉到第{0}頁"
       }, new AjaxOptions() { UpdateTargetId = "upID" })

　　

　　源碼：http://files.cnblogs.com/NotAnEmpty/MvcPager.rar