【隨筆系列】Asp.Net Mvc分頁控件PagedList的使用方法及配置
阿新 • • 發佈：2018-10-29
provide 自動添加 pac png eight 鼠標 技術分享 apps con
企業在做Asp.Net Mvc開發過程中，很多時候都是一些CRUD，最基本的就是一個列表頁面，然後附帶一些功能按鈕。如果有數據列表，大多數就會涉及到對數據進行分頁，這次就介紹一下Mvc PagedList控件分頁的使用方法。Github PagedList鏈接 。
下面我通過新建Mvc項目來展示PagedList的使用方法。
一、新建BookLibrary解決方案
確定後，選擇MVC
然後點擊確定。
二、添加PagedList與PagedList.Mvc的程序包。
選擇BookLibrary項目，鼠標右鍵選擇“管理NuGet程序包”,在瀏覽框中輸入PagedList.Mvc
點擊確定，他會自動安裝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 publicGuid 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 privatedecimal _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 <connectionStrings> 2 <add name="BookConnection" connectionString="DataBase=|DataDirectory|\Book.mdf;Data Source=.;Initial Catalog=Book;UID=sa;PWD=123qwe;Integrated Security=True" providerName="System.Data.SqlClient"/> 3 </connectionStrings>
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<Book> Books { get; set; } 9 } 10 }
四、創建數據庫初始化策略
在項目下新建DBInitializer文件夾，並新建BookInitializer類，使用數據庫初始化策略
CreateDatabaseIfNotExists<BookContext>，在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<BookContext> 9 { 10 protected override void Seed(BookContext context) 11 { 12 var bookList = new List<Book>(); 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 <contexts> 2 <context type="BookLibrary.Models.BookContext,BookLibrary"> 3 <databaseInitializer type="BookLibrary.DBInitializer.BookInitializer,BookLibrary"></databaseInitializer> 4 </context> 5 </contexts>
五、創建控制器與視圖
新建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 /// <summary> 12 /// 數據庫上下文 13 /// </summary> 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<Book> model = books.ToPagedList(pageNumber, pageSize); 40 41 return View(model); 42 } 43 } 44 }
創建視圖
1 @model PagedList.IPagedList<BookLibrary.Models.Book> 2 @using PagedList.Mvc; 3 @{ 4 ViewBag.Title = "書籍列表"; 5 } 6 <link href="~/Content/PagedList.css" rel=" stylesheet" /> 7 <h2>@ViewBag.Title</h2> 8 <style> 9 .highLight { 10 } 11 12 .highLight > a { 13 background-color: #dc6969 !important; 14 color: #ffffff !important; 15 font-weight: 500; 16 font-family: ‘黑體‘; 17 /*font-size:15px;*/ 18 } 19 </style> 20 <table class="table"> 21 <thead> 22 <tr> 23 <th> 24 書名 25 </th> 26 <th> 27 作者 28 </th> 29 <th> 30 價格 31 </th> 32 </tr> 33 </thead> 34 <tbody> 35 @if (Model != null && Model.Count > 0) 36 { 37 foreach (var book in Model) 38 { 39 <tr> 40 <td>@Html.DisplayFor(p => book.BookName)</td> 41 <td>@Html.DisplayFor(p => book.Author)</td> 42 <td>@Html.DisplayFor(p => book.Price)元</td> 43 </tr> 44 } 45 46 } 47 else 48 { 49 <tr><td colspan="3">---</td></tr> 50 } 51 52 </tbody> 53 </table> 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這個類，配置還是很靈活的。
【隨筆系列】Asp.Net Mvc分頁控件PagedList的使用方法及配置