MvcPager分页控件 适用于Bootstrap

MvcPager分页控件 适用于Bootstrap

软件开发分页效果必不可少,对于Asp.Net MVC 而言，MvcPager 是个不错的选择。

请访问http://webdiyer.com/mvcpager/

由于自带的分页样式不能和项目整体风格兼容，所以我们准备改写源代码，使其能够使用Bootstrap 的分页样式。

先来查看两种分页的html代码

Bootstrap 样式：

...

一个ul标签，li 下面有一个a 标签.

MvcPager 样式：

这里就比较简单了,一个div 下只有a 标签.

那么问题来了，我们该怎么修改源码来达到Bootstrap 分页效果呢？

1、到官网下载MvcPager 源代码

2、开始研究html 生成规则.

这两步笔者已经帮你做了，下面跟我一起来做修改.

通过代码调试跟踪和查看源码注释，我们知道了最终的HTML 呈现是在PagerBuilder.cs 下的RenderPager() 方法.

var sb = new StringBuilder();

if (_ajaxPagingEnabled)

{

foreach (PagerItem item in pagerItems)

{

//修改前

//sb.Append( GenerateAjaxPagerElement(item) );

//修改后

sb.Append("

}

}

else

mfvyO {

foreach (PagerItem item in pagerItems)

{

//修改前

//sb.Append( GeneratePagerElement(item) );

//修改后

sb.Append("

}

}

修改以上代码以获得li标签。由于ul标签是最后加上去的所以我们在这里修改：

if (_pagerOptions.ShowPageIndexBox)

{

if (!_ajaxPagingEnabled)

{

var attrs = new Dictionary();

AddDataAttributes(attrs);

tb.MergeAttributes(attrs, true);

}

sb.Append(BuildGoToPageSection());

}

else

sb.Length -= _pagerOptions.PagerItemsSeperator.Length;

//修改前

// tb.InnerHtml = sb.ToString() ;

//修改后，为ul加上class='pagination'以获得boostrap 分页样式

tb.InnerHtml = "

有了以上还不行，还需要为当前页增加样式，

修改后的GenerateAjaxAnchor(PagerItem item) 方法为：

private string GenerateAjaxAnchor(PagerItem item)

{

string url = GenerateUrl(item.PageIndex);

if (string.IsNullOrWhiteSpace(url))

//这里直接假的行内样式，可以使用class替换掉

return "" + item.Text + "";

//return HttpUtility.HtmlEncode(item.Text);

var tag = new TagBuildmfvyOer("a") { InnerHtml = item.Text };

tag.MergeAttribute("href", url);

tag.MergeAttribute("data-pageindex", item.PageIndex.ToString(CultureInfo.InvariantCulture));

//修改后，添加了li标签

return "

}

对源代码的修改就是这么多了，我们一起看看效果.

中文版效果：

英文版效果(同样是修改源码，增加了对英文的支持)：

源码下载：MvcPager分页控件

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。