ASP.NET MVC分頁的實現(xiàn)方法

更新時間：2017年03月15日 16:08:07 作者：DotNet菜園

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

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

1) 安裝PagedList.Mvc

首先，我們需要安裝分頁組件包，在Visual Studio 2010中點擊【項目】-【管理NuGet程序包】，打開NuGet包管理器窗體，在該窗體中，選擇“聯(lián)機”標簽，然后搜索pagedlist，如下圖所示。點擊“安裝”按鈕安裝PagedList.Mvc的最新版本（目前最新版本為4.5.0）。

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

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

2) 實現(xiàn)帶分頁功能的視圖實體對象和控制器

把PagedList.Mvc安裝完成之后，第一件事就是增加一個視圖實體對象，用來放置一些查詢屬性與查詢結(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，我們還需要設置默認排序。為了使用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);
  }

　　以上代碼進行了以下幾次發(fā)動，第一處改動是添加了一個int? page參數(shù)，它是一個可空整型，表示用戶在書籍查詢頁面中選擇的當前頁碼。當?shù)谝淮渭虞d書籍查詢頁面時，用戶還沒有選擇任何頁碼，因此，這個參數(shù)可以為null。

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

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

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

　　我們使用代碼vbook.Books = books.ToPagedList(currentPage, PageItems);，對產(chǎn)品信息調(diào)用了ToPagedList方法，并將當前頁和每頁顯示的條目數(shù)傳遞給了ToPagedList方法，然后將該方法的返回值賦值給了視圖實體對象的Books屬性。

　　我們使用代碼viewBook.SortBy = sortBy;將sortBy參數(shù)的值保存到視圖實體對象的SortBy屬性中，以便我們從一頁移動到另一頁時，產(chǎn)品的排序保持不變。

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

　　在視圖實體對象和控制器中對實現(xià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標簽內(nèi)。其中第一行代碼使用?:操作符的第一行代碼決定是否有任何頁碼顯示，它顯示“Page 0 of 0”或者“Page x of y”，x表示當前頁碼，y表示總頁數(shù)。

第二行代碼使用來自于PagedList.Mvc命名空間的PagedListPager輔助器。該輔助器接收一個產(chǎn)品列表參數(shù)，并為每個頁面生成一個超鏈接。Url.Action用于生成一個含有當前頁參數(shù)超鏈接目標。我們將一個匿名類型（含有當前分類、搜索條件、排序信息和分頁）傳遞給該輔助器方法，以便每個頁面的鏈接中都包含一個查詢字符串，這個查詢字符串包含有當前分類、搜索條件、排序信息和分頁信息。這意味著，當從一個頁面移動到另一個頁面時，搜索條件、選擇的分類和排序規(guī)則都被保存下來。如果沒有這樣做，書籍列表將會被重置為顯示所有書籍信息。

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