如何使用 ASP.Net MVC3 在 webgrid 中隐藏隐藏字段的列？答案

【问题标题】：How do you hide a column for a hidden field within a webgrid using ASP.Net MVC3?如何使用 ASP.Net MVC3 在 webgrid 中隐藏隐藏字段的列？
【发布时间】：2011-12-02 23:28:50
【问题描述】：

如何隐藏应该隐藏在视图之外的列。我通过隐藏对象来处理这个问题，但该列仍然在 UI 中显示为一个瘦列，行中没有任何内容。有没有办法防止物品被绘制？

grid.Column(null, null, format: @<input type="hidden" name="RevisionId" value="@item.LatestRevisionId"/>)

谢谢。

【问题讨论】：

标签： asp.net-mvc-3 razor hide webgrid

【解决方案1】：

WebGrid 帮助器允许您使用 style 属性将 CSS 类应用于各个列。不幸的是，虽然这将允许您隐藏 tbody 部分内的列，但您不能将不同的样式应用于列标题。您可以将相同的样式应用于所有列，这使得它非常无用。所以一种可能性是使用 CSS：

table th:first-child, table td:first-child {
    display: none;
}

这假设您要隐藏第一列，并且客户端浏览器支持 :first-child 伪选择器，而旧版浏览器可能不支持。

因此，如果您需要支持旧版浏览器，您可以使用 jQuery 将隐藏样式应用于标题和第一列的行，或者直接隐藏它们：

$(function () {
    $('table th:first-child, table td:first-child').hide();
});

如果您想获得更多控制权，我建议您查看MvcContrib Grid 或Telerik Grid。

【讨论】：

我试过这种方法，效果很好。该列是隐藏的，但问题是 Webgrid 不再具有分页功能。它只显示前 20 条记录（20 是最大行数），而不显示底部的页面。你认为这可能是因为隐藏列是记录的id 吗？
感谢我也遇到了这个问题，它工作得很好
当我有多张桌子时应该选择什么？

【解决方案2】：

*强文本*Darin 的解决方案只是部分的，因为“table th:first-child”也将hide the "canPage:true" grid footer（用于分页）。

解决方法是添加additional styling。

在您的“head”部分（或者如果您想在所有表格上应用它，也可以在 CSS 文件中）：

<style type="text/css">
    .nodisplay {display: none;}
</style>

在 Webgrid 部分：

footerStyle : "table-footer",
...
grid.Column(null, null, style:"nodisplay", ...

在 CSS 文件中：

.table-footer {
    display: normal
}

【讨论】：