在ASP.NET MVC上使用Grid

2010-01-20

24770
0
2010-01-21

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

回首頁