ASP.NET MVC4中WebGrid隐藏主键列时默认排序失效如何解决？

我之前在使用WebGrid的时候也碰到过类似的问题，来帮你分析下原因并给出解决方案：

问题原因 #

WebGrid的排序功能依赖于列的DOM元素存在以及排序字段的正确关联。你现在只通过jQuery隐藏了表头，但如果主键列的hidecol样式没覆盖整列，或者WebGrid在生成排序逻辑时找不到对应的字段关联，就会导致默认排序失效。另外，虽然你的存储过程有默认排序，但WebGrid的前端排序请求需要后端正确接收并响应，才能联动生效。

解决方案 #

方案1：不渲染主键列（推荐，若无需在DOM中保留主键） #

如果你的主键列只是用于排序，不需要在页面DOM中保留（比如不需要用它做编辑/删除等操作），直接不在WebGrid的列集合中添加主键列，同时初始化WebGrid时指定默认排序字段：

1. 初始化WebGrid时指定默认排序

@{
    var grid = new WebGrid(source: Model, defaultSort: "AAAA", rowsPerPage: 10);
}

2. 生成Grid HTML时移除主键列

@grid.GetHtml(
    htmlAttributes: new { id = "XXXX" },
    tableStyle: "table table-bordered table-condensed table-hover table-striped",
    headerStyle: "info",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "gridrow",
    columns: grid.Columns(
        // 只添加需要显示的列，去掉grid.Column("AAAA", ...)这一行
        grid.Column("OtherColumn1", "列名1"),
        grid.Column("OtherColumn2", "列名2")
    )
)

这样既不会显示主键列，WebGrid也能识别默认排序字段为AAAA，结合存储过程的默认排序逻辑，排序功能就能正常工作。

方案2：保留主键列但用CSS隐藏整列（若需在DOM中保留主键） #

如果需要在页面中保留主键列的DOM（比如后续JS要用到主键值），用CSS隐藏整列（表头+数据行），而不是只通过jQuery隐藏表头：

1. 定义全局CSS样式

.hidecol {
    display: none !important;
}

2. WebGrid列定义中添加样式

@grid.GetHtml(
    htmlAttributes: new { id = "XXXX" },
    tableStyle: "table table-bordered table-condensed table-hover table-striped",
    headerStyle: "info",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "gridrow",
    columns: grid.Columns(
        grid.Column("AAAA", "AAAA", style: "hidecol"), // 主键列添加hidecol样式
        // 其他显示列
        grid.Column("OtherColumn1", "列名1")
    )
)

此时整列会被CSS隐藏，但WebGrid生成的排序链接依然存在于DOM中，排序逻辑能正常识别AAAA字段，无需再用jQuery单独隐藏表头。

方案3：让存储过程支持动态排序（完善排序功能） #

为了让WebGrid的前端排序请求能正确联动后端，需要在Controller中接收WebGrid传递的sort和sortdir参数，并传递给存储过程：

1. Controller中获取排序参数

public ActionResult YourAction()
{
    // 获取WebGrid的排序参数，默认用AAAA升序
    string sortColumn = Request.QueryString["sort"] ?? "AAAA";
    string sortDirection = Request.QueryString["sortdir"] ?? "ASC";
    
    // 调用存储过程并传入排序参数
    var data = YourDataAccessLayer.GetGridData(sortColumn, sortDirection);
    
    return View(data);
}

2. 修改存储过程支持动态排序

CREATE PROCEDURE GetGridData
    @SortColumn NVARCHAR(50),
    @SortDirection NVARCHAR(4)
AS
BEGIN
    SELECT * FROM YourTableName
    ORDER BY 
        CASE WHEN @SortDirection = 'ASC' THEN
            CASE @SortColumn
                WHEN 'AAAA' THEN AAAA
                WHEN 'OtherColumn1' THEN OtherColumn1
                -- 其他需要支持排序的列
            END
        END ASC,
        CASE WHEN @SortDirection = 'DESC' THEN
            CASE @SortColumn
                WHEN 'AAAA' THEN AAAA
                WHEN 'OtherColumn1' THEN OtherColumn1
                -- 其他需要支持排序的列
            END
        END DESC
END

这样前端点击其他列排序时，后端也能正确响应，同时默认排序也能正常生效。

内容的提问来源于stack exchange，提问作者Sup