以下是一个简单的例子,演示如何使用 WebGrid 在 Razor 页面中显示一个简单的数据表格:
@{
// 模拟数据,可以替换为从数据库或其他来源获取的实际数据
var data = new[]{
new { ID = 1, Name = "项目1", Description = "描述1" },
new { ID = 2, Name = "项目2", Description = "描述2" },
new { ID = 3, Name = "项目3", Description = "描述3" }
};
// 创建 WebGrid,并绑定数据
var grid = new WebGrid(source: data, canPage: true, rowsPerPage: 2);
}
<!DOCTYPE html>
<html>
<head>
<title>WebGrid 示例</title>
</head>
<body>
<h1>项目列表</h1>
@grid.GetHtml(
tableStyle: "table",
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("ID", "序号"),
grid.Column("Name", "名称"),
grid.Column("Description", "描述")
)
)
</body>
</html>
在这个例子中:
- data 是一个包含项目信息的模拟数据数组。
- 使用 WebGrid 创建了一个网格对象,通过 source 参数将数据源绑定到网格上,并设置了分页(canPage: true,rowsPerPage: 2)。
- @grid.GetHtml() 用于生成包含表格的HTML,并通过传递一些样式和列定义来定制表格的外观和行为。
在实际项目中,你可以通过替换 data 的内容以及调整 WebGrid 的配置来适应你的数据和需求。WebGrid 还提供了其他一些功能,如自定义排序、分页等,可以根据实际情况进行使用。
转载请注明出处:http://www.zyzy.cn/article/detail/14844/ASP.NET Razor 标记