.NET Asp.net开发.NET

使用PagedLive进阶说明

2017-04-17  本文已影响60人  凉风有兴

前一段时间我根据书中的内容,写了一篇入门级的ASP.NET MVC 分页制作博客《ASP.NET MVC:排序、搜索、分页以及多对多数据库》,里面就有描述到通过PagedLive对数据进行分页,但里面的代码只可以在小网站中应用,在项目实际应用的时候,如果数据库过大的时候,这种完全没有优化过的代码会使网站反应过慢。

在这篇文章里面会继续使用PagedLive这个工具,内容包括:对ASP.NET MVC的路由设置,使用PagedLive中的StaticPagedList,PagedLive一些自定义模板,这些都是我在实际的项目中应用到的,代码进行简化、加工、提纯,但保证一定可以运行。(如何安装PagedLive请参考文章:ASP.NET MVC:排序、搜索、分页以及多对多数据库

首先来说明一下,假设我这个项目是用在一个News数据库的List页面,控制器取名为NewsController,页面是默认的Index,那么需要做如下设置:

1.打开App_Start文件夹,点击RouteConfig.cs,增加以下代码:

routes.MapRoute(
              name: "Default2",
              url: "News/Index/{page}",
              defaults: new { controller = "News", action = "Index", page = 1 }
          );

如果不做路由设置,那么该页面的网站是:http://www.xxx.com/News?page=2 或者是 http://www.xxx.com/News/Index?page=2 (根据系统路由的默认设置,这两者都是可以的)。

设置路由以后,运行页面,http://www.xxx.com/News/Index/2(News控制器如果没有其它页面,甚至可以把Index也给去掉。)

2.打开控制器NewsController,修改Index

using PagedList;
....

 public ActionResult Index(int? page)
        {
            int pageSize = 10;
            int pageIndex = page ?? 1;
            int totalCount = 0;
            var newslist = GetNews(pageIndex, pageSize, ref totalCount);
            var NEWSlistpage = new StaticPagedList<News>(newslist, pageIndex, pageSize, totalCount);
            return View(NEWSlistpage);
        }

        public List<News> GetNews(int pageIndex,int pageSize,ref int totalCount)
        {
            var newslist = (from p in db.News orderby p.NewsID descending select p).Skip((pageIndex - 1) * pageSize).Take(pageSize);
            totalCount = db.News.Count();
            return newslist.ToList();
        }

从代码中,我们可以看出,我们首先提取出每一页需要的数据,采用Skip和Take进行数据提取,再进行ToList,最后把数据注入到StaticPagedList<News>中,一切就完成了,等着视图把它渲染出来。

3.视图的必要代码如下:

@using PagedList;
@using PagedList.Mvc;
@model PagedList.StaticPagedList<xxx.Models.News>
  ......
  
  @section AddToHead{
    <link href="@Url.Content("~/Content/PagedList.css")" rel="stylesheet" type="text/css" />
}
.....
  
@foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Title)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Subtitle)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.date)
                    </td>


                    <td>
                        @Html.ActionLink("编辑新闻", "EditNews", new { id = item.NewsID }) |

                        @Html.ActionLink("删除新闻", "DeleteNews", new { id = item.NewsID })
                    </td>
                </tr>
            }
        </tbody>
    </table>

    @Html.PagedListPager(Model, page => Url.Action("Index", new { page =page }), new PagedListRenderOptions { LinkToFirstPageFormat = "<< 第一页", LinkToPreviousPageFormat = "< 上一页", LinkToNextPageFormat = "下一页 >", LinkToLastPageFormat = "最末页 >>" })
</div>

上面视图的代码只是显示必要代码,但是总体的思路已经出来了,引用PagedList.css,数据怎么显示等等,最后通过@Html.PagedListPager 将分页的模板给显示出来。运行结果如下图。使用PagedLive,分页就是这么简单!

mark

最后,关于分页样式模板--例如,要不要显示最前页最后页、如何显示等,参考下面的示例。有时间,不妨将所有的代码都运行一遍,下次在设计的时候就心里有底了。

<h2>Out-of-the-box Pager Configurations</h2>

<h3>Default Paging Control</h3>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page }))

<h3>Minimal Paging Control</h3>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.Minimal)

<h3>Minimal Paging Control w/ Page Count Text</h3>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.MinimalWithPageCountText)

<h3>Minimal Paging Control w/ Item Count Text</h3>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.MinimalWithItemCountText)

<h3>Page Numbers Only</h3>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.PageNumbersOnly)

<h3>Only Show Five Pages At A Time</h3>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.OnlyShowFivePagesAtATime)

<!-- ---------------------------------------- -->

<h2>Custom Pager Configurations</h2>

<h3>Custom Wording (<em>Spanish Translation Example</em>)</h3>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page }), new PagedListRenderOptions { LinkToFirstPageFormat = "<< Primera", LinkToPreviousPageFormat = "< Anterior", LinkToNextPageFormat = "Siguiente >", LinkToLastPageFormat = "Ultima >>" })

<h3>Show Range of Items For Each Page</h3>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page }), new PagedListRenderOptions { FunctionToDisplayEachPageNumber = page => ((page - 1) * ViewBag.Names.PageSize + 1).ToString() + "-" + (((page - 1) * ViewBag.Names.PageSize) + ViewBag.Names.PageSize).ToString(), MaximumPageNumbersToDisplay = 5 })

<h3>With Delimiter</h3>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page = page }), new PagedListRenderOptions { DelimiterBetweenPageNumbers = "|" })

上一篇下一篇

猜你喜欢

热点阅读