Twitter Bootstrap 和 ASP.NET GridView

Posted 2023-02-23

【中文标题】Twitter Bootstrap 和 ASP.NET GridView

【英文标题】：Twitter Bootstrap and ASP.NET GridView

【发布时间】：2012-09-03 22:47:29

【问题描述】：

我在使用 ASP.NET 应用程序中的 Twitter Bootstrap 时遇到问题。当我将table table-striped css 类用于我的asp:GridView 控件时，它将表格的Header 视为行。 p>

我的网格视图

ASP.NET 标记

<asp:GridView ID="dgvUsers" runat="server" 
    CssClass="table table-hover table-striped" GridLines="None" 
    AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="UserID" HeaderText="ID" Visible="false" />
        <asp:BoundField DataField="Username" HeaderText="Username" />
        <asp:BoundField DataField="FirstName" HeaderText="First Name" />
        <asp:BoundField DataField="LastName" HeaderText="Last Name" />
    </Columns>
    <RowStyle CssClass="cursor-pointer" />
</asp:GridView>

结果

<table id="cphMainContent_dgvUsers" class="table table-hover table-striped" 
       cellspacing="0" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <th scope="col">Username</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
        </tr>
        <tr class="cursor-pointer">
            <td>user1</td>
            <td>Test</td>
            <td>User 1</td>
        </tr>
        <tr class="cursor-pointer">
            <td>user2</td>
            <td>Test</td>
            <td>User 2</td>
        </tr>
        <tr class="cursor-pointer">
            <td>user3</td>
            <td>Test</td>
            <td>User 3</td>
        </tr>
    </tbody>
</table>

应该是这样的

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

如何使我的 asp:GridView 的标题被 Twitter Bootstrap 视为标题？ 我的代码是 C#，框架 4，在 VS2010 Pro 中构建。

【参考方案1】：

您需要将gridview 的useaccessibleheader 属性设置为true，然后还需要在GridView 对象上调用DataBind() 方法后指定TableSection 作为标题。所以如果你的网格视图是mygv

mygv.UseAccessibleHeader = True
mygv.HeaderRow.TableSection = TableRowSection.TableHeader

这应该会生成带有thead 和tbody 标签的格式正确的网格

【讨论】：

我在dgvUsers.HeaderRow.TableSection = TableRowSection.TableHeader; 行中抛出了一个NullReferenceException。

谢谢，我应该把那行放在dgv.DataBind() 数据绑定到我的GridView 之后，NullReferenceException 现在已经消失了。它现在可以工作了。再次感谢。

@JohnIsaiahCarmona 请注意，当没有任何行可显示（当数据源为空时）时，HeaderRow 仍将为空

对于以后来这里的任何人，不要认为“真”应该是“真”

【参考方案2】：

有两个步骤可以解决这个问题：

将UseAccessibleHeader="true" 添加到 Gridview 标签：

<asp:GridView ID="MyGridView" runat="server" UseAccessibleHeader="true">

将以下代码添加到PreRender 事件：

Protected Sub MyGridView_PreRender(sender As Object, e As EventArgs) Handles MyGridView.PreRender
    Try
        MyGridView.HeaderRow.TableSection = TableRowSection.TableHeader
    Catch ex As Exception
    End Try
End Sub

注意在DataBound() 中设置标题行仅在对象被数据绑定时有效，任何其他不数据绑定gridview 的回发将导致gridview 标题行样式再次恢复为标准行。 PreRender 每次都有效，只需确保当 gridview 为空时有错误捕获。

【参考方案3】：

为了记录，我在表格中有边框，为了摆脱它，我需要在 GridView 中设置以下属性：

GridLines="None"
CellSpacing="-1"

【参考方案4】：

在gridview中添加show header的属性

 <asp:GridView ID="dgvUsers" runat="server" **showHeader="True"** CssClass="table table-hover table-striped" GridLines="None" 
AutoGenerateColumns="False">

并在列中添加标题模板

<HeaderTemplate>
                   //header column names
</HeaderTemplate>