http://www.telerik.com/products/aspnet-mvc/grid.aspx在ASP.NET Web Form要建立一個表格相當簡單,可以透過GridView物件或是Repeater來建立表格,不過目前ASP.NET MVC Framework沒有提供關於Grid的Helper,在這邊介紹兩個不錯的元件,一個是codeplex的MVCContrib專案所提供的,另一個就是非常有名的元件商Telerik(目前可以免費下載)。
http://www.telerik.com/products/aspnet-mvc/grid.aspx在ASP.NET Web Form要建立一個表格相當簡單,可以透過GridView物件或是Repeater來建立表格,不過目前ASP.NET MVC Framework沒有提供關於Grid的Helper,在這邊介紹兩個不錯的元件,一個是codeplex的MVCContrib專案所提供的,另一個就是非常有名的元件商Telerik(目前可以免費下載)。
- 用MVCContrib示範Grid
下面的程式碼是最簡單的Grid用法: Step 1:首先到MVCContrib的codeplex網站下載MvcContrib.dll組件。 Step 2:在網頁加上下面的程式碼來引用此命名空間
<%@ Import Namespace="MvcContrib.UI.Grid" %> <%@ Import Namespace="MvcContrib.UI.Grid.ActionSyntax" %>
或是可以在web.config的System.web標籤下加入
Step 3:在前端網頁透過Html.Grid()的擴充方法來產生表格
<%= Html.Grid (Model).Columns( column => { column.For(x => Html.ActionLink("編輯", "EditService", new { id = x.ServiceId }) + " | " + Html.ActionLink("詳細", "Detail", new { id = x.ServiceId })).DoNotEncode(); column.For(x => x.ServiceId).Named("服務編號"); column.For(x => x.ServiceName).Named("服務名稱"); column.For(x => x.OperationName).Named("函式名稱"); column.For(x => x.Url).Named("位址"); }).Attributes(new Hash(width => "700px", border => "1", bgcolor => "#ffffff")) .HeaderRowAttributes(new Hash(bgcolor => "#beebef")) .RowStart(row => string.Format(" ", row.IsAlternate ? "#beebef" : "#FFFFFF")) %>
呈現的結果就會像是下面的畫面:
可以看到程式碼用到幾個方法:
1. Attributes方法:設定整個表格的html屬性
2. Columns方法:用來定義表格要顯是哪些欄位
3. HeaderRowAttributes方法:設定表格的標題所要顯示的顏色為水藍色 4. RowStart方法:可以制定每個Row一開始所要設定的Html屬性(也就是設定標籤)
不難發現在程式碼用了許多的lambda運算式,這都是為了方便在程式的撰寫上,並且透過方法的串接來達到一連串的屬性設定,這是相當直覺且好用的技巧,可以使用類似width => "700px"來當作html的屬性設定,而telerik所提供的ASP.NET MVC元件也是使用類似的方式來撰寫程式。
- 用telerik的寫法
<%= Html.Telerik().Grid(Model) .Name("Grid") .Columns(columns => { columns.Add(o => o.OrderID).Width(100); columns.Add(o => o.Customer.ContactName).Width(200); columns.Add(o => o.ShipAddress); columns.Add(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120); }).ServerBinding(serverBinding => serverBinding.Action("FirstLook", "Grid", new { ajax = ViewData["ajax"] })) .Ajax(ajax => ajax.Enabled((bool)ViewData["ajax"]).Action("_FirstLook", "Grid")) .Scrollable(scrolling => scrolling.Enabled((bool)ViewData["scrolling"])) .Sortable(sorting => sorting.Enabled((bool)ViewData["sorting"])) .Pageable(paging => paging.Enabled((bool)ViewData["paging"])) .Filterable(filtering => filtering.Enabled((bool)ViewData["filtering"])) %>
更多關於Telerik所提供的擴充元件,可以參考http://www.telerik.com/products/aspnet-mvc/grid.aspx