Coding 之路,不由分說 .Net,MVC,jQuery

15二月/111

如何使用 ASP.Net MVC3 WebGrid

Google PageRank查詢

前言

ASP.Net MVC 雖然沒有很多控制項可以使用,但是它的 Helper 也是很實用的,到了 MVC3 有了更多更好用的 Helper ,其中一個就是 WebGrid,它可以很方便的將資料呈現出來,也有分頁的功能,本文就來簡單的介紹如何使用。

實作範例

首先當然是建立一個 MVC3 的專案,這部份就不再陳述了。之後建立一個類別來做為要使用的 Model ,此部份當然也可以使用 LINQ 所產生的類別囉!再這邊我建立一個 Account 類別。

接下來是 Controller 的部份,建立一個測試資料集當做 Model 傳給 View 來使用。

再來便是 View 的部份,記得在加入 View 的對話框樣板部分選擇 List

MVC3-WebGrid-5.PNG

最後就是本文的重點了,在 View 中只需要加上 WebGrid 類別傳入 Model 再呼叫 GetHtml 方法就可以產生我們要的 Grid 囉!

MVC3-WebGrid-1.PNG

但是我們發現說好的分頁呢?因為預設值是每頁顯示 10 筆資料,本範例的測試資料僅有 6 筆,所以沒有產生分頁,在此設定 WebGrid 分頁筆數的參數 rowsPerPage 為 5 ,就可以產生分頁囉!

MVC3-WebGrid-2.PNG

此時會發現排序和分頁功能的連結都是 PostBack ,每次頁面都會重新整理,感覺會很沒效率,那就開啟 ajax 功能吧!只需要加上 ajaxUpdateContainerId 參數並指定一個 id 就可以囉!

那如果想自定欄位名稱,並且新增一個編輯的連結又該如何做呢?此時就需要用到 WebGridColumn 類別了,就可以針對每一個想顯示的欄位去設定標題(Header)、格式(Format)、可排序(CanSort)、樣式(Style)和欄位名稱(ColumnName)等屬性,這邊特別說明一下 ColumnName 這屬性,如果名稱和 Model 中的欄位一致,便會自己 Bind 資料了。至於要新增一個編輯的連結,則是利用  來完成,這部份直接看下面程式碼囉!

MVC3-WebGrid-4.PNG

WebGrid 和其方法 GetHtml 還有許多參數可以做設定,可以設定分頁的格式、文字、樣式,單數欄的樣式等等,此部份就不再多做說明了,可以參考官方文件的說明。此外,雖然開啟 ajax 可以減少整頁重新整理的次數,但是事實上每次呼叫 Action 時候還是會傳遞整個 Model 的資料,當資料量大的時候也是會比較沒效率的,至於該如何解決可以參考這一篇文章,希望這對大家會有幫助囉!

範例下載:下載

參考資料

WebGrid Class(MSDN)

WebGridColumn Class(MSDN)

WebGrid WebHelper in ASP.NET MVC 3 RC

Efficient Paging with WebGrid Web Helper - ASP.NET MVC 3 RC

回覆 (1) 引用 (0)
  1. 請問一下,
    webgird 每次換頁的話,
    是去資料庫裡查全部,再計算分頁嗎?!
    還是只查每頁幾筆的數量而已?!

    黯雲回應:
    資料如果是 IQueryable 應該就不會查全部再去處理。只不過他回傳時候就算是用 ajax 還是一樣會傳整個 view 回去就是了...

    補充:後來去測試發現似乎是都會全部查詢...


Leave a comment

目前沒有人引用這篇文章。