C# Twitter Bootstrap 和 ASP.NET GridView

Twitter Bootstrap and ASP.NET GridView

提问by John Isaiah Carmona

I am having aproblem using Twitter Bootstrapfrom my ASP.NET application. When I use the table table-stripedcss class to my asp:GridViewcontrol, it treats the Headerof the table as a Row.

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

My GridView

我的网格视图

ASP.NET MarkUp

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>

Result

结果

<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>

It should be like this

应该是这样的

<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>

How can I make the header of my asp:GridViewbe treated as a Header by Twitter Bootstrap? My code is in C#, framework 4, build in VS2010 Pro.

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

采纳答案by Hazem Salama

You need to set useaccessibleheaderattribute of the gridview to trueand also then also specify a TableSectionto be a header after calling the DataBind()method on you GridView object. So if your grid view is mygv

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

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

This should result in a proper formatted grid with theadand tbodytags

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

回答by Shaun Keon

There are 2 steps to resolve this:

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

1. Add UseAccessibleHeader="true"to Gridview tag:

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

2. Add the following Code to the PreRenderevent:

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

Note setting Header Row in DataBound()works only when the object is databound, any other postback that doesn't databind the gridview will result in the gridview header row style reverting to a standard row again. PreRender works everytime, just make sure you have an error catch for when the gridview is empty.

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

回答by rageit

Just for the record, I got borders in the table and to get rid of it I needed to set following properties in the GridView:

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

GridLines="None"
CellSpacing="-1"

回答by user3775539

Add property of show header in gridview

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

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

and in columns add header template

并在列中添加标题模板

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