MvcPager分页控件适用于Bootstrap

程序员文章站 2022-07-05 20:24:04

软件开发分页效果必不可少,对于asp.net mvc 而言，mvcpager 是个不错的选择。请访问由于自带的分页样式不能和项目整体风格兼容，所以我们准备改写源代码...

软件开发分页效果必不可少,对于asp.net mvc 而言，mvcpager 是个不错的选择。

请访问

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

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

bootstrap 样式：

<ul class="pagination">
 <li class="disabled"><a href="#">«</a></li>
 <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
 ...
 </ul>

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

mvcpager 样式：

<!--mvcpager v2.0 for asp.net mvc 4.0+ © 2009-2013 webdiyer (http://www.webdiyer.com)-->
<div data-maxpages="5" data-mvcpager="true" data-pageparameter="id" data-urlformat="/mvcpager/demo/basic/__id__/"><a disabled="disabled">首页</a>  <a disabled="disabled">上一页</a>  1  <a href="/mvcpager/demo/basic/2/">2</a>  <a href="/mvcpager/demo/basic/3/">3</a>  <a href="/mvcpager/demo/basic/4/">4</a>  <a href="/mvcpager/demo/basic/5/">5</a>  <a href="/mvcpager/demo/basic/2/">下一页</a>  <a href="/mvcpager/demo/basic/5/">尾页</a>  <select data-pageindexbox="true" data-autosubmit="true"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div>
<!--mvcpager v2.0 for asp.net mvc 4.0+ © 2009-2013 webdiyer (http://www.webdiyer.com)-->

这里就比较简单了,一个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("<li>" + generateajaxpagerelement(item) + "</li>");
  }
  }
  else
  {
  foreach (pageritem item in pageritems)
  {
   //修改前
   //sb.append( generatepagerelement(item) );
   //修改后
   sb.append("<li>" + generatepagerelement(item) + "</li>");
  }
  }

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

if (_pageroptions.showpageindexbox)
  {
  if (!_ajaxpagingenabled)
  {
   var attrs = new dictionary<string, object>();
   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 = "<ul class='pagination'>" + sb.tostring() + "</ul>";

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

修改后的generateajaxanchor(pageritem item) 方法为：

 private string generateajaxanchor(pageritem item)
 {
  string url = generateurl(item.pageindex);
  if (string.isnullorwhitespace(url))
   //这里直接假的行内样式，可以使用class替换掉
  return "<a style='z-index:2;color:#fff; cursor: default; border-color: #428bca;' disabled='disabled'>" + item.text + "</a>";
  //return httputility.htmlencode(item.text);
  var tag = new tagbuilder("a") { innerhtml = item.text };
  tag.mergeattribute("href", url);
  tag.mergeattribute("data-pageindex", item.pageindex.tostring(cultureinfo.invariantculture));
  //修改后，添加了li标签
  return "<li>" + tag.tostring(tagrendermode.normal) + "</li>";
 }

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

中文版效果：

MvcPager分页控件适用于Bootstrap