使用ASP.NET MVC分頁的實現方法介紹

這篇文章主要為大家詳細介紹了ASP.NET MVC分頁的實現方法，具有一定的參考價值，感興趣的小夥伴們可以參考一下

在這一篇文章中，我們將學習如何在MVC頁面中實現分頁的方法。分頁功能是一個非常實用，常用的功能，當資料量過多的時候，必然要使用分頁。在今天這篇文章中，我們學習如果在MVC頁面中使用PagedList.Mvc包來實現分頁功能。

1) 安裝PagedList.Mvc

首先，我們需要安裝分頁組件包，在Visual Studio 2010中點擊【項目】-【管理NuGet程式包】，開啟NuGet包管理器表單，在該表單中，選擇“聯機”標籤，然後搜尋pagedlist，如所示。點擊“安裝”按鈕安裝PagedList.Mvc的最新版本（目前最新版本為4.5.0）。

在把PagedList.Mvc安裝完成之後，PagedList包也被安裝上了。如。

圖1：NuGet包管理器中顯示的PagedList.Mvc

2) 實現帶分頁功能的視圖實體物件和控制器

把PagedList.Mvc安裝完成之後，第一件事就是增加一個視圖實體物件，用來放置一些查詢屬性與查詢結果。在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; }   }}

　　我們現在需要修改BookController類的SearchIndex方法，以便Books作為PagedList返回（使用ToPagedList()方法完成）。為了使用PagedList，我們還需要設定預設排序。為了使用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);    //排序選項    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);  }

　　以上代碼進行了以下幾次發動，第一處改動是添加了一個int? page參數，它是一個可空整型，表示使用者在書籍查詢頁面中選擇的當前頁碼。當第一次載入書籍查詢頁面時，使用者還沒有選擇任何頁碼，因此，這個參數可以為null。

　　我們必須確保當前的分類也要儲存在視圖實體物件中，因此，我們添加了vbook.Category = Category;這行代碼。

　　代碼books = books.OrderBy(p => p.Name);用於對產品列表進行預設排序，這是因為PagedList要求列表必須是一個有序列表。

　　接著，我們使用代碼const int pageItems = 5;來指定每頁顯示的資料數量。然後，我們聲明了一個整型變數int currentPage = (page ?? 1);來儲存當前頁碼，該變數的值是page參數的值，或者是1（當page變數為null時）。

　　我們使用代碼vbook.Books = books.ToPagedList(currentPage, PageItems);，對產品資訊調用了ToPagedList方法，並將當前頁和每頁顯示的條目數傳遞給了ToPagedList方法，然後將該方法的傳回值賦值給了視圖實體物件的Books屬性。

　　我們使用代碼viewBook.SortBy = sortBy;將sortBy參數的值儲存到視圖實體物件的SortBy屬性中，以便我們從一頁移動到另一頁時，產品的排序保持不變。

3) 帶分頁功能的查詢頁面

　 　在視圖實體物件和控制器中對實現分頁功能的代碼進行修改之後，現在，我們需要更新視圖檔案\Views\Products\SearchIndex.cshtml，在這個視圖檔案中顯示一個分頁控制項，以便使用者可以在各頁之間移動。我們同時也添加了有多少條資料的指示資訊。為了完成這些功能，我們在該檔案中添加了一個using語句，一個書籍總數的指示資訊以及在該頁底部顯示一個分頁控制項，具體代碼如下面顯示：

@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><p>  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 })) </p>

分頁連結產生程式碼封裝裹在p標籤內。其中第一行代碼使用?:操作符的第一行代碼決定是否有任何頁碼顯示，它顯示“Page 0 of 0”或者“Page x of y”，x表示當前頁碼，y表示總頁數。

第二行代碼使用來自於PagedList.Mvc命名空間的PagedListPager輔助器。該輔助器接收一個產品列表參數，並為每個頁面產生一個超連結。Url.Action用於產生一個含有當前頁參數超連結目標。我們將一個匿名型別（含有當前分類、搜尋條件、排序資訊和分頁）傳遞給該輔助器方法，以便每個頁面的連結中都包含一個查詢字串，這個查詢字串包含有當前分類、搜尋條件、排序資訊和分頁資訊。這意味著，當從一個頁面移動到另一個頁面時，搜尋條件、選擇的分類和定序都被儲存下來。如果沒有這樣做，書籍列表將會被重設為顯示所有書籍資訊。

在使用了上述代碼後，按“價格從低到高”排序分頁介面，如1。

圖1

　 　 我們發現分頁的數字部分，並不好看，原來我們缺少引用了CSS，在查詢頁面的標題下方添加如下代碼。在上述代碼中的藍色字型。

<link href="/Content/PagedList.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" />

再次點擊“查詢”按鈕，然後對其結果按照“價格從低到高”進行排序，效果如2。

圖2：有搜尋條件、排序和按分類過濾的分頁效果