最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 22:35:53
文檔

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

ASP.NET MVC分頁的實(shí)現(xiàn)方法:在這一篇文章中,我們將學(xué)習(xí)如何在MVC頁面中實(shí)現(xiàn)分頁的方法。分頁功能是一個非常實(shí)用,常用的功能,當(dāng)數(shù)據(jù)量過多的時候,必然要使用分頁。在今天這篇文章中,我們學(xué)習(xí)如果在MVC頁面中使用PagedList.Mvc包來實(shí)現(xiàn)分頁功能。 1) 安裝PagedList.Mvc
推薦度:
導(dǎo)讀ASP.NET MVC分頁的實(shí)現(xiàn)方法:在這一篇文章中,我們將學(xué)習(xí)如何在MVC頁面中實(shí)現(xiàn)分頁的方法。分頁功能是一個非常實(shí)用,常用的功能,當(dāng)數(shù)據(jù)量過多的時候,必然要使用分頁。在今天這篇文章中,我們學(xué)習(xí)如果在MVC頁面中使用PagedList.Mvc包來實(shí)現(xiàn)分頁功能。 1) 安裝PagedList.Mvc

在這一篇文章中,我們將學(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

文檔

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

ASP.NET MVC分頁的實(shí)現(xiàn)方法:在這一篇文章中,我們將學(xué)習(xí)如何在MVC頁面中實(shí)現(xiàn)分頁的方法。分頁功能是一個非常實(shí)用,常用的功能,當(dāng)數(shù)據(jù)量過多的時候,必然要使用分頁。在今天這篇文章中,我們學(xué)習(xí)如果在MVC頁面中使用PagedList.Mvc包來實(shí)現(xiàn)分頁功能。 1) 安裝PagedList.Mvc
推薦度:
標(biāo)簽: 方法 實(shí)現(xiàn) 分頁
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top