MVC的分頁及分組顯示

昔日WebForm有ListView控件，可以輕易分頁及分組顯示，到了MVC沒有Server控件就得自力而為。找到幾個被推薦的分頁UI控件，不過該選擇哪一項，得確認它能滿足以下的需求：

1. 該分頁控件能持續被維護。
2. 產生的分頁數字顯示能修改CSS樣式，配合前端網頁風格。
3. 分頁的顯示方式、文字可以輕易調整修改。

最後選出下面的項目候選:

• 前端分頁：EasyUI Pagination
• 後端分頁：X.PagedList (前身為PagedList.Mvc)、Telerik Kendo UI MVC、MvcPaging

以MVC的精神，EasyUI分頁是最好的方式，簡單又有提供豐富JS控制函式，但其缺點就是Prev/Next等是用圖示顯示，要修改也不容易(EasyUI雖然開源，但js被minifier且混淆過)。

Telerik Kendo UI最符合商業持續被維護的原則且也很美觀，但它的分頁CSS及行為控制，就比較難客製化，而且又得學習其Template Hash語法，後端AJAX綁定也是自己的物件方式，雖然都不用寫啥程式，但受制於人。

MvcPaging是老牌的分頁控件，不過分頁樣式有點少，要改文字須自己實作Output輸出，有點Dirty。最後覺得X.PagedList的分頁有提供屬性設定，這會比較適合簡易客製化，尤其它的顯示文字及CSS表都容易調整。

具體教學及樣式，請看這篇教學文章:
mrkt 的程式學習筆記: ASP.NET MVC 資料分頁 - 使用 PagedList.Mvc
http://kevintsengtw.blogspot.tw/2013/10/aspnet-mvc-pagedlistmvc_17.html

站在客戶角度，其實對分頁顯示樣式不是很要求，只要配色能搭配整體即可。其實分頁功能自己寫也行，只是我覺得不用重複造車，遇到客戶特別要求再來研究不遲。因此我個人是建議使用EasyUI分頁即可，其次是X.PagedList。

Server端分頁控件的使用，大抵上就是調整好樣式屬性，最後輸出分頁數字，再綁定JS Click事件以AJAX取出後端的PartialView(依頁碼取出該頁資料，並透過(StaticPagedList<T>()顯示分頁)，並更新分頁資料的顯示及分頁狀態。簡易分頁條件用AJAX GET方式即可，複雜的分頁+搜尋條件就用POST+JSON方式。

最後，分頁資料要分組顯示(Group)，即一列顯示幾個Item的意思，例如下面圖片中的Table為4欄為一列。

使用Razor語法就是使用foreach+%餘數判斷式，即可達到分組顯示功能。