.NET 打到我頭都變大了

.NET 五千年（誤）～～博大精深...吃了大環丹也沒辦法馬上學起來～～

2016-07-27 置頂文章

ASP.NET MVC 資料分頁 MVCPaging 4.5

2095
0
ASP.NET C#
2016-07-31

紀錄 : 如何使用 PagedList.MVC 分頁套件完成MVC的分頁功能

此篇的功能是依據 will 保哥『ASP.NET MVC 4 開發實戰』 書中內容的實做過程

紀錄一下MVC 工作的內容，年紀越來越大真的會忘記

此篇為如何實做MVC 的分頁功能

此篇的功能是依據 will 保哥『ASP.NET MVC 4 開發實戰』 書中內容的實做過程，這本算是我MVC 的入門書，真心推薦，但絕版了@@

廢話不多說，各位看倌可以開始捲起袖子了!!

準備項目如下 :

下載套件 PagedList
在控制器下using PagedList
1. 設定分頁傳入的參數(分頁初始值) 與1個分頁的筆數
2. 設定要回傳的資料型態必須是 IPagedList 使用輔助方法 ToPagedList
3. 將該資料回傳到VIEW上
在View 頁面下
1. 引用命名空間 PagedList , PagedList.Mvc
2. 載入Css
3. 將controller 丟到view 的資料設定給一個變數　
4. 使用該套件的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 : 小弟是看參數的名稱去體會，產生一個分頁的ＵＲＬ！！ XDD請勿鞭打

　　　　　　　　　　　　　　　以小弟的理解是，分頁的數字其實都是超連結，在想一下因為我們要跑回這個Actoin又要代參數的話

　　　　　　　　　　　　　　　用Url.Action 輔助方法才是正解。而他會將分頁數字設定成你要前往的動作並帶一個名為page的參數

看到這邊在回顧一下，前面的

是不是有感受到，＂聖光阿！！＂

接下來就可以好好的使用這個分頁功能了！！

※後記的自我碎碎念

小弟目前實做，資料來源採用的是EF的方式取得，若對這部分比較不熟的客倌可以先上網查一下，

可先參考 https://dotblogs.com.tw/yc421206/archive/2014/01/20/141712.aspx 余小章大師的說明

或是手邊有此本書的可以往前面幾張翻，印象中是第五章，或是可以參考一下點部落格各大師的說明，不然就是小弟找時間補一篇吧!!

..........只是小弟寫文章的機會......有如颱風一年來台灣的次數......離題了......................

太久沒寫好生疏....真的感覺看過後還是要大概寫一下比較會有印象.....這篇既然花了我好幾個小時寫

果然寫文章佛心教導的真是不簡單阿

小弟文筆不太好，若此文章有不妥的地方，或者是錯誤的地方，或是有侵權的地方

也請各位大大指正一下。　

希望這邊文章有幫助到各位看倌。　謝謝

回首頁