Twitter Bootstrap和ASP.NET GridView

我从我的ASP.NET应用程序使用Twitter Bootstrap有问题 。 当我使用table table-striped css类到我的asp:GridView控件时， 它将表格的Header视为一个Row 。

我的GridView

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，build立在VS2010 Pro。

Answer 1

您需要将gridview的useaccessibleheader属性设置为true ，然后还要将TableSection指定为标题。 所以如果你的网格视图是mygv

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

这应该导致一个正确的格式化网格与thead和tbody标签

Answer 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 

注意：设置DataBound()标题行只在对象是数据绑定的情况下才起作用，其他任何不会数据绑定gridview的回发将导致gridview标题行样式再次恢复为标准行。 PreRender每次都工作，只要确保在gridview为空的时候有一个错误。

Answer 3

只是为了logging，我得到了表中的边界，并摆脱它我需要在GridView中设置以下属性：

 GridLines="None" CellSpacing="-1"