【随笔系列】Asp.Net Mvc分页控件PagedList的使用方法及配置

　　　　企业在做Asp.Net Mvc开发过程中，很多时候都是一些CRUD，最基本的就是一个列表页面，然后附带一些功能按钮。如果有数据列表，大多数就会涉及到对数据进行分页，这次就介绍一下Mvc PagedList控件分页的使用方法。Github PagedList链接 。

下面我通过新建Mvc项目来展示PagedList的使用方法。

一、新建BookLibrary解决方案

确定后，选择MVC

然后点击确定。

二、添加PagedList与PagedList.Mvc的程序包。

选择BookLibrary项目，鼠标右键选择“管理NuGet程序包”,在浏览框中输入PagedList.Mvc，选择最新稳定版，我这里选择4.5.0版本，点击安装，然后他会提示有依赖项

点击确定，他会自动安装PagedList与PagedList.Mvc程序包。同时看一下项目的Content文件夹，它会自动添加PagedList.css文件，这个是分页控件的样式表。

三、创建模型与上下文

1、创建Book模型类。

 1 using System;
 2 
 3 namespace BookLibrary.Models
 4 {
 5     public class Book
 6     {
 7         private Guid _Id;        
 8 
 9         public Guid Id
10         {
11             get { return _Id; }
12             set { _Id = value; }
13         }
14 
15         private string _BookName;
16 
17         public string BookName
18         {
19             get { return _BookName; }
20             set { _BookName = value; }
21         }
22 
23         private decimal _Price;
24 
25         public decimal Price
26         {
27             get { return _Price; }
28             set { _Price = value; }
29         }
30 
31         private string _Author;
32 
33         public string Author
34         {
35             get { return _Author; }
36             set { _Author = value; }
37         }
38 
39         private int _Sort;
40 
41         public int Sort
42         {
43             get { return _Sort; }
44             set { _Sort = value; }
45         }
46 
47     }
48 }

2、通过管理NuGet程序包，添加EntityFramework程序包。

3、Web.config添加数据库链接字符串

1   
2     "BookConnection" connectionString="DataBase=|DataDirectory|\Book.mdf;Data Source=.;Initial Catalog=Book;UID=sa;PWD=123qwe;Integrated Security=True" providerName="System.Data.SqlClient"/>
3   

4、创建BookContext上下文类

 1 using System.Data.Entity;
 2 
 3 namespace BookLibrary.Models
 4 {
 5     public class BookContext : DbContext
 6     {
 7         public BookContext() : base("BookConnection") { }
 8         public DbSet Books { get; set; }
 9     }
10 }

四、创建数据库初始化策略

在项目下新建DBInitializer文件夹，并新建BookInitializer类，使用数据库初始化策略

CreateDatabaseIfNotExists，在Seed中添加一些数据

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Data.Entity;
  4 using BookLibrary.Models;
  5 
  6 namespace BookLibrary.DBInitializer
  7 {
  8     public class BookInitializer:CreateDatabaseIfNotExists
  9     {
 10         protected override void Seed(BookContext context)
 11         {
 12             var bookList = new List();
 13             for (int i = 0; i < 15; i++)
 14             {
 15                 bookList.Add(new Book
 16                 {
 17                     Id = Guid.NewGuid(),
 18                     BookName = "你的善良必须有点锋芒",
 19                     Author = "慕颜歌", 
 20                     Price = 50,
 21                     Sort=i
 22                 });
 23                 bookList.Add(new Book
 24                 {
 25                     Id = Guid.NewGuid(),
 26                     BookName = "月亮与六便士",
 27                     Author = "威廉.萨穆塞特.毛姆", 
 28                     Price = 50,
 29                     Sort = i
 30                 });
 31                 bookList.Add(new Book
 32                 {
 33                     Id = Guid.NewGuid(),
 34                     BookName = "将来的你，一定会感谢现在拼命的自己",
 35                     Author = "汤木", 
 36                     Price = 50,
 37                     Sort = i
 38                 });
 39                 bookList.Add(new Book
 40                 {
 41                     Id = Guid.NewGuid(),
 42                     BookName = "你只是看起来很努力",
 43                     Author = "李尚龙", 
 44                     Price = 50,
 45                     Sort = i
 46                 });
 47                 bookList.Add(new Book
 48                 {
 49                     Id = Guid.NewGuid(),
 50                     BookName = "人性的弱点",
 51                     Author = "戴尔.卡耐基", 
 52                     Price = 50,
 53                     Sort = i
 54                 });
 55                 bookList.Add(new Book
 56                 {
 57                     Id = Guid.NewGuid(),
 58                     BookName = "在痛苦的世界尽力而为",
 59                     Author = "俞敏洪", 
 60                     Price = 50,
 61                     Sort = i
 62                 });
 63                 bookList.Add(new Book
 64                 {
 65                     Id = Guid.NewGuid(),
 66                     BookName = "做最好的自己",
 67                     Author = "李开复", 
 68                     Price = 50,
 69                     Sort = i
 70                 });
 71                 bookList.Add(new Book
 72                 {
 73                     Id = Guid.NewGuid(),
 74                     BookName = "白夜行",
 75                     Author = "东野圭吾", 
 76                     Price = 50,
 77                     Sort = i
 78                 });
 79                 bookList.Add(new Book
 80                 {
 81                     Id = Guid.NewGuid(),
 82                     BookName = "活着",
 83                     Author = "余华", 
 84                     Price = 50,
 85                     Sort = i
 86                 });
 87                 bookList.Add(new Book
 88                 {
 89                     Id = Guid.NewGuid(),
 90                     BookName = "拆掉思维里的墙",
 91                     Author = "古典", 
 92                     Price = 50,
 93                     Sort = i
 94                 });
 95                 bookList.Add(new Book
 96                 {
 97                     Id = Guid.NewGuid(),
 98                     BookName = "巨流河",
 99                     Author = "齐邦媛", 
100                     Price = 50,
101                     Sort = i
102                 });
103             }
104             context.Books.AddRange(bookList);
105             base.Seed(context);
106         }
107     }
108 }

在Web.config文件中entityFramework节点下添加如下配置

1   
2       "BookLibrary.Models.BookContext,BookLibrary">
3         "BookLibrary.DBInitializer.BookInitializer,BookLibrary">
4       
5     

五、创建控制器与视图

新建BookController控制器

 1 using PagedList;
 2 using System.Configuration;
 3 using System.Linq;
 4 using System.Web.Mvc;
 5 using BookLibrary.Models;
 6 
 7 namespace BookLibrary.Controllers
 8 {
 9     public class BookController : Controller
10     {
11         /// 

12         /// 数据库上下文
13         /// 
14         private BookContext db;
15         public BookController()
16         {
17             db = new BookContext();
18         }
19 
20         // GET: Book
21         public ActionResult Index(int? page)
22         {
23             ///书籍列表
24             var books = db.Books.OrderByDescending(p => p.Sort);
25 
26 
27             ///page为null时默认设置为1
28             var pageNumber = page ?? 1;
29 
30             ///每页显示项目数量
31             var pageSize = 10;
32             if (ConfigurationManager.AppSettings["PageSize"] != null)
33             {
34                 int.TryParse(ConfigurationManager.AppSettings["PageSize"], out pageSize);
35             }
36 
37 
38             ///进行分页生成model
39             IPagedList model = books.ToPagedList(pageNumber, pageSize);
40 
41             return View(model);
42         }
43     }
44 }

创建视图

 1 @model PagedList.IPagedList
 2 @using PagedList.Mvc;
 3 @{
 4     ViewBag.Title = "书籍列表";
 5 }
 6 "~/Content/PagedList.css" rel=" stylesheet" />
 7 
@ViewBag.Title
 8 
20 class="table">
212223262932333435         @if (Model != null && Model.Count > 0)
36        {
37foreach (var book in Model)
38            {
394041424344            }
4546        }
47else48        {
4950        }
515253
     

         

             

24                 书名
25             
             

27                 作者
28             
             

30                 价格
31             
         
     
     

                                

                     
@Html.DisplayFor(p => book.BookName)
                     
@Html.DisplayFor(p => book.Author)
                     
@Html.DisplayFor(p => book.Price)元
                 
  
          
              
"3">---
  
     
 
54 @Html.PagedListPager(Model, page => Url.Action("Index", "Book", new { page = page }), new PagedListRenderOptions
55 {
56     DisplayItemSliceAndTotal = true,
57     Display = PagedListDisplayMode.IfNeeded,
58     ItemSliceAndTotalFormat = "显示{0}页到{1}页,共{2}条",
59     //LinkToNextPageFormat = "»",
60     LinkToNextPageFormat = ">>",
61     LinkToLastPageFormat = "Last",
62     DisplayLinkToLastPage = PagedListDisplayMode.Always,
63     LinkToFirstPageFormat = "First",
64     DisplayLinkToFirstPage = PagedListDisplayMode.Always,
65     LinkToPreviousPageFormat = "<<",
66     // LinkToPreviousPageFormat = "«",
67     DisplayEllipsesWhenNotShowingAllPageNumbers = true,
68     DisplayPageCountAndCurrentLocation = true,
69     PageCountAndCurrentLocationFormat = "当前第{0}页,共{1}页",
70     ClassToApplyToLastListItemInPager = "highLight",
71     ClassToApplyToFirstListItemInPager = "highLight",
72     LiElementClasses = new List<string> { "highLight" }
73 
74 })

最终的项目结构如下

然后运行项目，输入控制器名字/Book，最终效果如下

如果自己要更改分页样式的话，可以看一下PagedListRenderOptions这个类，配置还是很灵活的。

六、无刷新分页

上面的分页是刷新分页，那这个插件有没有更厉害一点的呢，实现无刷新分页呢，下面我们来看一下这个类PagedListRenderOptions的介绍

很幸运，这个类PagedListRenderOptions有三个静态方法，我们从静态方法名字上可以大概读出的意思是“启用不引人注目的Ajax替换”请忽略我的翻译，哈哈，其实大概意思就是无刷新的方式，下面我们就使用这个来实现无刷新的分页。

1、首先看一下你的项目文件夹Scripts目录下是否含有”jquery.unobtrusive-ajax.js“这个脚本

因为无刷新分页需要用到这个脚本，如果没有可以通过 管理NuGet程序包/程序包管理控制台 的形式进行添加，在浏览框中输入

”Microsoft.Jquery.Unobtrusive.Ajax“

然后点击安装，我这里已经安装完成。

2、在BookController中添加一个名字为Info的ActionResult，代码内容如下

 1 public ActionResult Info(int? page, bool jqueryUnobtrusive = false)
 2         {
 3             ///书籍列表
 4             var books = db.Books.OrderByDescending(p => p.Sort);
 5 
 6             ///page为null时默认设置为1
 7             var pageNumber = page ?? 1;
 8 
 9             ///每页显示项目数量
10             var pageSize = 10;
11             if (ConfigurationManager.AppSettings["PageSize"] != null)
12             {
13                 int.TryParse(ConfigurationManager.AppSettings["PageSize"], out pageSize);
14             } 
15 
16             ///进行分页生成model
17             IPagedList model = books.ToPagedList(pageNumber, pageSize);
18 
19             ViewBag.jqueryUnobtrusive = jqueryUnobtrusive;
20             return View(model);
21         }

3、然后创建视图Info.cshtml，代码内容如下

 1 @model PagedList.IPagedList
 2 @using PagedList.Mvc;
 3 @{
 4     if (ViewBag.jqueryUnobtrusive == true)
 5     {
 6         Layout = null;
 7     }
 8     ViewBag.Title = "书籍列表";
 9 }
10 @section scripts{
11     
12 } 
13 "bookListAjax">
14     "~/Content/PagedList.css" rel=" stylesheet" />
15     
27     
@ViewBag.Title
28     class="table">
293031343740414243             @if (Model != null && Model.Count > 0)
44            {
45foreach (var book in Model)
46                {
474849505152                }
5354            }
55else56            {
5758            }
596061
         

             

                 

32                     书名
33                 
                 

35                     作者
36                 
                 

38                     价格
39                 
             
         
         

                                        

                         
@Html.DisplayFor(p => book.BookName)
                         
@Html.DisplayFor(p => book.Author)
                         
@Html.DisplayFor(p => book.Price)元
                     
  
              
                  
"3">---
  
         
     
62     @Html.PagedListPager(Model, page => Url.Action("Info", "Book", new { page = page, jqueryUnobtrusive = true }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions
63     {
64         DisplayItemSliceAndTotal = true,
65         Display = PagedListDisplayMode.IfNeeded,
66         ItemSliceAndTotalFormat = "显示{0}页到{1}页,共{2}条",
67         //LinkToNextPageFormat = "»",
68         LinkToNextPageFormat = ">>",
69         LinkToLastPageFormat = "Last",
70         DisplayLinkToLastPage = PagedListDisplayMode.Always,
71         LinkToFirstPageFormat = "First",
72         DisplayLinkToFirstPage = PagedListDisplayMode.Always,
73         LinkToPreviousPageFormat = "<<",
74         // LinkToPreviousPageFormat = "«",
75         DisplayEllipsesWhenNotShowingAllPageNumbers = true,
76         DisplayPageCountAndCurrentLocation = true,
77         PageCountAndCurrentLocationFormat = "当前第{0}页,共{1}页",
78         ClassToApplyToLastListItemInPager = "highLight",
79         ClassToApplyToFirstListItemInPager = "highLight",
80         LiElementClasses = new List<string> { "highLight" }
81     }, new AjaxOptions
82     {
83         AllowCache = false,
84         UpdateTargetId = "bookListAjax",
85         HttpMethod = "Post"
86     }))
87 

需要注意的地方

1、BookController控制器的Info方法，添加一个默认参数jqueryUnobtrusive=false用来区别是第一次加载还是通过Ajax的方式访问

2、Info.cshtml中通过ViewBag.jqueryUnobtrusive来判断是否使用Layout模板

3、使用@section scripts方式添加jquery.unobtrusive-ajax.js脚本

最后看一下效果图

转载于:https://www.cnblogs.com/Harley520/p/9872249.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！