MvcPager分頁(yè)控件適用于Bootstrap

更新時(shí)間：2017年06月03日 09:22:27 作者：HackerVirus

這篇文章主要為大家詳細(xì)介紹了MvcPager分頁(yè)控件，修改后適用于Bootstrap，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

軟件開(kāi)發(fā)分頁(yè)效果必不可少,對(duì)于Asp.Net MVC 而言，MvcPager 是個(gè)不錯(cuò)的選擇。

請(qǐng)?jiān)L問(wèn)http://www.webdiyer.com/mvcpager/

由于自帶的分頁(yè)樣式不能和項(xiàng)目整體風(fēng)格兼容，所以我們準(zhǔn)備改寫源代碼，使其能夠使用Bootstrap 的分頁(yè)樣式。

先來(lái)查看兩種分頁(yè)的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>

一個(gè)ul標(biāo)簽，li 下面有一個(gè)a 標(biāo)簽.

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">首頁(yè)</a>&nbsp;&nbsp;<a disabled="disabled">上一頁(yè)</a>&nbsp;&nbsp;1&nbsp;&nbsp;<a href="/mvcpager/demo/basic/2/">2</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/3/">3</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/4/">4</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/5/">5</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/2/">下一頁(yè)</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/5/">尾頁(yè)</a>&nbsp;&nbsp;<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)-->

這里就比較簡(jiǎn)單了,一個(gè)div 下只有a 標(biāo)簽.

那么問(wèn)題來(lái)了，我們?cè)撛趺葱薷脑创a來(lái)達(dá)到Bootstrap 分頁(yè)效果呢？

1、到官網(wǎng)下載MvcPager 源代碼

2、開(kāi)始研究html 生成規(guī)則.

這兩步筆者已經(jīng)幫你做了，下面跟我一起來(lái)做修改.

通過(guò)代碼調(diào)試跟蹤和查看源碼注釋，我們知道了最終的HTML 呈現(xiàn)是在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標(biāo)簽。由于ul標(biāo)簽是最后加上去的所以我們?cè)谶@里修改：

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 分頁(yè)樣式
  tb.InnerHtml = "<ul class='pagination'>" + sb.ToString() + "</ul>";

有了以上還不行，還需要為當(dāng)前頁(yè)增加樣式，

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

 private string GenerateAjaxAnchor(PagerItem item)
 {
  string url = GenerateUrl(item.PageIndex);
  if (string.IsNullOrWhiteSpace(url))
   //這里直接假的行內(nèi)樣式，可以使用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標(biāo)簽
  return "<li>" + tag.ToString(TagRenderMode.Normal) + "</li>";
 }

對(duì)源代碼的修改就是這么多了，我們一起看看效果.

中文版效果：