如何在asp.net webform中使用bootstrap格式化gridview的编辑、更新、删除按钮

Question

Currently I have a gridview with edit, delete and update buttons enabled on a gridview in asp.net web form. Just wandering how to edit those buttons as by default they are designed to look as a simple hyperlink.

heres the gridview design code:

<asp:GridView ID="GridView1" CssClass="table table-bordered" runat="server" 
  AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" 
  AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" 
  AutoGenerateSelectButton="True" DataKeyNames="Sr_No" DataSourceID="SqlDataSource1" 
  OnSelectedIndexChanged="GridView1_SelectedIndexChanged" 
  OnRowEditing="GridView1_RowEditing">
    <Columns>
        <asp:BoundField DataField="Sr_No" HeaderText="Sr_No" InsertVisible="False" ReadOnly="True" SortExpression="Sr_No" />
        <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
        <asp:BoundField DataField="From_Date" HeaderText="From_Date" SortExpression="From_Date" />
        <asp:BoundField DataField="To_Date" HeaderText="To_Date" SortExpression="To_Date" />
        <asp:BoundField DataField="No" HeaderText="No" SortExpression="No" />
        <asp:BoundField DataField="Remarks" HeaderText="Remarks" SortExpression="Remarks" />
    </Columns>
</asp:GridView>

As seen in the above code, I cannot find the button lines in this design. Thanks in advance.(I am just a beginner in .net dev)

Answer 1

If you create a TemplateField with a LinkButton that has the CommandNames Edit , Delete , Cancel and Update etc then you can style them.

<asp:GridView ID="GridView1" runat="server">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>

                <asp:LinkButton ID="editRow" runat="server" CommandName="Edit" Text="Edit" CssClass="btn btn-primary" />

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>