Question

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

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

Answer 1

如果你遇到了一个没有样式的包装器（看起来你是这样）但是想要强制执行一个样式，那就给它另一个包装器，然后将你的样式应用到组合中。如果一个普通的div有一些填充你想要摆脱（例如），这在aspx：

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

这适用于CSS：

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

Answer 2

同样的问题，OMG它的如此令人讨厌。当将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。当Updateview中的gridview 不是时，DIV用于分页和排序。在我的网站上，所有GridView都处于UP状态，并且他们从自定义gridview类继承，因此我的解决方案是使用以下内容覆盖上述函数：

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

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

这有HACK的气味 - 你已被警告过，但可能对你有用，特别是如果你没有使用分页/排序。

Answer 3

没有渲染修改的简单解决方案：

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

示例：

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

我把这个javascript放在$（document）.ready（function（{}））;中。但是如果你使用UpdatePanel，就像我必须在这种特殊情况下使用的那样，我会在每个异步回发中执行这个$（）。css（）。如果不执行此操作，如果执行包含gridview的更新面板，样式将会丢失。但是只有在触发了特定的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

Answer 4

<强>更新

Ians的回应确实从中删除了很多hackery，但它也需要我的努力更多。我想如果我们能够拥有两全其美的优势这样做有点不同......

我们不再希望添加表格响应式＆＃39;总而言之。我们想要添加一个表格响应表格＆＃39;到我们的GridView类。

<强> ASP

    <asp:GridView ID=gvMain DataSourceID=dsMain RunAt=Server 
            CssClass='table table-responsive-table'>

我们的JavaScript只需要添加表格响应＆＃39;这些表的响应表＆table;我们已添加的课程表。

<强> JS

$( document ).ready(function() {
  $(".table-responsive-table").parent().addClass('table-responsive');
});

这将产生：

<强> HTML

<div class=table-responsive>
    <table class='table table-responsive-table' .....>

这个新输出应该相对没有与hackery相关的问题，因为我们最终会有与我们原本相同的输出（除了桌子上的额外课程），我们这样做不需要为每个表修改这个代码（这意味着我们可以编写一次，并且它会自动应用于所有带有＆＃39; table-responsive-table＆＃39;类的GridView），而且我们不会移动\复制表数据（这对于速度，分页和排序很重要）。我知道每个人都说他们有最好的答案，但我确实认为这是处理这个问题的最佳方法。

注意：我没有测试过这个新代码，但它可能会运行得很好。

Answer 5

如果表格为空，您可以将其放在asp：Panel中，并将面板上的Visible属性设置为false。

Answer 6

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

Answer 7

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

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

Answer 8

您可以为Gridviews定义一个显式的CssClass来使用。

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

然后定义一个css类：

.nameOfStyleClass 
{
    < Style stuff >
}

如何摆脱包含GridView的空div

8 个答案: