ASP.NET MVC4中WebGrid Helper设置列不可见的实现方法求助

我来给你几个在ASP.NET MVC4 WebGrid里亲测有效的方案，完美解决「隐藏列但保留数据供后续使用」的需求：

这种方法会让列在HTML里正常生成，但通过CSS让它不可见——好处是后续不管用JS读取数据，还是表单提交，都能轻松拿到这些列的值。

先修改你的@grid.GetHtml代码，给需要隐藏的列加个自定义样式类，比如hidden-column：

@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",
    columns: grid.Columns(
        grid.Column("VisibleColumn1", "可见列1"),
        grid.Column("VisibleColumn2", "可见列2"),
        // 给需要隐藏的列添加自定义样式
        grid.Column("HiddenColumn1", style: "hidden-column"),
        grid.Column("HiddenColumn2", style: "hidden-column")
    )
)

然后在页面的<style>标签或者全局CSS文件里添加这个隐藏样式：

.hidden-column {
    display: none;
}

这样列就会被完全隐藏，但HTML结构里依然存在。比如你用JS获取表格行的单元格时，还是能拿到隐藏列的内容；如果是表单里的网格，提交时这些列的字段值也会被正常传递到后台。

要是你不想生成多余的列HTML，可以直接把需要保留的数据绑定到表格行的data-*属性上——既不显示多余列，又能方便JS调用数据。

修改代码时，通过rowAttributes给每行添加自定义data属性：

@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",
    // 给每行添加存储隐藏数据的data属性
    rowAttributes: item => new Dictionary<string, object> {
        { "data-hidden-col1", item.HiddenColumn1 },
        { "data-hidden-col2", item.HiddenColumn2 }
    },
    columns: grid.Columns(
        grid.Column("VisibleColumn1", "可见列1"),
        grid.Column("VisibleColumn2", "可见列2")
        // 这里不用再定义隐藏列了
    )
)

之后用JS读取数据超方便：

// 比如获取第二行的隐藏数据
const targetRow = document.querySelector('#XXXX tr:nth-child(2)');
const hiddenVal1 = targetRow.dataset.hiddenCol1;
const hiddenVal2 = targetRow.dataset.hiddenCol2;

这种方式的DOM结构更简洁，没有多余的列元素，适合只需要用JS处理隐藏数据的场景。

如果你的网格是在表单里，需要把隐藏数据提交到后台，可以在可见列里嵌入隐藏域，再把承载隐藏域的列隐藏掉：

@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",
    columns: grid.Columns(
        grid.Column("VisibleColumn1", "可见列1"),
        grid.Column("VisibleColumn2", "可见列2"),
        // 生成隐藏域，并用style隐藏这个列
        grid.Column("", format: @<text>
            <input type="hidden" name="HiddenColumn1" value="@item.HiddenColumn1" />
            <input type="hidden" name="HiddenColumn2" value="@item.HiddenColumn2" />
        </text>, style: "hidden-column")
    )
)

同样搭配之前的hidden-column CSS样式，表单提交时这些隐藏域的值就会被自动提交到后台，完全不影响前端显示效果。

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