Twitter Bootstrap и ASP.NET GridView

У меня есть aproblem с помощью Twitter Bootstrap из моего приложения ASP.NET. Когда я использую класс table table-striped css для моего элемента управления asp:GridView, , он обрабатывает заголовок таблицы как строку.

Мой 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>

Результат

Header treated as a row

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


Как я могу сделать заголовок моего asp:GridView рассматриваться как заголовок Twitter Bootstrap? Мой код находится в С#, фреймворк 4, в VS2010 Pro.

Ответы

Ответ 1

Вам нужно установить атрибут useaccessibleheader gridview на true, а затем также указать TableSection как заголовок после вызова метода DataBind() на объект GridView. Поэтому, если ваш вид сетки mygv

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

Это должно привести к правильной отформатированной сетке с тегами thead и tbody

Ответ 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 снова вернется к стандартной строке. PreRender работает каждый раз, просто убедитесь, что у вас есть ошибка catch, когда gridview пуст.

Ответ 3

Просто для записи, я получил границы в таблице и, чтобы избавиться от нее, мне нужно было установить следующие свойства в GridView:

GridLines="None"
CellSpacing="-1"