修改ASP.NET MVC Ajax分頁組件ASP.NET MvcPager一個小Bug並修該樣式為自己所用（三）

下面將示範如何將上述控制項改為如下樣式：

 

 

修改如下：

找到PagerOptions.cs檔案，

AutoHide = true;            PageIndexParameterName = "pageIndex";            NumericPagerItemCount = 2;            AlwaysShowFirstLastPageNumber = false;            ShowPrevNext = true;            PrevPageText = " ";// LangHelper.WordGet("上一頁");//"上一頁";            NextPageText = " ";//LangHelper.WordGet("下一頁");// "下一頁";            ShowNumericPagerItems = true;            ShowFirstLast = false;            //FirstPageText = LangHelper.WordGet("首頁");//"首頁";            //LastPageText = LangHelper.WordGet("尾頁");//"尾頁";            ShowMorePagerItems = true;            MorePageText = "...";            ShowDisabledPagerItems = true;            SeparatorHtml = "  ";            UseJqueryAjax = false;            ShowPageIndexBox = false;            ShowGoButton = true;            PageIndexBoxType = PageIndexBoxType.TextBox;            MaximumPageIndexItems = 1;            GoButtonText = LangHelper.WordGet("跳轉");//"跳轉";            ContainerTagName = "div";            InvalidPageIndexErrorMessage = LangHelper.WordGet("頁索引無效");//"頁索引無效";            PageIndexOutOfRangeErrorMessage = LangHelper.WordGet("頁索引超出範圍");//"頁索引超出範圍";            MaxPageIndex = 0;

 找到PagerBuilder.cs檔案中將原方法GenerateAnchor追加以下代碼：

                   tag.MergeAttribute("href", url);//原來代碼位置開始                    switch (item.Type)                    {                        case PagerItemType.PrevPage: tag.MergeAttribute("class", "enablePreClass"); break;                        case PagerItemType.NextPage: tag.MergeAttribute("class", "enableNextClass"); break;                        case PagerItemType.NumericPage: tag.MergeAttribute("class", "enableNumClass"); break;                        case PagerItemType.MorePage: tag.MergeAttribute("class", "enableNumClass"); break;                    }                                        tag.MergeAttributes(_ajaxOptions.ToUnobtrusiveHtmlAttributes());//原來代碼位置結束

 

再這個檔案相應方法做如下修改：

private MvcHtmlString GenerateJqAjaxPagerElement(PagerItem item)        {            if (item.Disabled)            {                string str = "";                switch (item.Type)                {                    case PagerItemType.PrevPage: str = String.Format("<a class=\"disabledPreClass\" disabled=\"disabled\">{0}</a>", item.Text); break;                    case PagerItemType.NextPage: str = String.Format("<a class=\"disabledNextClass\" disabled=\"disabled\">{0}</a>", item.Text); break;                    case PagerItemType.NumericPage: str = String.Format("<a class=\"disabledNumClass\" disabled=\"disabled\">{0}</a>", item.Text); break;                    case PagerItemType.MorePage: str = String.Format("<a class=\"disabledNumClass\" disabled=\"disabled\">{0}</a>", item.Text); break;                }                return CreateWrappedPagerElement(item, str);            }            else            {                return CreateWrappedPagerElement(item, GenerateAnchor(item));            }        }

前台Css樣式：

.enableNumOrClass{margin-top:20px;}.enableNumOrClass a{display:inline-block;padding:0 8px;height:18px;line-height:18px;text-decoration:none;color:#000000;}.disabledPreClass{background:url(../images/next_Icon0.png) no-repeat center 1px;}.enablePreClass{background:url(../images/next_Icon0.png) no-repeat center -19px;}.enableNextClass{background:url(../images/next_Icon0.png) no-repeat center -59px;}.disabledNextClass{background:url(../images/next_Icon0.png) no-repeat center -40px;}.enableNumClass{border:1px solid #cecece;background:#f9f9f9;}

那個向上向下的箭頭圖片：