ASP.NET MVC 的 WebGrid 的 6 個重要技巧
ASP.NET MVC 中 WebGrid 的 6 個重要技巧
介紹
當一個 Webform 開發者轉做 MVC 開發的時候, 他會發現, 許多自己喜歡的東東不見了. 沒有代碼隱藏模型(behind code), 沒有 view state, 沒有頁面生命周期(page life cycle), 沒有服務端控件(server control). 你可以看這篇文章, 里頭有講 MVC 比 ASP.NET Webform少了哪些東西.
沒有了這些易用的服務端控件, 相信許多人都會傷心欲絕. 最令人懷念的, 恐怕要屬 gridview / datagrid 控件. 作為一個 ASP.NET Webform 開發者, 我能理解, 這種將 GridView 控件拖放到 form 里頭, 然后給它綁定數據, 一會的功夫, 就能看到數據在表格中顯示的開發過程, 有多爽, 多讓人著迷.
MVC 用 “WebGrid” 類代替 GridView . 這是個類, 再說一次, 這是個類. 別指望它能像, 有可視化快速開發工具支持的 gridview / data grid 控件那么好用. 不過要比用 HTML 的表格好的多, 起碼省時間. 如果你想知道, 我們為什么不做可視化快速開發工具支持 MVC, 讀下這篇文章 ASP.NET Webform 對比 ASP.NET MVC.
本文通過六個重要技巧, 教你如何更有效的使用 WebGrid。
一個簡單的 MVC WebGrid 例子
“WebGrid” 的用途是, 顯示集合(collection )中的數據. 集合可能是強類型列表(strong typed list), 也可能是泛型, 或其他類型. 我們先來看一個簡單的例子. 這個例子將強類型對象添加到一個集合中, 然后用 “WebGrid” 顯示出來.
下列代碼創建一個名叫 “Custs” 列表, 然后把 “Customer” 類的 對象加進去.
@{
List<Customer> Custs = new List<Customer>();
Custs.Add(new Customer { CustomerCode = "1001", CustomerName = "Shiv" });
Custs.Add(new Customer { CustomerCode = "1002", CustomerName = "Shiv1" });
要在 MVC 的視圖(View) 中顯示集合的內容, 我們先創建一個 “WebGrid” 對象, 傳給 "WebGrid" 構造函數的變量 ”Custs” 是上面代碼創建的 "Customer" 對象列表 .
接下來, 調用 “GetHtml()” 函數, 以 HTML 表格形式顯示集合中的內容.
@{
WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml();
運行上面的代碼, 就能看到下面圖片中的內容. 不錯吧 
.
技巧1 : 在 MVC WebGrid 中排序
用表格顯示數據，首先要說的是排序。“WebGrid” 在默認情況下, 通過點列的標題來排序. 如果你仔細看， 會發現列的標題， 其實是個超鏈接。
如果你想關閉排序功能， 就像下面的代碼那樣， 把 “canSort” 設為 “false” 。
WebGrid obj = new WebGrid(Custs, canSort:false);
如果你想設置默認排序， 就把列名賦給 “defaultsort” 。
WebGrid obj = new WebGrid(Custs,defaultSort:"CustomerCode");
技巧 2 :MVC WebGrid 的分頁
要啟用 MVC WebGrid 的分頁功能，只要設置每頁行數 “rowsPerPage” 這個屬性就可以了。 代碼如下：
WebGrid obj = new WebGrid(Custs,rowsPerPage:3);
分頁的數字也是以超鏈接的形式顯示出來的。
技巧 3 : 只顯示需要顯示的 MVC WebGrid 列
經常會有這種情況， 集合里面有 10 列， 但你只想顯示其中的 5 列。 要做到這種效果， 你只要把要顯示的列名傳給參數 “ColumnNames” 就可以了。
WebGrid obj = new WebGrid(Custs,columnNames: new[] { "CustomerCode"});
代碼的運行效果如下圖，只有 “CustomerCode” 顯示出來， “CustomerName” 已經看不到了.
技巧 4 : 自定義 MVC WebGrid 的列標題
我們經常會發現， 集合中的列名不是那么友好。 比如，集合中有一列叫 “CCode”，但是我們想在表格中顯示出來的是 “CustomerCode”.
那就把要顯示出來的列標題傳給 “GetHtml” 函數的參數 “columns”。 下面的代碼， 把 “CustomerCode” 顯示成 “Code”， “CustomerName” 顯示成 “Name”。
@{
WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml(columns: obj.Columns(
obj.Column("CustomerCode", header: "Code"),
obj.Column("CustomerName", header: "Name")
));</pre>
運行結果如下圖.
技巧 5 : 給 MVC WebGrid 添加樣式
改變表格的外觀，是開發中最常見的問題之一. 我們可以用 CSS 給 MVC Webgrid 設置樣式.
你可以給 WebGrid 各個部分設置樣式。如： 表頭， 表尾， 行等。
就像平時寫的 CSS 樣式那樣， 你可以設置 “webGrid” 的邊距， 邊框等。具體如下：
<style type="text/css">
.webGrid {
margin: 4px;
border-collapse: collapse;
width: 500px;
background-color: #B4CFC3;
}
把上面的樣式名稱傳給 “GetHtml” 函數的參數 “tableStyle” 。
@{
WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml(tableStyle:"webGrid");
運行的時候， 就能在瀏覽器中看到下面的效果：
技巧 6: 實現 Ajax 調用 WebGrid
基本上現在的網站都離不開 Ajax 。 如果你想在 Ajax 代碼中調用 WebGrid， 就按下面的步驟做。 首先， 把調用 “GetHtml” 的代碼放到 div 標志中， 就像下面的代碼那樣寫。其次， 給 div 設置一個 id , 并把這個 id 傳給參數 “ajaxUpdateContainerId” 。
<div id="div1">
@{
WebGrid obj = new WebGrid(Custs, ajaxUpdateContainerId: "div1");
}
@obj.GetHtml();
</div>
如果你沒學過 ASP.NET MVC ， 可以到這里看下視頻 www.questpond.com，兩天學會 MVC （共 16 小時）.
</div>