如何删除包含GridView的空div

Question

在ASP.NET Gridviews中，生成一个表格并产生一个父div容器。这可能会破坏CSS布局，因为无法将样式附加到生成的div上。是否有方法可以防止div生成或者应用样式到它上面？

这个问题已经在这里被提出并解决了（链接），但是微软只是说分页和排序功能需要这个div。那么我是否理解正确，如果我想使用分页和排序功能，我不能包装自己的div并应用样式吗？谢谢。

- angelo

---

空的 div 包含一个 GridView。嘻嘻 ;-D - Tor Haugen

哈哈，你说得对，那根本没有意义。 - angelo

我也处于同样的情况，没有解决方案。 - Rahul Nikate

Answer 1

如果您的包装器没有样式（看起来是这样），但想要强制应用样式，请给它添加另一个包装器，并将样式应用于组合体。例如，如果一个普通的div有一些您想要去除的填充，则在aspx中使用以下代码：

<div id="crushGvDiv">
 <asp:GridView ... >
</div>

还有这个是关于CSS的：

div#crushGvDiv, div#crushGvDiv div { padding: 0; margin: 0; }

- fortboise

---

我会建议使用 div#crushGvDiv > div（带有>）来使它更加具体，以防 #crushGvDiv 具有其他子 div，但是很好的答案！我正在使用它。 - Sean Kendle

谢谢您鼓励我回顾并学习那些我不常用的CSS细节，像是"子级选择器"和"相邻兄弟选择器"。您可以在http://css-tricks.com/child-and-sibling-selectors/找到更多相关内容。 - fortboise

Answer 2

更新

Ian的回应去除了很多hackery，但这也需要我花更多的精力。如果我们稍微改变一下，我认为我们可以兼顾两全...

我们不再想在源代码中添加'table-responsive' 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”类的GridView），而且我们根本没有移动\复制表格数据（这对于速度、分页和排序非常重要）。我知道每个人都说他们有最好的答案，但我真的认为这是处理这个问题的绝佳方式。

注意：我尚未测试这个新代码，但它可能完全正常工作。

- krowe2

---

我也尝试添加bootstrap表格响应式，但是我没有使用额外的<div>，而是获取了gridview的父元素：$("#<%= MyGridView.ClientID %>").parent().addClass('table-responsive'); - Ian

Answer 3

一种不需要修改渲染的简单解决方案：

我需要对由GridView生成的div应用样式，因为它破坏了我的布局，所以我创建了一个id为“myContainerDiv”的div，并将我的GridView移动到其中，使用jQuery应用一些样式。

示例：

$("#myContainerDiv > div").css("display", "inline");

我将这个JavaScript放在$(document).ready(function({}))中。 但是，如果您使用UpdatePanel，就像我在这种特定情况下必须使用的那样，我会在每次异步回发时执行$().css()。如果您执行包含网格视图的一些updatepanel，则样式将丢失。但是，仅在触发特定的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>

我不知道这段代码是否能像我写的那样编译，因为我是用记事本写的。

对不起，我的英语很差，我来自巴西。

Christophe Trevisani Chavey。 http://www.christophetrevisani.com

- Christophe Trevisani Chavey

Answer 4

我也遇到了同样的问题，天啊，这太让人恼火了。当将一个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”等于非DesignMode。当gridview不在UpdatePanel中时，DIV用于分页和排序。在我的网站上，所有的GridView都在UP中，并且它们继承自一个自定义的GridView类，所以我的解决方法是用以下函数覆盖上面的函数：

    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
        Me.PrepareControlHierarchy()
        Me.RenderContents(writer)
    End Sub

另一种解决方案可能是复制上面的渲染方法并根据需要进行更改。

这似乎有些“猥琐”，但如果您不使用分页/排序，它可能适合您。

- JimmyP

Answer 5

使用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;
}

- Taylor Brown

Answer 6

你可以将它放在一个 asp:Panel 中，如果表格为空，则将面板的 Visible 属性设置为 false。

- David

---

谢谢你，但我相信你误读了我的问题。我不是试图隐藏一个GridView。我正在尝试摆脱围绕HTML表格（GridView生成的标记）生成的空Div作为父容器的情况。 - angelo

Answer 7

我从未这样做过，但我的第一个猜测是您可以在输出呈现的 HTML 到达浏览器之前获取它，删除外部 div，然后在 prerender 事件中 htmltextwrite 出您的新呈现的 HTML 或创建一个用户或自定义控件来执行此操作。

但是，这样做会有破坏 gridview 功能的风险，但如果您知道不会使用使用 div 的功能，则可能会得逞。

- Steve

---

听起来这样做可能有效，但如果我删除div，可能会破坏排序/分页功能。我想没有内置的方法可以将样式应用于div并仍然具有分页和排序功能。我可以尝试获取HTML并向div添加CSS类。谢谢。 - angelo

-1 这是一个未经测试的理论，即使实现了，也比其他答案要慢得多且效率低下。 - krowe2

Answer 8

你可以为你的Gridview定义一个明确的CssClass来使用。

<asp:GridView ... CssClass="nameOfStyleClass" ... />

然后定义一个 CSS 类：

.nameOfStyleClass 
{
    < Style stuff >
}

- Denis Sadowski

---

问题是我不想在表格上使用类。表格元素的行为与 div 元素不同，并且使用 CSS 很麻烦。如果可以的话，我宁愿使用 div。谢谢。 - angelo

这只是为GridView设置样式，而不是自动生成的div。 - Taylor Brown