如何使用 ASP.Net MVC3 WebGrid
前言
ASP.Net MVC 雖然沒有很多控制項可以使用,但是它的 Helper 也是很實用的,到了 MVC3 有了更多更好用的 Helper ,其中一個就是 WebGrid,它可以很方便的將資料呈現出來,也有分頁的功能,本文就來簡單的介紹如何使用。
實作範例
首先當然是建立一個 MVC3 的專案,這部份就不再陳述了。之後建立一個類別來做為要使用的 Model ,此部份當然也可以使用 LINQ 所產生的類別囉!再這邊我建立一個 Account 類別。
1 2 3 4 5 |
public class Account { public string ID { get; set; } public string Name { get; set; } } |
接下來是 Controller 的部份,建立一個測試資料集當做 Model 傳給 View 來使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "ASP.NET MVC WebGrid!"; IEnumerable<Account> AccountDatas = new List<Account> { new Account() { ID = "A001", Name = "素還真"}, new Account() { ID = "A002", Name = "葉小釵"}, new Account() { ID = "A003", Name = "劍子仙跡"}, new Account() { ID = "A004", Name = "佛劍分說"}, new Account() { ID = "A005", Name = "劍之初"}, new Account() { ID = "A006", Name = "羅喉"} }; return View(AccountDatas); } } |
再來便是 View 的部份,記得在加入 View 的對話框樣板部分選擇 List 。
最後就是本文的重點了,在 View 中只需要加上 WebGrid 類別傳入 Model 再呼叫 GetHtml 方法就可以產生我們要的 Grid 囉!
1 2 3 |
<p> <%: new WebGrid(Model).GetHtml() %> </p> |
但是我們發現說好的分頁呢?因為預設值是每頁顯示 10 筆資料,本範例的測試資料僅有 6 筆,所以沒有產生分頁,在此設定 WebGrid 分頁筆數的參數 rowsPerPage 為 5 ,就可以產生分頁囉!
1 2 3 |
<p> <%: new WebGrid(Model, rowsPerPage:5).GetHtml()%> </p> |
此時會發現排序和分頁功能的連結都是 PostBack ,每次頁面都會重新整理,感覺會很沒效率,那就開啟 ajax 功能吧!只需要加上 ajaxUpdateContainerId 參數並指定一個 id 就可以囉!
1 2 3 4 5 6 7 |
<div id="Grid"> <%: new WebGrid( Model, rowsPerPage:5, ajaxUpdateContainerId:"Grid" ).GetHtml()%> </div> |
那如果想自定欄位名稱,並且新增一個編輯的連結又該如何做呢?此時就需要用到 WebGridColumn 類別了,就可以針對每一個想顯示的欄位去設定標題(Header)、格式(Format)、可排序(CanSort)、樣式(Style)和欄位名稱(ColumnName)等屬性,這邊特別說明一下 ColumnName 這屬性,如果名稱和 Model 中的欄位一致,便會自己 Bind 資料了。至於要新增一個編輯的連結,則是利用 來完成,這部份直接看下面程式碼囉!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="Grid2"> <%: new WebGrid( Model, rowsPerPage: 5, ajaxUpdateContainerId: "Grid2" ).GetHtml( columns: new List<WebGridColumn> { new WebGridColumn() { ColumnName = "ID", Header = "帳號" }, new WebGridColumn() { ColumnName = "Name", Header = "姓名" }, new WebGridColumn() { ColumnName = "Edit", Header = "編輯", Format = item => Html.ActionLink("編輯", "Edit", new { ID = item.ID}) } })%> </div> |
WebGrid 和其方法 GetHtml 還有許多參數可以做設定,可以設定分頁的格式、文字、樣式,單數欄的樣式等等,此部份就不再多做說明了,可以參考官方文件的說明。此外,雖然開啟 ajax 可以減少整頁重新整理的次數,但是事實上每次呼叫 Action 時候還是會傳遞整個 Model 的資料,當資料量大的時候也是會比較沒效率的,至於該如何解決可以參考這一篇文章,希望這對大家會有幫助囉!
範例下載:下載
三月 30th, 2011 - 11:37
請問一下,
webgird 每次換頁的話,
是去資料庫裡查全部,再計算分頁嗎?!
還是只查每頁幾筆的數量而已?!