web-dev-qa-db-fra.com

Twitter Bootstrap et ASP.NET GridView

Je vais avoir un problème avec Twitter Bootstrap à partir de mon application ASP.NET. Lorsque j'utilise la classe table table-striped css dans mon contrôle asp:GridView, il traite le en-tête de la table comme un Ligne.

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

Résultat

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>

Ça devrait être comme ça

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>


Comment puis-je traiter l'en-tête de mon asp:GridView comme un en-tête par Twitter Bootstrap? Mon code est en C #, framework 4, construit dans VS2010 Pro.

c#asp.netgridview.net-4.0twitter-bootstrap
38
John Isaiah Carmona

Vous devez définir l'attribut useaccessibleheader de gridview sur true, puis spécifier également un TableSection comme en-tête après l'appel de la méthode DataBind() sur votre objet GridView. Donc, si votre vue de grille est mygv

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

Cela devrait donner une grille correctement formatée avec les balises thead et tbody

48
Hazem Salama

Il y a 2 étapes pour résoudre ceci:

  1. Ajoutez UseAccessibleHeader="true" à la balise Gridview:

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

  2. Ajoutez le code suivant à l'événement 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

Le réglage de la note Header Row dans DataBound() ne fonctionne que lorsque l'objet est lié à la donnée. Toute autre publication qui n'indique pas la vue grilleview entraînera le retour du style de la ligne d'en-tête gridview à une ligne standard. PreRender fonctionne à chaque fois, assurez-vous simplement que vous avez une erreur d'erreur lorsque la grille d'affichage est vide.

6
Shaun Keon

Pour info, j'ai des bordures dans la table et pour m'en débarrasser, il fallait définir les propriétés suivantes dans GridView:

GridLines="None"
CellSpacing="-1"
4
rageit

Ajouter une propriété de show header dans gridview 

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

et en colonnes ajouter un modèle d'en-tête

<HeaderTemplate>
                   //header column names
</HeaderTemplate>
0
user3775539