Asp.NET MVC X.PageList.MVC 分页详解以及自定义样式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tuchangsheng801004/article/details/47340477

最近在研究MVC,自己做了个小项目;其中用到了分页功能,在网上找了很多相关的第三方插件,最后选择了X.PageList.MVC,插件是开源的,有利于学习所以选择了它,这并不是说其它的分页插件不好,只是个人爱好,当然,用于以后还是会说好的。^^

首先可以看下源,在GitHub上,地址如下:

X.PageList.MVC GitHub 源代码地址

初步看了一个项目比较精简,核心部分为X.PagedList.Mvc中的内容,配置文件为:PagedListRenderOptions.cs

这个插件可以完全的自定义分页部分的显示样式,这有利于我们的个性化配置,下面讲下常用项目的配置:

PagedListRenderOptions.Classic.ContainerDivClasses = new String[] { "pageList" };//自定义需要删除这一句,这是默认样式,不可修改
            PagedListRenderOptions pagedListRenderOptions = new PagedListRenderOptions();
            pagedListRenderOptions.ContainerDivClasses = new String[] { "pageList" };
            pagedListRenderOptions.DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded;
            pagedListRenderOptions.DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded;
            pagedListRenderOptions.DisplayLinkToPreviousPage = PagedListDisplayMode.Always;
            pagedListRenderOptions.DisplayLinkToNextPage = PagedListDisplayMode.Always;
            pagedListRenderOptions.PageCountAndCurrentLocationFormat = "Page {0} of {1}";
            pagedListRenderOptions.Display = PagedListDisplayMode.Always;
            pagedListRenderOptions.MaximumPageNumbersToDisplay = 10;
            pagedListRenderOptions.LinkToFirstPageFormat = "首页";
            pagedListRenderOptions.LinkToLastPageFormat = "尾页";
            pagedListRenderOptions.LinkToPreviousPageFormat = "上一页";
            pagedListRenderOptions.LinkToNextPageFormat = "下一页";
            pagedListRenderOptions.DisplayLinkToIndividualPages = true;
            pagedListRenderOptions.DisplayPageCountAndCurrentLocation = true;
            pagedListRenderOptions.DelimiterBetweenPageNumbers = "|";//每一页号之间会出现的文字。如果为空或空白是指定的,没有分隔符将显示
这项配置的意思可以从字面上就可以了解到。

说个题外话,在写上面这段配置时浪费了些时间,不知道有没有理解上面代码中第一句话,这是我看了GitHub上的配置后,第一次想自己去自定义显示样式,然后看到GitHub上写样式时用的是“PagedListRenderOptions.Classic”或者一些其它的默认样式,我就想着这样是不是可以自定义呢(为了这个我还特地的Dubug了一下看里面有些什么内容,因为使用Nuget下载下来的没有注释),然而当我也了第一句后在页面上看时并不是我想要的结果,然后我想这是什么原因,后来我才想到是不是可以 NEW一个对象出来然后再传参,结果很幸运的猜中了。

上面是一些常用的配置,有了这些我们一般的个性化是足够用的,下面讲具体的使用方法:

首先是Controllers代码的写法:

public ActionResult AboutUs(int page=1)
        {            
                    List<PartContent> partContents = (from PartContent partContent in db.TBPartContents
                                                      select partContent).OrderBy(s => s.Sort).ToList();
                    return View("News", partContents.ToPagedList<PartContent>(page,20));
        }

只要在我们查询的数据后面使用“ToPagedList<PartContent>(page,1)”或者“ToPagedList(page,1)”;该方法声明有两种,支持IEnumerable和IQueryable类型的数据
<span style="white-space:pre">	</span>public static IPagedList<T> ToPagedList<T>(this IEnumerable<T> superset, int pageNumber, int pageSize);
        public static IPagedList<T> ToPagedList<T>(this IQueryable<T> superset, int pageNumber, int pageSize);
“ToPagedList”和“ToPagedList<PartContent>”的声明一样,同样也支持上面两种数据类型。

View代码写法:

@model IPagedList<PartContent>
<div class="c-newsList">
                @foreach (PartContent partContent in Model)
                {
                    <dl>
                    <dt><a href="newsDetail.html">
                        <img src="@partContent.ImageUrl" alt=""/></a></dt>
                    <dd>
                        <a href="newsDetail.html">@partContent.Title</a>
                        <p>
                            @partContent.SubTitle</p>
                        <span>更新时间:2014-07-21 13:07:18</span>
                    </dd>
                </dl>
                }
                @Html.PagedListPager(Model, page => Url.Action("AboutUs", new { page,Id=ViewBag.ID }),PageListINI.PageListIni())
            </div>

主要有两个地方,一是:@model IPagedList<PartContent>,使用@model来定义数据类型,当然这里是可以使用数据转换的,不单一是这一个方法,第二是:@Html.PagedListPager(Model, page => Url.Action("AboutUs", new { page,Id=ViewBag.ID }),PageListINI.PageListIni()),这条语句定义了显示的方法,点击时转到那个Action来执行,数据模型是那个,使用什么样式来显示,这里细心的可以看到我在第三个参数定义显示样式时使用的不是默认的样式,而是自定义的样式显示,我为了统一样式自己定义了一个类,并在类中使用上面的自定义方法来自定义了样式的显示。

另外还需要配置一些“routes”,指定一些路由信息,比如我的是这样配置的:

routes.MapRoute(
               name: "PagedList",
               url: "{controller}/{action}/{id}/{Page}",
               defaults: new { controller = "Home", action = "Index",Page=UrlParameter.Optional, id = UrlParameter.Optional }
           );

小技巧:

  1. 如果在分页的Action中还有另外一些参数需要传递可以在Url.Action的参数部分按正常的方式进行添加(上面的示例中是有传一个变量ID的,可以参考一些)。
  2. 如果需要自定义样式可以新建一个样式初始化的类来全局配置一些样式,在分页里直接调用,也可以做到样式统一的效果

关于X.PageList.MVC分页插件的讲解至此结束,第一次使用,可能不是很全面,如有更好的欢迎留言或者分享。


展开阅读全文

没有更多推荐了,返回首页