Use CheckBox inside Gridview in ASP.NET

We will use a Checkbox inside a GridView and in that the user selects the data and that data is saved to the database.

Initial chamber 


Step 1 

Open your Visual Studio 2010 and create an empty website. Name it gridview_demo.

Step 2 

In Solution Explorer you will see your empty website, add a web form and a SQL Server database as in the following.

For Web Form:

gridview_demo (your empty website) then right-click then select Add New Item -> Web Form. Name it gridview_demo.aspx.

For SQL Server Database

gridview_demo (your empty website) then right-click then select Add New Item -> SQL Server Database. Add the database inside the App_Data_folder.

DATABASE CHAMBER

Step 3 

In Server Explorer, click on your database (Database.mdf) then select Tables -> Add New Table. Make the table like this.
Go to your database (Database.mdf) and create a table tbl_Data. Go to the database.mdf, then Table and Add New table. Design your table like the following:


Table tbl_data (don't forget to make ID as Identity Specification - -> Yes)

table design

In a similar manner use another table and name it tbl_save, with the same field.

tbl_save:

table

Design chamber

Step 4 

Now open your gridview_demo.aspx file to create our simple design with the GridView and a button.

Gridview_demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div>  
  12.       
  13.         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  14.             BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"   
  15.             CellPadding="4" ForeColor="Black" GridLines="Vertical">  
  16.             <AlternatingRowStyle BackColor="White" />  
  17.             <Columns>  
  18.                 <asp:TemplateField HeaderText="ID">  
  19.                     <EditItemTemplate>  
  20.                         <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("id") %>'></asp:TextBox>  
  21.                     </EditItemTemplate>  
  22.                     <ItemTemplate>  
  23.                         <asp:Label ID="Label1" runat="server" Text='<%# Bind("id") %>'></asp:Label>  
  24.                     </ItemTemplate>  
  25.                 </asp:TemplateField>  
  26.                 <asp:TemplateField HeaderText="Name">  
  27.                     <EditItemTemplate>  
  28.                         <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>  
  29.                     </EditItemTemplate>  
  30.                     <ItemTemplate>  
  31.                         <asp:Label ID="Label2" runat="server" Text='<%# Bind("name") %>'></asp:Label>  
  32.                     </ItemTemplate>  
  33.                 </asp:TemplateField>  
  34.                 <asp:TemplateField HeaderText="City">  
  35.                     <EditItemTemplate>  
  36.                         <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("city") %>'></asp:TextBox>  
  37.                     </EditItemTemplate>  
  38.                     <ItemTemplate>  
  39.                         <asp:Label ID="Label3" runat="server" Text='<%# Bind("city") %>'></asp:Label>  
  40.                     </ItemTemplate>  
  41.                 </asp:TemplateField>  
  42.                 <asp:TemplateField HeaderText="Select Data">  
  43.                     <EditItemTemplate>  
  44.                         <asp:CheckBox ID="CheckBox1" runat="server" />  
  45.                     </EditItemTemplate>  
  46.                     <ItemTemplate>  
  47.                         <asp:CheckBox ID="CheckBox1" runat="server" />  
  48.                     </ItemTemplate>  
  49.                 </asp:TemplateField>  
  50.             </Columns>  
  51.             <FooterStyle BackColor="#CCCC99" />  
  52.             <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />  
  53.             <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />  
  54.             <RowStyle BackColor="#F7F7DE" />  
  55.             <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />  
  56.             <SortedAscendingCellStyle BackColor="#FBFBF2" />  
  57.             <SortedAscendingHeaderStyle BackColor="#848384" />  
  58.             <SortedDescendingCellStyle BackColor="#EAEAD3" />  
  59.             <SortedDescendingHeaderStyle BackColor="#575357" />  
  60.         </asp:GridView>  
  61.       
  62.         <br />  
  63.       
  64.     </div>  
  65.     <asp:Button ID="Button1" runat="server" onclick="Button1_Click"   
  66.         Text="Save to Database" />  
  67.     </form>  
  68. </body>  
  69. </html>  

Your design will look like this:

Design

Code chamber

Step 5 

Open your gridview_demo.aspx.cs and write some code so that the application works.

Gridview_demo.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9.   
  10. public partial class _Default : System.Web.UI.Page  
  11. {  
  12.   
  13.     SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  14.     protected void Page_Load(object sender, EventArgs e)  
  15.     {  
  16.         if (!Page.IsPostBack)  
  17.         {  
  18.             refreshdata();  
  19.         }  
  20.     }  
  21.   
  22.   
  23.     public void refreshdata()  
  24.     {  
  25.   
  26.           
  27.         SqlCommand cmd = new SqlCommand("select * from tbl_data", con);  
  28.         SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  29.         DataTable dt = new DataTable();  
  30.         sda.Fill(dt);  
  31.         GridView1.DataSource = dt;  
  32.         GridView1.DataBind();  
  33.       
  34.       
  35.     }  
  36.     protected void Button1_Click(object sender, EventArgs e)  
  37.     {  
  38.         foreach (GridViewRow gvrow in GridView1.Rows)  
  39.         {  
  40.             var checkbox = gvrow.FindControl("CheckBox1"as CheckBox;  
  41.             if (checkbox.Checked)  
  42.             {  
  43.                 var lblID = gvrow.FindControl("Label1"as Label;  
  44.                 var lblName = gvrow.FindControl("Label2"as Label;  
  45.                 var lblCity = gvrow.FindControl("Label3"as Label;  
  46.   
  47.   
  48.                 SqlCommand cmd = new SqlCommand("insert into tbl_save (id,name,city) values (@id,@name,@city)", con);  
  49.                 cmd.Parameters.AddWithValue("id", lblID.Text);  
  50.                 cmd.Parameters.AddWithValue("name", lblName.Text);  
  51.                 cmd.Parameters.AddWithValue("city", lblCity.Text);  
  52.   
  53.                 con.Open();  
  54.                 int i = cmd.ExecuteNonQuery();  
  55.                 con.Close();  
  56.                 refreshdata();  
  57.   
  58.             }  
  59.               
  60.         }  
  61.     }  
  62. }  
Output chamber

Output

After clicking the button, just check your tbl_save table. You will get your selected data saved to the database.

save table

You can use multiple selections and saved to the database, I think this is much more flexible than SQLbulk functions.

I hope you like it. Thank you for reading. Have a good day.