以下是一个简单的 WebGrid 示例：
@{
var data = new[]{
new { ID = 1, Name = "John", Age = 25 },
new { ID = 2, Name = "Alice", Age = 30 },
new { ID = 3, Name = "Bob", Age = 28 }
};
var grid = new WebGrid(data);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGrid Example</title>
</head>
<body>
<h1>WebGrid Example</h1>
@grid.GetHtml(
columns: grid.Columns(
grid.Column("ID", "ID"),
grid.Column("Name", "Name"),
grid.Column("Age", "Age")
)
)
</body>
</html>
在上述示例中：
1. 我们创建了一个包含一些示例数据的数组 data。
2. 使用 WebGrid 对象，将数据传递给 WebGrid 的构造函数。
3. 使用 grid.GetHtml 方法配置 WebGrid 的呈现方式，指定显示的列。
WebGrid 提供了丰富的选项，可以进行分页、排序、筛选等操作。下面是一个包含分页和排序的示例：
@{
var data = new[]{
new { ID = 1, Name = "John", Age = 25 },
new { ID = 2, Name = "Alice", Age = 30 },
new { ID = 3, Name = "Bob", Age = 28 },
// More data...
};
var grid = new WebGrid(data, canPage: true, rowsPerPage: 2, canSort: true);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGrid Example</title>
</head>
<body>
<h1>WebGrid Example</h1>
@grid.GetHtml(
columns: grid.Columns(
grid.Column("ID", "ID"),
grid.Column("Name", "Name"),
grid.Column("Age", "Age")
),
mode: WebGridPagerModes.All
)
</body>
</html>
在这个示例中，我们启用了分页和排序功能，并配置了页面每页显示的行数。WebGridPagerModes.All 用于显示所有的分页控件。
通过 WebGrid，你可以在 ASP.NET Web Pages 中方便地展示和操作数据表格。这只是 WebGrid 的基本用法，你还可以通过进一步的配置来实现更多的功能。
转载请注明出处：http://www.zyzy.cn/article/detail/14788/ASP.NET Web Pages