c# - Twitter Bootstrap 和 ASP.NET GridView

Question

我在我的 ASP.NET 应用程序中使用Twitter Bootstrap时遇到问题。当我使用table table-stripedcss 类来asp:GridView控制时，它将表的Header视为Row。

我的网格视图

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 中构建。

Answer 1

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

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

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

Answer 2

有 2 个步骤可以解决此问题：

1. 添加UseAccessibleHeader="true"到 Gridview 标签：

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

2. 将以下代码添加到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

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

Answer 3

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

GridLines="None"
CellSpacing="-1"

Answer 4

在gridview中添加显示标题的属性

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

并在列中添加标题模板

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