ASP.NET Web Pages – WebGrid 帮助器

ASP.NET Web Pages 中最强数据表格神器：WebGrid 完全攻略（2025 最新实用版）

WebGrid 是 ASP.NET Web Pages 官方内置的最强「零代码」表格帮助器，一行代码就能搞定分页 + 排序 + 样式 + 交替行 + 自定义列，完爆 90% 的第三方表格插件！

一、一行代码出表格（最快上手）

<!-- Products.cshtml -->
@{
    var db = Database.Open("MyShop");
    var sql = "SELECT Id, ProductName, Price, Stock, AddTime FROM Products ORDER BY Id DESC";
    var data = db.Query(sql);

    var grid = new WebGrid(
        source: data,
        rowsPerPage: 10,                 // 每页10条
        defaultSort: "AddTime",          // 默认排序列
        canPage: true,                   // 允许分页
        canSort: true                    // 允许点击列头排序
    );
}

<h2>商品管理</h2>

@grid.GetHtml(
    tableStyle: "table table-bordered table-hover",
    headerStyle: "bg-primary text-white",
    alternatingRowStyle: "bg-light",
    columns: grid.Columns(
        grid.Column("Id", "编号", style: "text-center"),
        grid.Column("ProductName", "商品名称"),
        grid.Column("Price", "价格", format: @<strong style="color:red">¥@item.Price</strong>),
        grid.Column("Stock", "库存", format: @<span class="@(item.Stock<10?"text-danger":"")">@item.Stock</span>),
        grid.Column("AddTime", "添加时间", format: @<text>@item.AddTime.ToString("yyyy-MM-dd")</text>),
        grid.Column(header: "操作", format: @<text>
            <a href="/Products/Edit/@item.Id" class="btn btn-sm btn-warning">编辑</a>
            <a href="/Products/Delete/@item.Id" class="btn btn-sm btn-danger" onclick="return confirm('确定删除？')">删除</a>
        </text>)
    )
)

效果：自动分页、点击列头排序、交替行颜色、响应式、漂亮得像 Bootstrap Admin！

二、WebGrid 最常用的 10 个参数（背会就无敌）

var grid = new WebGrid(
    source: data,
    rowsPerPage: 15,                    // 每页条数
    defaultSort: "Price",               // 默认排序列
    sortDirection: SortDirection.Descending, // 默认倒序
    canPage: true,                      // 允许分页
    canSort: true,                      // 允许排序
    ajaxUpdateContainerId: "grid",      // Ajax 分页（后文详解）
    ajaxUpdateCallback: "afterAjax"     // Ajax 完成后执行 JS
);

三、超级实用格式化列写法大全

grid.Column("Price", "价格（元）", 
    format: @<div style="color:red;font-weight:bold">
                @String.Format("{0:N2}", item.Price)
             </div>),

grid.Column("IsHot", "热销", 
    format: @<text>
        @if(item.IsHot){
            <span class="badge bg-danger">热销</span>
        }else{
            <span class="badge bg-secondary">普通</span>
        }
    </text>),

grid.Column("Image", "图片", 
    format: @<img src="@item.Image" width="60" class="img-thumbnail" />),

grid.Column(format: @<text>
    <input type="checkbox" name="ids" value="@item.Id" />
</text>)

四、Ajax 无刷新分页 + 排序（超爽！）

<div id="grid">
    @grid.GetHtml(
        mode: WebGridPagerModes.All,     // 显示 上一页 1 2 3 ... 下一页
        firstText: "首页",
        previousText: "上一页",
        nextText: "下一页",
        lastText: "末页"
    )
</div>

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $('th a, .pagination a').on('click', function(e){
            e.preventDefault();
            $.get(this.href, function(data){
                $('#grid').html(data);
            });
        });
    });
</script>

五、完整生产级 WebGrid 示例（带搜索 + 全选 + 批量删除）

<!-- Admin/Users.cshtml -->
@{
    var db = Database.Open("MySite");
    var search = Request["search"];
    var where = search.IsEmpty() ? "" : "WHERE UserName LIKE @0 OR Email LIKE @0";
95    var sql = $"SELECT Id,UserName,Email,IsApproved,CreateDate FROM UserProfiles {where} ORDER BY Id DESC";
    var data = search.IsEmpty() ? db.Query(sql) : db.Query(sql, "%"+search+"%");

    var grid = new WebGrid(data, rowsPerPage: 15, ajaxUpdateContainerId: "grid");
}

<h2>用户管理</h2>
<form method="get" class="mb-3">
    <input type="text" name="search" value="@search" placeholder="搜索用户名或邮箱" />
    <button type="submit" class="btn btn-primary">搜索</button>
</form>

<form method="post" onsubmit="return confirm('确定删除选中用户？')">
<div id="grid">
    @grid.GetHtml(
        tableStyle: "table table-striped",
        columns: grid.Columns(
            grid.Column(format: @<input type="checkbox" name="ids" value="@item.Id" class="chk" />),
            grid.Column("UserName", "用户名"),
            grid.Column("Email", "邮箱"),
            grid.Column("CreateDate", "注册时间", format: @item.CreateDate.ToString("yyyy-MM-dd HH:mm")),
            grid.Column("IsApproved", "状态", format: @<text>
                @if(item.IsApproved){
                    <span class="text-success">已激活</span>
                }else{
                    <span class="text-danger">未激活</span>
                }
            </text>),
            grid.Column("操作", format: @<text>
                <a href="/Admin/UserEdit/@item.Id">编辑</a> |
                <a href="/Admin/UserDelete/@item.Id" onclick="return confirm('确定删除？')">删除</a>
            </text>)
        )
    )
</div>

<div class="mt-3">
    <input type="checkbox" id="selectAll" /> 全选
    <button type="submit" name="action" value="batchDelete" class="btn btn-danger">批量删除</button>
</div>
</form>

<script>
    $("#selectAll").click(function(){
        $(".chk").prop("checked", this.checked);
    });
</script>

六、WebGrid 常用美化 CSS（直接加到 site.css）

.webgrid-table { width:100%; border-collapse:collapse; }
.webgrid-table th { background:#007bff; color:white; padding:10px; }
.webgrid-table th a { color:white; text-decoration:none; }
.webgrid-table td { padding:8px; border-bottom:1px solid #ddd; }
.webgrid-table tr:nth-child(even) { background:#f8f9fa; }
.webgrid-footer { margin-top:10px; text-align:center; }
.pagination a, .pagination span { padding:5px 10px; margin:0 3px; border:1px solid #ddd; }
.pagination .current { background:#007bff; color:white; }

七、终极总结：WebGrid 为什么无敌？

功能	WebGrid 实现方式	其他方式需要写多少代码
分页	rowsPerPage: 10	手动写 LIMIT + 页码
排序	canSort: true	手动写 ORDER BY
Ajax 无刷新	ajaxUpdateContainerId: "grid"	自己写 JS + Partial
交替行 + 样式	alternatingRowStyle	自己写 CSS + JS
自定义列格式	format: @<strong>...</strong>	自己拼接 HTML
总代码量	不到 20 行	通常 100+ 行

一句话结论：
在 ASP.NET Web Pages 项目里，只要能用 WebGrid，就绝对不要手写表格！

需要我给你一个「终极 WebGrid 模板包」（含 10 种常用表格：用户、商品、订单、日志 + 搜索 + 导出 Excel + 打印样式）吗？
一个文件复制进去，全站所有管理后台表格 5 秒搞定！2025 最新优化版，随时说一声就发你！