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

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