如何摆脱包含 GridView 的空 div

Posted 2023-03-06

【中文标题】如何摆脱包含 GridView 的空 div

【英文标题】：How to rid of empty div that contains a GridView

【发布时间】：2010-11-13 02:36:27

【问题描述】：

在 ASP.NET Gridviews 中生成一个表，该表生成一个父 div 容器。这可能会破坏 CSS 布局，因为无法将样式附加到生成的 div。有没有办法阻止 div 生成或将样式应用于它？

这被询问并标记为已解决here 但 MS 只是说分页和排序功能需要 div。我是否明白，如果我想使用分页和排序功能，我无法将自己的 div 包裹起来并应用样式？谢谢

【问题讨论】：

"包含 GridView 的空 div" - tee hee ;-D

哈哈，你说得对，完全没有意义

我也遇到同样的情况没有解决办法

【参考方案1】：

更新

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');

【参考方案2】：

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

【参考方案3】：

如果你被一个无样式的包装器困住（看起来你就是这样），但又想强制执行一种样式，请给它另一个包装器，并将你的样式应用到组合中。如果一个普通的 div 有一些你想摆脱的填充（例如），这在 aspx 中：

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

这适用于 CSS：

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

【讨论】：

我会说使用 div#crushGvDiv > div（带有 >）使其更具体，以防万一还有其他子 div #crushGvDiv，但很好的答案！我正在使用它。

感谢您鼓励我回顾我不常用的更精细的点。 “子组合器”和“相邻兄弟组合器”也是如此。 css-tricks.com/child-and-sibling-selectors

【参考方案4】：

无需修改渲染的简单解决方案：

我需要为 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

【参考方案5】：

同样的问题，天哪，它太烦人了。将 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 的味道 - 您已被警告过，但可能对您有用，尤其是在您不使用分页/排序的情况下。

【参考方案6】：

我从来没有这样做过，但我的第一个猜测是您可以在渲染的 html 输出到达浏览器之前获取它，删除外部 div，然后 htmltext 在 prerender 事件中写出新渲染的 html 或制作执行此操作的用户或自定义控件。

但是你可能会破坏 gridview 的功能，但如果你知道你不会使用使用 div 的功能，那么你可能会侥幸逃脱。

【讨论】：

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

-1 这是一个未经检验的理论，即使实施，也会比这里的许多其他答案慢得多，效率也低。

【参考方案7】：

您可以为您的 Gridview 定义一个明确的 CssClass 以供使用。

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

然后定义一个css类：

.nameOfStyleClass 

    < Style stuff >

【讨论】：

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

这只是设置gridview的样式，而不是围绕它自动生成的div。

【参考方案8】：

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

【讨论】：

谢谢，但我相信您误读了我的问题。我不是要隐藏网格视图。我试图摆脱围绕 html 表（gridview 生成的标记）作为父容器生成的空 div。