Pages

2015-10-22

MVC的分頁及分組顯示

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

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

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

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

EasyUI Pager Style

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

Kendo Pager Style

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

PagedList Pager Style

XPagedList Properties

具體教學及樣式,請看這篇教學文章:
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欄為一列。

Group List

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

Group Razor