WebGrid 是 ASP.NET Web Pages 中的一个强大的工具，用于在网页上显示和操作数据表格。WebGrid 可以轻松地从数据源中检索数据，并在网页上以表格形式呈现。以下是 WebGrid 的基本用法示例：

1. 创建 WebGrid 实例:

首先，在页面中创建一个 WebGrid 实例，通常在 Razor 语法中使用 @{ ... } 语法块：
@{
    var data = new[] {
        new { ID = 1, Name = "John", Age = 25 },
        new { ID = 2, Name = "Jane", Age = 30 },
        new { ID = 3, Name = "Bob", Age = 22 }
    };

    var grid = new WebGrid(data);
}

2. 在网页上显示 WebGrid:

使用 grid.GetHtml() 方法生成 HTML 表格，然后将其插入到页面中：
@grid.GetHtml()

这将在页面上呈现一个简单的表格，显示数据源中的数据。

3. 指定列名和显示的列:

可以使用 columns 参数指定要显示的列和列名：
@grid.GetHtml(columns: grid.Columns(
    grid.Column("ID", "User ID"),
    grid.Column("Name", "Username"),
    grid.Column("Age", "User Age")
))

4. 启用分页:

可以启用分页，并设置每页显示的行数：
@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("ID", "User ID"),
        grid.Column("Name", "Username"),
        grid.Column("Age", "User Age")
    ),
    rowsPerPage: 2,
    canPage: true
)

5. 自定义样式:

可以通过添加 CSS 类来自定义表格的样式：
@grid.GetHtml(
    tableStyle: "table",
    headerStyle: "header",
    footerStyle: "footer",
    alternatingRowStyle: "alt",
    selectedRowStyle: "selected",
    rowStyle: "row"
)

6. 排序:

可以启用列排序：
@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("ID", "User ID", canSort: true),
        grid.Column("Name", "Username", canSort: true),
        grid.Column("Age", "User Age", canSort: true)
    ),
    canSort: true
)

完整示例:
@{
    var data = new[] {
        new { ID = 1, Name = "John", Age = 25 },
        new { ID = 2, Name = "Jane", Age = 30 },
        new { ID = 3, Name = "Bob", Age = 22 }
    };

    var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>
<head>
    <title>WebGrid Example</title>
    <style>
        .table {
            border-collapse: collapse;
            width: 100%;
        }

        .table, .th, .td {
            border: 1px solid black;
        }

        .th, .td {
            padding: 8px;
            text-align: left;
        }

        .alt {
            background-color: #f2f2f2;
        }

        .selected {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>

    <h2>WebGrid Example</h2>

    @grid.GetHtml(
        columns: grid.Columns(
            grid.Column("ID", "User ID", canSort: true),
            grid.Column("Name", "Username", canSort: true),
            grid.Column("Age", "User Age", canSort: true)
        ),
        canSort: true,
        tableStyle: "table",
        headerStyle: "th",
        alternatingRowStyle: "alt",
        selectedRowStyle: "selected",
        rowStyle: "td"
    )

</body>
</html>

上述示例演示了基本的 WebGrid 使用方法，包括显示数据、指定列、启用分页和排序等。你可以根据实际需求进一步自定义和扩展。


转载请注明出处：http://www.pingtaimeng.com/article/detail/14692/ASP.NET