在這一篇文章中,我們將學(xué)習(xí)如何在MVC頁面中實(shí)現(xiàn)分頁的方法。分頁功能是一個非常實(shí)用,常用的功能,當(dāng)數(shù)據(jù)量過多的時候,必然要使用分頁。在今天這篇文章中,我們學(xué)習(xí)如果在MVC頁面中使用PagedList.Mvc包來實(shí)現(xiàn)分頁功能。
1) 安裝PagedList.Mvc
首先,我們需要安裝分頁組件包,在Visual Studio 2010中點(diǎn)擊【項(xiàng)目】-【管理NuGet程序包】,打開NuGet包管理器窗體,在該窗體中,選擇“聯(lián)機(jī)”標(biāo)簽,然后搜索pagedlist,如下圖所示。點(diǎn)擊“安裝”按鈕安裝PagedList.Mvc的最新版本(目前最新版本為4.5.0)。
在把PagedList.Mvc安裝完成之后,PagedList包也被安裝上了。如下圖。
圖1:NuGet包管理器中顯示的PagedList.Mvc
2) 實(shí)現(xiàn)帶分頁功能的視圖實(shí)體對象和控制器
把PagedList.Mvc安裝完成之后,第一件事就是增加一個視圖實(shí)體對象,用來放置一些查詢屬性與查詢結(jié)果。在Models目錄下新增一個ViewBook.cs文件,代碼如下列所示:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using PagedList; namespace MvcApplication1.Models { public class ViewBook { public IPagedList<Book> Books { get; set; } public string Search { get; set; } public string Category { get; set; } public string SortBy { get; set; } } }
我們現(xiàn)在需要修改BookController類的SearchIndex方法,以便Books作為PagedList返回(使用ToPagedList()方法完成)。為了使用PagedList,我們還需要設(shè)置默認(rèn)排序。為了使用PagedList包,我們首先需要在該文件的頂部添加using PagedList;代碼,然后修改Controllers\BookController.cs文件為下列粗體顯示的代碼。
public ActionResult SearchIndex(string Category, string searchString, string sortBy,int? page) { var cateLst = new List<string>(); var cateQry = from d in db.Books orderby d.Category select d.Category; cateLst.AddRange(cateQry.Distinct()); ViewBag.category = new SelectList(cateLst); //排序選項(xiàng) var orderbyLst = new Dictionary<string, string> { { "價格從低到高", "price_lowest" }, { "價格從高到低", "price_highest" } }; ViewBag.sortBy = new SelectList(orderbyLst, "Value", "Key"); // [2017-2-14 end] var books = from m in db.Books select m; if (!String.IsNullOrEmpty(searchString)) { books = books.Where(s => s.Name.Contains(searchString)); } // sort the results switch (sortBy) { case "price_lowest": books = books.OrderBy(p => p.Price); break; case "price_highest": books = books.OrderByDescending(p => p.Price); break; default: books = books.OrderBy(p => p.Name); break; } //分頁 const int pageItems = 5; int currentPage = (page ?? 1); IPagedList<Book> pageBooks = books.ToPagedList(currentPage, pageItems); // [2017-2-14] ViewBook vbook = new ViewBook(); vbook.Books = pageBooks; vbook.Category = Category; vbook.SortBy = sortBy; vbook.Search = searchString; if (string.IsNullOrEmpty(Category)) vbook.Books =pageBooks; else { vbook.Books =pageBooks.Where(x => x.Category == Category).ToPagedList(currentPage, pageItems); } return View(vbook); }
以上代碼進(jìn)行了以下幾次發(fā)動,第一處改動是添加了一個int? page參數(shù),它是一個可空整型,表示用戶在書籍查詢頁面中選擇的當(dāng)前頁碼。當(dāng)?shù)谝淮渭虞d書籍查詢頁面時,用戶還沒有選擇任何頁碼,因此,這個參數(shù)可以為null。
我們必須確保當(dāng)前的分類也要保存在視圖實(shí)體對象中,因此,我們添加了vbook.Category = Category;這行代碼。
代碼books = books.OrderBy(p => p.Name);用于對產(chǎn)品列表進(jìn)行默認(rèn)排序,這是因?yàn)镻agedList要求列表必須是一個有序列表。
接著,我們使用代碼const int pageItems = 5;來指定每頁顯示的數(shù)據(jù)數(shù)量。然后,我們聲明了一個整型變量int currentPage = (page ?? 1);來保存當(dāng)前頁碼,該變量的值是page參數(shù)的值,或者是1(當(dāng)page變量為null時)。
我們使用代碼vbook.Books = books.ToPagedList(currentPage, PageItems);,對產(chǎn)品信息調(diào)用了ToPagedList方法,并將當(dāng)前頁和每頁顯示的條目數(shù)傳遞給了ToPagedList方法,然后將該方法的返回值賦值給了視圖實(shí)體對象的Books屬性。
我們使用代碼viewBook.SortBy = sortBy;將sortBy參數(shù)的值保存到視圖實(shí)體對象的SortBy屬性中,以便我們從一頁移動到另一頁時,產(chǎn)品的排序保持不變。
3) 帶分頁功能的查詢頁面
在視圖實(shí)體對象和控制器中對實(shí)現(xiàn)分頁功能的代碼進(jìn)行修改之后,現(xiàn)在,我們需要更新視圖文件\Views\Products\SearchIndex.cshtml,在這個視圖文件中顯示一個分頁控件,以便用戶可以在各頁之間移動。我們同時也添加了有多少條數(shù)據(jù)的指示信息。為了完成這些功能,我們在該文件中添加了一個using語句,一個書籍總數(shù)的指示信息以及在該頁底部顯示一個分頁控件,具體代碼如下面顯示:
@model MvcApplication1.Models.ViewBook @using PagedList.Mvc @{ ViewBag.Title = "書籍查詢"; } <link href="/Content/PagedList.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" /> <h2>書籍查詢</h2> @using (Html.BeginForm("SearchIndex","book",FormMethod.Get)){ <p>書籍種類: @Html.DropDownList("category", "All") 書籍名稱: @Html.TextBox("SearchString") 排序: @Html.DropDownList("sortBy", "不排序") <input type="submit" value="查詢" /> </p> } <table> <tr> <th> @Html.DisplayNameFor(model => model.Books.First().Category) </th> <th> @Html.DisplayNameFor(model => model.Books.First().Name) </th> <th> @Html.DisplayNameFor(model => model.Books.First().Numberofcopies) </th> <th> @Html.DisplayNameFor(model => model.Books.First().AuthorID) </th> <th> @Html.DisplayNameFor(model => model.Books.First().Price) </th> <th> @Html.DisplayNameFor(model => model.Books.First().PublishDate) </th> <th></th> </tr> @foreach (var item in Model.Books) { <tr> <td> @Html.DisplayFor(modelItem => item.Category) </td> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Numberofcopies) </td> <td> @Html.DisplayFor(modelItem => item.AuthorID) </td> <td> @Html.DisplayFor(modelItem => item.Price) </td> <td> @Html.DisplayFor(modelItem => item.PublishDate) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.BookID }) | @Html.ActionLink("Details", "Details", new { id=item.BookID }) | @Html.ActionLink("Delete", "Delete", new { id=item.BookID }) </td> </tr> } </table> <div> Page @(Model.Books.PageCount < Model.Books.PageNumber ? 0 : Model.Books.PageNumber) of @Model.Books.PageCount @Html.PagedListPager(Model.Books, page => Url.Action("SearchIndex", new { category = Model.Category, search = Model.Search, sortBy = Model.SortBy, page })) </div>
分頁鏈接生成代碼包裹在div標(biāo)簽內(nèi)。其中第一行代碼使用?:操作符的第一行代碼決定是否有任何頁碼顯示,它顯示“Page 0 of 0”或者“Page x of y”,x表示當(dāng)前頁碼,y表示總頁數(shù)。
第二行代碼使用來自于PagedList.Mvc命名空間的PagedListPager輔助器。該輔助器接收一個產(chǎn)品列表參數(shù),并為每個頁面生成一個超鏈接。Url.Action用于生成一個含有當(dāng)前頁參數(shù)超鏈接目標(biāo)。我們將一個匿名類型(含有當(dāng)前分類、搜索條件、排序信息和分頁)傳遞給該輔助器方法,以便每個頁面的鏈接中都包含一個查詢字符串,這個查詢字符串包含有當(dāng)前分類、搜索條件、排序信息和分頁信息。這意味著,當(dāng)從一個頁面移動到另一個頁面時,搜索條件、選擇的分類和排序規(guī)則都被保存下來。如果沒有這樣做,書籍列表將會被重置為顯示所有書籍信息。
在使用了上述代碼后,按“價格從低到高”排序分頁界面,如下圖1。
圖1
我們發(fā)現(xiàn)分頁的數(shù)字部分,并不好看,原來我們?nèi)鄙僖昧薈SS,在查詢頁面的標(biāo)題下方添加如下代碼。在上述代碼中的藍(lán)色字體。
<link href="/Content/PagedList.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" />
再次點(diǎn)擊“查詢”按鈕,然后對其結(jié)果按照“價格從低到高”進(jìn)行排序,效果如下圖2。
圖2:有搜索條件、排序和按分類過濾的分頁效果
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com