ASP.NET MVC如何實現分頁

這篇文章主要為大家展示了“ASP.NET MVC如何實現分頁”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“ASP.NET 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" />
<h3>書籍查詢</h3>
  @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標簽內。其中第一行代碼使用?:操作符的第一行代碼決定是否有任何頁碼顯示，它顯示“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：有搜索條件、排序和按分類過濾的分頁效果

以上是“ASP.NET MVC如何實現分頁”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！