ASP.NET GridView Control CRUD With Bootstrap

Here's a simple CRUD application using ASP.NET GridView control with Twitter Bootstrap as it's css class reference. The code sample used is in VB.NET.
Create:

Update:

Delete:

ASPX markup:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112

<div id="Container"> <div id="GridContainer"> <div id="LabelContainer"> <asp:Label ID="lblHeading" runat="server" Text="ASP.NET GridView CRUD with Bootstrap (VB.NET)" > </asp:Label> </div> <br /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Code,Type,Gender" ShowFooter="True" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDataBound="GridView1_RowDataBound" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowCommand="GridView1_RowCommand" CellPadding="0" ForeColor="#333333" CssClass="table table-striped table-bordered table-condensed"> <Columns> <asp:TemplateField HeaderText="Name"> <EditItemTemplate> <asp:TextBox id="txtName" runat="server" Text='<%# Eval("Name") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label id="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label> </ItemTemplate> <FooterTemplate> <asp:TextBox ID="txtNewName" runat="server" ></asp:TextBox> </FooterTemplate> <ItemStyle Wrap="True" /> </asp:TemplateField> <asp:TemplateField HeaderText="Gender"> <EditItemTemplate> &nbsp; <asp:DropDownList ID="cmbGender" runat="server"> <asp:ListItem>Male</asp:ListItem> <asp:ListItem>Female</asp:ListItem> </asp:DropDownList> </EditItemTemplate> <ItemTemplate> <asp:Label runat="server" Text='<%# Eval("Gender")%>' id="Label2"></asp:Label> </ItemTemplate> <FooterTemplate> <asp:DropDownList ID="cmbNewGender" runat="server" > <asp:ListItem>Male</asp:ListItem> <asp:ListItem>Female</asp:ListItem> </asp:DropDownList> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="City"> <EditItemTemplate> <asp:TextBox runat="server" Text='<%# Eval("City")%>' id="txtCity"></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label runat="server" Text='<%# Eval("City")%>' id="Label3"></asp:Label> </ItemTemplate> <FooterTemplate> <asp:TextBox ID="txtNewCity" runat="server" ></asp:TextBox> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="State"> <EditItemTemplate> <asp:TextBox runat="server" Text='<%# Eval("State")%>' id="txtState"></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label runat="server" Text='<%# Eval("State")%>' id="Label4"></asp:Label> </ItemTemplate> <FooterTemplate> <asp:TextBox ID="txtNewState" runat="server"></asp:TextBox> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Type"> <EditItemTemplate> &nbsp; <asp:DropDownList ID="cmbType" runat="server"> <asp:ListItem>Retail</asp:ListItem> <asp:ListItem>Wholesale</asp:ListItem> </asp:DropDownList> </EditItemTemplate> <ItemTemplate> <asp:Label runat="server" Text='<%# Eval("Type") %>' id="Label5"></asp:Label> </ItemTemplate> <FooterTemplate> <asp:DropDownList ID="cmbNewType" runat="server"> <asp:ListItem>Retail</asp:ListItem> <asp:ListItem>Wholesale</asp:ListItem> </asp:DropDownList> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Edit" ShowHeader="False"> <ItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" CssClass="btn btn-primary" Text="Edit"></asp:LinkButton> </ItemTemplate> <EditItemTemplate> <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="True" CssClass="btn btn-info" CommandName="Update" Text="Update"></asp:LinkButton> <asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" CssClass="btn btn-info" CommandName="Cancel" Text="Cancel"></asp:LinkButton> </EditItemTemplate> <FooterTemplate> <asp:LinkButton ID="lnkAddNew" CssClass="btn btn-primary" runat="server" CommandName="AddNew">Add</asp:LinkButton> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Delete" ShowHeader="False"> <ItemTemplate> <span onclick="return confirm('Are you sure to Delete the record?')"> <asp:LinkButton ID="lnkB" runat="Server" CssClass="btn btn-primary" Text="Delete" CommandArgument='<%# Container.DataItemIndex %>' CommandName="Delete"></asp:LinkButton> </span> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </div>

Source Code: http://www.vbforums.com/showthread.php?776827-ASP-NET-GridView-CRUD-with-Bootstrap-(VB-NET)
Cheers!