Twitter Bootstrap和ASP.NET GridView

Question

我正在使用我的ASP.NET应用程序中的Twitter Bootstrap.当我将table table-stripedcss类用于我的asp:GridView控件时,它将表的Header视为一行.

我的GridView

ASP.NET MarkUp

<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

您需要useaccessibleheader将gridview的属性设置为true,然后在GridView对象上TableSection调用DataBind()方法之后还指定一个头.所以,如果您的网格视图是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

注意设置Header Row DataBound()仅在对象是数据绑定时才起作用,任何其他未对gridview进行数据绑定的回发都将导致gridview标题行样式再次恢复为标准行.PreRender每次都可以工作,只需确保在gridview为空时有错误捕获.