紀錄 : 如何使用 PagedList.MVC 分頁套件完成MVC的分頁功能
此篇的功能是依據 will 保哥 『ASP.NET MVC 4 開發實戰 』 書中內容的實做過程
紀錄一下MVC 工作的內容,年紀越來越大真的會忘記
此篇為如何實做MVC 的分頁功能
此篇的功能是依據 will 保哥 『ASP.NET MVC 4 開發實戰 』 書中內容的實做過程,這本算是我MVC 的入門書,真心推薦,但絕版了@@
廢話不多說,各位看倌可以開始捲起袖子了!!
準備項目如下 :
- 下載套件 PagedList
- 在控制器下using PagedList
- 設定分頁傳入的參數(分頁初始值) 與1個分頁的筆數
- 設定要回傳的資料型態必須是 IPagedList 使用輔助方法 ToPagedList
- 將該資料回傳到VIEW上
- 在View 頁面下
- 引用命名空間 PagedList , PagedList.Mvc
- 載入Css
- 將controller 丟到view 的資料設定給一個變數
- 使用該套件的Html輔助方法PagedListPager來設定分頁
1.下載套件 PagedList
使用此分頁功能首先請先用Nuget 套件下載
PagedList.MVC,點選後PagedList他也會勾選,不知道是不是只有我碰到?
2.在控制器下using PagedList
然後在你要使用分頁的控制器中
using PagedList;
a.設定分頁傳入的參數(分頁初始值) 與1個分頁的筆數
我們先來看一下程式碼的部分
//實做分頁功能項目
//商品列表
public ActionResult ProductList(int id, int page = 1)
{
var productCategory = db.ProductCategory.Find(id);
if (productCategory != null)
{
var data = productCategory.Products.ToList(); //這邊取得的資料可以當作分頁資料來源
if (data.Count == 0)
{
productCategory.Products.Add(new Product { Name = productCategory.Name + "類別下的商品1", Color = Color.Red, Description = "N/A", Price = 99, PublishOn = DateTime.Now, ProductCategory = productCategory });
productCategory.Products.Add(new Product { Name = productCategory.Name + "類別下的商品2", Color = Color.Blue, Description = "N/A", Price = 150, PublishOn = DateTime.Now, ProductCategory = productCategory });
db.SaveChanges();
}
var pageDdata = data.ToPagedList(pageNumber: page, pageSize: 5);
return View(pageDdata);
}
else
{
return HttpNotFound();
}
}
因分頁一定需要參數來做換頁的動作,故在在呼叫動作中必須將分頁參數傳入( 這不是廢話嗎XDD....)
而這個 page 參數 將會是後面我們在VIEW中會設定的分頁參數
id為小弟在書中實做中要拿來取資料的一個查詢參數。
b.設定要回傳的資料型態必須是 IPagedList 使用輔助方法 ToPagedList
這邊是取得的資料,各位人客必須將此資料轉型,分頁套件才可使用。
而下面這邊就是 PagedList 套件的擴充方法
該擴充方法 : 參數 pageNumber 為: 要前往的分頁的頁數,這邊我們設定預設值為第1頁,之後隨者傳進來的 page 參數到該分頁
參數 pageSize 為:一個分頁會出現的筆數
或許有的看倌可能會有疑問,這樣我們在VIEW 中的MODEL資料型態不是不同嗎? <=其實是給自己的疑問 XDD
書中有說明到,只要是符合 IEnumerable Or IQueryable 型別的資料來源
或 繼承這兩個型別的子類別也可以,故可以放心用
c.將該資料回傳到VIEW上
當設定完畢後,便可以把資料丟回View 上。
快到最後階段了!!
接下來在View的部分
先看一下程式碼
請在頁面一開始就先宣告吧!!
加入如下命名空間才可使用
然後因為有關HTML版面, PagedList.Mvc 套件在安裝後會有一個CSS檔案 PagedList.css 會放置在
content 資料夾下面,請記得加入到你要使用的VIEW裡面
資料轉換,轉換後的資料主要是讓分頁使用套件使用的
這邊講轉換應該其實好像不太對@@。。。應該是說將剛剛這個我們從Controller 丟到view 的資料在丟到data 這個變數裡面
讓等等的套健方法去呈現分頁的效果。
套件的擴充方法
而在這邊最後一行,這邊則是使用擴充方法塞入資料與設定分頁參數
說明一下
參數 list 參數傳入型別要為 IPagedList<T> 即為上面 data
參數generatePageUrl : 小弟是看參數的名稱去體會,產生一個分頁的URL!! XDD請勿鞭打
以小弟的理解是,分頁的數字其實都是超連結,在想一下因為我們要跑回這個Actoin又要代參數的話
用Url.Action 輔助方法才是正解。而他會將分頁數字設定成你要前往的動作並帶一個名為page的參數
看到這邊在回顧一下,前面的
是不是有感受到,"聖光阿!!"
接下來就可以好好的使用這個分頁功能了!!
※後記的自我碎碎念
小弟目前實做 ,資料來源採用的是EF的方式取得 ,若對這部分比較不熟的客倌可以先上網查一下,
可先參考 https://dotblogs.com.tw/yc421206/archive/2014/01/20/141712.aspx 余小章 大師的說明
或是手邊有此本書的可以往前面幾張翻,印象中是第五章,或是可以參考一下點部落格各大師的說明,不然就是小弟找時間補一篇吧!!
..........只是小弟寫文章的機會......有如颱風一年來台灣的次數......離題了......................
太久沒寫好生疏....真的感覺看過後還是要大概寫一下比較會有印象.....這篇既然花了我好幾個小時寫
果然寫文章佛心教導的真是不簡單阿
小弟文筆不太好,若此文章有不妥的地方,或者是錯誤的地方,或是有侵權的地方
也請各位大大指正一下 。
希望這邊文章有幫助到各位看倌。 謝謝