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

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

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

當(dāng)我們查看 WebGrid 類時會發(fā)現(xiàn) WebGrid 構(gòu)造函數(shù)有很多的參數(shù)，我們可以根據(jù)參數(shù)名便基本上能了解參數(shù)的意思，使用到時我們再做介紹。接下來使用 GetHtml 方法來組織網(wǎng)格，下邊直接給出最終的方法：

@{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", "留言內(nèi)容", 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條，發(fā)現(xiàn)參數(shù)名基本上很明確的表示了它的意思."tableStyle"是表名所使用的CSS樣式名，這樣headerStyle等樣 式的就不能理解了，style分別是各列所使用的CSS樣式名；3."canSort"即為是否可排序，默認(rèn)為可以。最后的兩列是 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;}

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/caltion/archive/2011/10/26/2225419.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。