澳门威利斯人_威利斯人娱乐「手机版」

来自 办公软件 2019-06-29 11:44 的文章
当前位置: 澳门威利斯人 > 办公软件 > 正文

MvcPager分页控件,MvcPager分页控件以适用Bootstrap

随笔- 9  文章- 0  评论- 33 

软件开拓分页效果不能缺少,对于Asp.Net MVC 来讲,MvcPager 是个精确的精选。

  软件开辟分页效果不可缺少,对于Asp.Net MVC 来讲,MvcPager 是个不错的取舍。请访问

修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载)

 

  软件开荒分页效果不可或缺,对于Asp.Net MVC 来讲,MvcPager 是个准确的抉择。请访问

  

   由于自带的分页样式不能和品种全部风格兼容,所以大家策画改写源代码,使其能够运用Bootstrap 的分页样式。

   先来查阅三种分页的html代码

    Bootstrap 样式:

1  <ul >  2     <li ><a  >«</a></li>  3     <li ><a  >1 (current)</a></li>  4     ...  5   </ul>

 一个ul标签,li 上面有贰个a 标签.

   MvcPager 样式:

威尼斯人在线投注 1

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  >2</a>&nbsp;&nbsp;<a  >3</a>&nbsp;&nbsp;<a  >4</a>&nbsp;&nbsp;<a  >5</a>&nbsp;&nbsp;<a  >下一页</a>&nbsp;&nbsp;<a  >尾页</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)-->

威尼斯人在线投注 2

威尼斯人在线投注,这里就相比较轻易了,三个div 下唯有a 标签.

 那么难题来了,大家该怎么修改源码来到达Bootstrap 分页效果呢?

  1、到官网下载MvcPager 源代码

  2、起首商量html 生成准绳.

 这两步作者曾经帮您做了,下边跟本身一块儿来做修改.

  通过代码调节和测量试验追踪和查看源码注释,大家清楚了最终的HTML 展现是在PagerBuilder.cs 下的RenderPager() 方法.

  

威尼斯人在线投注 3

 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             }

威尼斯人在线投注 4

  修改上述代码以博取li标签。由于ul标签是终极加上去的之所以大家在此间修改:

   

威尼斯人在线投注 5

 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加上以获得boostrap 分页样式  16             tb.InnerHtml = "<ul >"   sb.ToString()   "</ul>";

威尼斯人在线投注 6

    有了上述还百般,还须要为当前页扩展样式,

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

 

威尼斯人在线投注 7

 1   }   2         private string GenerateAjaxAnchor(PagerItem item)   3         {   4             string url = GenerateUrl(item.PageIndex);   5             if (string.IsNullOrWhiteSpace(url))   6                   //这里直接假的行内样式,可以使用class替换掉   7                 return "<a    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         }

威尼斯人在线投注 8

 对源代码的更换正是这么多了,大家一道探访效果.

  汉语版效果:

威尼斯人在线投注 9

  英文版效果(一样是修改源码,增添了对英文的支撑):

威尼斯人在线投注 10

 

 代码点击这里下载

 

 

分类: ASP.NET, Bootstrap


请访问

  

由于自带的分页样式无法和连串总体风格包容,所以大家筹划改写源代码,使其能够运用Bootstrap 的分页样式。

   由于自带的分页样式无法和档案的次序总体风格包容,所以我们妄想改写源代码,使其能够使用Bootstrap 的分页样式。

先来查阅二种分页的html代码

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

Bootstrap 样式:

    Bootstrap 样式:

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

叁个ul标签,li 下边有二个a 标签.

 叁个ul标签,li 下边有贰个a 标签.

MvcPager 样式:

   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)-->
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 标签.

那边就相比较轻松了,多少个div 下唯有a 标签.

 那么难题来了,大家该怎么修改源码来完成Bootstrap 分页效果呢?

 那么难题来了,我们该怎么修改源码来达成Bootstrap 分页效果呢?

本文由澳门威利斯人发布于办公软件,转载请注明出处:MvcPager分页控件,MvcPager分页控件以适用Bootstrap

关键词: 澳门威利斯人