修改MvcPager分頁控件以適用Bootstrap 效果(含英文版,可下載)

時間 2019-11-10

標籤修改 mvcpager 分頁控件適用 bootstrap 效果英文下載欄目 Bootstarp 简体版

原文原文鏈接

軟件開發分頁效果必不可少,對於Asp.Net MVC 而言，MvcPager 是個不錯的選擇。請訪問http://www.webdiyer.com/mvcpager/html

因爲自帶的分頁樣式不能和項目總體風格兼容，因此咱們準備改寫源代碼，使其可以使用Bootstrap 的分頁樣式。web

先來查看兩種分頁的html代碼ajax

Bootstrap 樣式：mvc

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

一個ul標籤，li 下面有一個a 標籤.ui

MvcPager 樣式：url

1 <!--MvcPager v2.0 for ASP.NET MVC 4.0+ © 2009-2013 Webdiyer (http://www.webdiyer.com)-->
2 <div data-maxpages="5" data-mvcpager="true" data-pageparameter="id" data-urlformat="/mvcpager/demo/basic/__id__/"><a disabled="disabled">首頁</a>&nbsp;&nbsp;<a disabled="disabled">上一頁</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/">下一頁</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/5/">尾頁</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>
3 <!--MvcPager v2.0 for ASP.NET MVC 4.0+ © 2009-2013 Webdiyer (http://www.webdiyer.com)-->

這裏就比較簡單了,一個div 下只有a 標籤.spa

那麼問題來了，咱們該怎麼修改源碼來達到Bootstrap 分頁效果呢？調試

一、到官網下載MvcPager 源代碼code

二、開始研究html 生成規則.orm

這兩步筆者已經幫你作了，下面跟我一塊兒來作修改.

經過代碼調試跟蹤和查看源碼註釋，咱們知道了最終的HTML 呈現是在PagerBuilder.cs 下的RenderPager() 方法.

 1  var sb = new StringBuilder();
 2             if (_ajaxPagingEnabled)
 3             {
 4                 foreach (PagerItem item in pagerItems)
 5                 {
 6                         //修改前
 7                   //sb.Append( GenerateAjaxPagerElement(item) );
 8                        //修改後
 9                     sb.Append("<li>" + GenerateAjaxPagerElement(item) + "</li>");
10                 }
11             }
12             else
13             {
14                 foreach (PagerItem item in pagerItems)
15                 {
16                       //修改前
17                      //sb.Append( GeneratePagerElement(item) );
18                       //修改後
19                     sb.Append("<li>" + GeneratePagerElement(item) + "</li>");
20                 }
21             }

修改以上代碼以得到li標籤。因爲ul標籤是最後加上去的因此咱們在這裏修改：

 1    if (_pagerOptions.ShowPageIndexBox)
 2             {
 3                 if (!_ajaxPagingEnabled)
 4                 {
 5                     var attrs = new Dictionary<string, object>();
 6                     AddDataAttributes(attrs);
 7                     tb.MergeAttributes(attrs, true);
 8                 }
 9                 sb.Append(BuildGoToPageSection());
10             }
11             else
12                 sb.Length -= _pagerOptions.PagerItemsSeperator.Length;
13              //修改前
14              //  tb.InnerHtml = sb.ToString() ;
15              //修改後，爲ul加上class='pagination'以得到boostrap 分頁樣式
16             tb.InnerHtml = "<ul class='pagination'>" + sb.ToString() + "</ul>";

有了以上還不行，還須要爲當前頁增長樣式，

修改後的GenerateAjaxAnchor(PagerItem item) 方法爲：

 1   }
 2         private string GenerateAjaxAnchor(PagerItem item)
 3         {
 4             string url = GenerateUrl(item.PageIndex);
 5             if (string.IsNullOrWhiteSpace(url))
 6                   //這裏直接假的行內樣式，能夠使用class替換掉
 7                 return "<a  style='z-index:2;color:#fff; cursor: default;background-color: #428bca;  border-color: #428bca;' disabled='disabled'>" + item.Text + "</a>";
 8             //return HttpUtility.HtmlEncode(item.Text);
 9             var tag = new TagBuilder("a") { InnerHtml = item.Text };
10             tag.MergeAttribute("href", url);
11             tag.MergeAttribute("data-pageindex", item.PageIndex.ToString(CultureInfo.InvariantCulture));
12             //修改後，添加了li標籤
13             return "<li>" + tag.ToString(TagRenderMode.Normal) + "</li>";
14         }