在前面的数据库章节中，我们使用剃刀代码显示数据库数据，并自己进行HTML标记.但是在使用Razor的ASP.NET网页中，我们还可以使用 WebGrid助手
更轻松地显示数据.
这个助手可以为你呈现一个显示数据的HTML表格.
这个助手支持格式化选项，用于创建一种翻阅数据的方法.
在WebGrid帮助器中，您只需单击列标题即可对数据进行排序.
让我们看一个简单的例子，我们将在其中显示相同的数据，但这次我们将使用WebGrid帮助器.在此示例中，我们将创建 ListCustomers.cshtml 文件的副本，然后使用WebGrid而不是使用HTML标记手动创建表，如< tr> 和< td> 标签.
我们需要创建一个CSHTML文件来开始.
输入 CustomersWebGrid.cshtml 在名称字段中，然后单击"确定"继续.
替换CustomersWebGrid.cshtml文件中的以下代码.
@{
var db = Database.Open("WebPagesCustomers");
var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
var data = db.Query(selectQueryString);
var grid = new WebGrid(data);
}
<!DOCTYPE html>
<html>
<head>
<title>Customers List</title>
<style>
table, th, td {
border: solid 1px #bbbbbb;
border-collapse: collapse;
padding: 2px;
}
</style>
</head>
<body>
<h1>Customers List</h1>
<div id = "grid">
@grid.GetHtml()
</div>
</body>
</html>您可以看到代码首先打开 WebPagesCustomers 数据库文件，然后创建一个简单的SQL查询.
var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
使用SQL Select语句中返回的数据填充名为data的变量.
var data = db.Query(selectQueryString);
然后使用WebGrid助手从数据创建新网格.
var grid = new WebGrid(data);
此代码创建一个新的WebGrid对象并将其分配给网格变量.在页面正文中，使用WebGrid帮助器呈现数据，如以下程序所示.
<div id = "grid"> @grid.GetHtml() </div>
现在让我们运行应用程序并指定以下url : http://localhost:36905/CustomersWebGrid ，您将看到以下网页.
正如您所看到的，通过使用最简单的代码，WebGrid帮助程序在显示和排序数据时会做很多工作.
在上面的输出中，您可以看到数据按FirstName排序，现在您可以通过单击列标题轻松按ID或LastName等对数据进行排序.
因此，让我们点击ID列标题，您将看到数据现在按ID排序，如下面的屏幕截图所示.
WebGrid助手可以做很多事情，比如格式化列和样式化整个网格.
让我们看看同一个例子，但这一次，我们将格式化列.
@{
var db = Database.Open("WebPagesCustomers");
var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
var data = db.Query(selectQueryString);
var grid = new WebGrid(data);
}
<!DOCTYPE html>
<html>
<head>
<title>Customers List</title>
<style>
table, th, td {
border: solid 1px #bbbbbb;
border-collapse: collapse;
padding: 2px;
}
</style>
</head>
<body>
<h1>Customers List</h1>
<div id = "grid">
@grid.GetHtml(
columns: grid.Columns(
grid.Column("FirstName", format:@<i>@item.FirstName</i>),
grid.Column("LastName", format:@<i>@item.LastName</i>),
grid.Column("Address", format:@<text>$@item.Address</text>)
)
)
</div>
</body>
</html>现在让我们运行应用程序并指定以下url : http://localhost:36905/CustomersWebGrid ，您将看到以下网页.
正如您所看到的，FirstName和LastName列中的数据现在以斜体格式显示.
让我们看看看看另一个简单的例子，我们将通过定义 CSS类来设置整个网格的样式，它们指定渲染的HTML表格的外观，如下面的代码所示.
@{
var db = Database.Open("WebPagesCustomers");
var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
var data = db.Query(selectQueryString);
var grid = new WebGrid(data);
}
<!DOCTYPE html>
<html>
<head>
<title>Customers List</title>
<style type = "text/css">
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E8E8E8; color: #000; }
.product { width: 200px; font-weight:bold;}
</style>
</head>
<body>
<h1>Customers List</h1>
<div id = "grid">
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("FirstName", format:@<i>@item.FirstName</i>),
grid.Column("LastName", format:@<i>@item.LastName</i>),
grid.Column("Address", format:@<text>$@item.Address</text>)
)
)
</div>
</body>
</html>现在让我们运行应用程序并指定以下url : http://localhost:36905/CustomersWebGrid ，您将看到以下网页.
