在 ASP.NET MVC 3 中，WebGrid 是?Web.Helpers 下的新的類，使用 WebGrid 可以減小我們的代碼量，本篇先簡單的看下 WebGrid 的使用方法，包括它的分頁、排序功能以及樣式的設置等。

我們還是從留言表讀取數據，并使用 WebGrid 來展示我們的留言。WebGrid 大體原理就是將數據集合組織輸出一個 HTML 表格，使用 WebGrid 我們先創建一個 WebGrid 類的實體，如下：

@model IList<Android.Models.Contact> @{//創建實體var grid = new WebGrid(Model); }

當我們查看 WebGrid 類時會發現 WebGrid 構造函數有很多的參數，我們可以根據參數名便基本上能了解參數的意思，使用到時我們再做介紹。接下來使用 GetHtml 方法來組織網格，下邊直接給出最終的方法：

@{var grid = new WebGrid(Model, canPage: true, rowsPerPage: 2);@grid.GetHtml(tableStyle: "ContactTB",headerStyle: "ContactHD",columns: grid.Columns( grid.Column("UserName", "用戶名", style: "UserName", format: @<b>@item.UserName</b>),grid.Column("Content", "留言內容", style: "Content", canSort: false),grid.Column("Addtime", "留言時間", style: "Addtime"),grid.Column(style:"edit",format:(item) => Html.ActionLink("編輯", "Edit", new { id = item.ID })),grid.Column(style: "delete", format: (item) => Html.ActionLink("刪除", "Delete", new { id = item.ID })))); }

這里稍做下解釋，1. canPage 為 true 表示允許翻頁，rowsPerpage 為2表示每頁顯示2條，發現參數名基本上很明確的表示了它的意思."tableStyle"是表名所使用的CSS樣式名，這樣headerStyle等樣 式的就不能理解了，style分別是各列所使用的CSS樣式名；3."canSort"即為是否可排序，默認為可以。最后的兩列是 WebGrid 中鏈接的寫法，分別為編輯和刪除操作，可以參考下ASP.NET MVC3 實例(六) 增加、修改和刪除操作(二)。所使用的CSS樣式如下：

.ContactTB{border:1px solid #ECF2FD;border-collapse:collapse;} .ContactHD{background:#D4DEE8;} .ContactTB th,.ContactTB td{border:1px solid #03A5D1;} .ContactTB tbody tr:hover{background:#E9E9E9;} .ContactTB tfoot td{text-align:right;} .ContactTB tfoot a{border:1px solid blue;padding:0 5px;}.UserName{width:100px;} .Content{width:400px;} .Addtime{width:120px;} .edit{width:30px;} .delete{width:30px;}

我們看下這時的輸出，此時我們已經可以根據用戶名、留言時間來進行排序，并能進行翻頁，如下：

我們不難發現，這種方法翻頁時每次會將所有的數據取出來，當數據量大的時候是不可行的，后邊我們會介紹更好的方法。本篇的 ASP.NET MVC3 中使用 WebGrid 的方法完全可以用于我們一般的用戶管理等數據量小的操作中，可見會為我們省下不少時間。

轉載于:https://www.cnblogs.com/caltion/archive/2011/10/26/2225419.html

總結

以上是生活随笔為你收集整理的ASP.NET MVC3 技术(二) WebGrid 的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。