修改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;}

那个向上向下的箭头图片：