在 ASP.NET Gridviews 中生成一个表，该表生成一个父 div 容器。这可能会破坏 CSS 布局，因为无法将样式附加到生成的 div。有没有办法阻止 div 生成或将样式应用于它？
这被询问并标记为已解决here 但 MS 只是说分页和排序功能需要 div。我是否明白，如果我想使用分页和排序功能，我无法将自己的 div 包裹起来并应用样式？谢谢
【问题讨论】：
更新
Ians 的回应确实消除了其中的大部分黑客行为，但它也需要 我要付出更多的努力。我认为如果我们能做到两全其美 这样做只是有点不同...
我们根本不想再向我们的源添加一个“表格响应”的 div。我们确实想在我们的 GridView 类中添加一个“table-responsive-table”。
ASP
<asp:GridView ID=gvMain DataSourceID=dsMain RunAt=Server
CssClass='table table-responsive-table'>
我们的 JavaScript 只需要将 'table-responsive' 类添加到我们添加的那些 'table-responsive-table' 类表的父 div 中。
JS
$( document ).ready(function() {
$(".table-responsive-table").parent().addClass('table-responsive');
});
这将生成：
HTML
<div class=table-responsive>
<table class='table table-responsive-table' .....>
这个新的输出应该相对没有黑客相关的问题，因为我们最终的输出与我们本来应该有的完全相同（除了桌子上的额外类），我们不需要为每个表修改此代码（这意味着我们可以编写一次，它会自动应用到所有具有 'table-responsive-table' 类的 GridViews），并且我们根本不会移动\复制表数据（这对速度、分页和排序很重要）。我知道每个人都说他们有最好的答案，但我确实认为这是处理这个问题的绝对最佳方式。
注意：我没有测试过这个新代码，但它可能会正常工作。
【讨论】：
<div>，而是获得了gridview的父级：$("#<%= MyGridView.ClientID %>").parent().addClass('table-responsive');
使用 CSS 类“gridViewWrapperFix”的最简单和最好的解决方案。
ASPX：
<div class="gridViewWrapperFix">
<asp:GridView>
<%--the full gridview would go here--%>
</asp:GridView>
</div>
CSS：
/* styles the div that gets auto generated around and asp.net gridview */
.gridViewWrapperFix > div {
padding: 0;
margin: 0;
border: 3px solid red;
}
【讨论】：
如果你被一个无样式的包装器困住（看起来你就是这样），但又想强制执行一种样式，请给它另一个包装器，并将你的样式应用到组合中。如果一个普通的 div 有一些你想摆脱的填充（例如），这在 aspx 中：
<div id="crushGvDiv">
<asp:GridView ... >
</div>
这适用于 CSS：
div#crushGvDiv, div#crushGvDiv div { padding: 0; margin: 0; }
【讨论】：
无需修改渲染的简单解决方案：
我需要为 gridview 生成的 div 应用一个样式，因为它破坏了我的布局，所以我创建了一个 id 为“myContainerDiv”的 div 并将我的 GridView 移到其中，并使用 jQuery 我应用了一些样式。
例子：
$("#myContainerDiv > div").css("display", "inline");
我把这个 javascript 放在 $(document).ready(function({})); 中。 但是，如果您使用 UpdatePanel，就像我在这种特殊情况下必须使用的那样，我会在每个异步回发中执行这个 $().css()。否则，如果您执行一些包含网格视图的更新面板，则样式将丢失。但是我仅在触发特定的 UpdatePanel 时才执行此 $().css()（无需在每个异步回发中执行此 javascript 指令）
例子：
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined && sender._updatePanelClientIDs != null &&
sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") {
$("#myContainerDiv > div").css("display", "inline");
}
}
</script>
已解决！
整个页面将如下所示：
<script type="text/javascrcipt" src="jquery.js"></script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined && sender._updatePanelClientIDs != null &&
sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") {
$("#myContainerDiv > div").css("display", "inline");
}
}
</script>
<asp:UpdatePanel runat="server" ID="MyParticularUpdatePanel" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
// Your triggers here...
</Triggers>
<ContentTemplate>
<div id="myContainerDiv" style="display:inline;">
<asp:GridView runat="server" ID="MyGridView" AutoGenerateColumns="false" Height="150px" EmptyDataText="No data.">
<Columns>
<asp:BoundField DataField="ID" HeaderText="My ID" />
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
我不知道这段代码是否会像我写的一样编译，因为我是用记事本写的。
对不起，我的英语很差，我来自巴西。
克里斯托夫·特雷维萨尼·查维。 http://www.christophetrevisani.com
【讨论】：
同样的问题，天哪，它太烦人了。将 div 与 gridview 的顶部对接时，在 IE6/7 中呈现故障 - 父 DIV 会导致两个元素之间存在空格。
我已经使用反射器挖掘了 GridView 代码并发现了问题：
Private Sub Render(ByVal writer As HtmlTextWriter, ByVal renderPanel As Boolean)
If (Not Me.Page Is Nothing) Then
Me.Page.VerifyRenderingInServerForm(Me)
End If
Me.PrepareControlHierarchy
If renderPanel Then
Dim clientID As String = Me.ClientID
If Me.DetermineRenderClientScript Then
If (clientID Is Nothing) Then
Throw New HttpException(SR.GetString("GridView_MustBeParented"))
End If
Dim builder As New StringBuilder("__gv", (clientID.Length + 9))
builder.Append(clientID)
builder.Append("__div")
writer.AddAttribute(HtmlTextWriterAttribute.Id, builder.ToString, True)
End If
writer.RenderBeginTag(HtmlTextWriterTag.Div)
End If
Me.RenderContents(writer)
If renderPanel Then
writer.RenderEndTag
End If
End Sub
这是从渲染中调用的：
Protected Friend Overrides Sub Render(ByVal writer As HtmlTextWriter)
Me.Render(writer, Not MyBase.DesignMode)
End Sub
所以，'renderPanel' == 不是设计模式。当gridview 不在 在UpdatePanel 中时，DIV 用于分页和排序。在我的网站上，所有 GridView 都在 UP 中，并且它们从自定义 gridview 类继承，所以我的解决方案是使用以下内容覆盖上述函数：
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Me.PrepareControlHierarchy()
Me.RenderContents(writer)
End Sub
另一种解决方案是从上面复制渲染方法并根据需要进行更改。
这有点 HACK 的味道 - 您已被警告过，但可能对您有用，尤其是在您不使用分页/排序的情况下。
【讨论】：
我从来没有这样做过，但我的第一个猜测是您可以在渲染的 html 输出到达浏览器之前获取它，删除外部 div，然后 htmltext 在 prerender 事件中写出新渲染的 html 或制作执行此操作的用户或自定义控件。
但是你可能会破坏 gridview 的功能，但如果你知道你不会使用使用 div 的功能，那么你可能会侥幸逃脱。
【讨论】：
您可以为您的 Gridview 定义一个明确的 CssClass 以供使用。
<asp:GridView ... CssClass="nameOfStyleClass" ... />
然后定义一个css类：
.nameOfStyleClass
{
< Style stuff >
}
【讨论】：
你可以把它放在一个 asp:Panel 里面，如果表格是空的，把面板上的 Visible 属性设置为 false。
【讨论】：