Post
Ask Question

Move Textbox Values to GridView in ASP.Net

This article shows how to move textbox values to a GridView at run time using ASP.NET C#.

We are using two Textboxes, a button and a GridView, so when we fill the Textbox and hit the button the values are saved in the GridView.

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

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 IS Identity -- True)


table

Design chamber

Step 4

Open your gridview_demo.aspx file, where we create our design.

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.     <style type="text/css">  
  9.         .style1  
  10.         {  
  11.             width: 550px;  
  12.         }  
  13.         .style2  
  14.         {  
  15.             font-size: large;  
  16.             text-decoration: underline;  
  17.             color: #990000;  
  18.         }  
  19.     </style>  
  20. </head>  
  21. <body>  
  22.     <form id="form1" runat="server">  
  23.     <div class="style2">  
  24.       
  25.         <strong>Move Data of Textbox to Gridview</strong></div>  
  26.     <table style="width:100%;">  
  27.         <tr>  
  28.             <td>  
  29.                 Name:</td>  
  30.             <td class="style1">  
  31.       
  32.         <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>  
  33.       
  34.             </td>  
  35.             <td>  
  36.                  </td>  
  37.         </tr>  
  38.         <tr>  
  39.             <td>  
  40.                 City:</td>  
  41.             <td class="style1">  
  42.     <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>  
  43.             </td>  
  44.             <td>  
  45.                  </td>  
  46.         </tr>  
  47.         <tr>  
  48.             <td>  
  49.                  </td>  
  50.             <td class="style1">  
  51.     <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Save to Gridview</asp:LinkButton>  
  52.             </td>  
  53.             <td>  
  54.                  </td>  
  55.         </tr>  
  56.     </table>  
  57.     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  58.         DataKeyNames="id" BackColor="LightGoldenrodYellow" BorderColor="Tan"   
  59.         BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">  
  60.         <AlternatingRowStyle BackColor="PaleGoldenrod" />  
  61.         <Columns>  
  62.             <asp:TemplateField HeaderText="Name">  
  63.                 <EditItemTemplate>  
  64.                     <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>  
  65.                 </EditItemTemplate>  
  66.                 <ItemTemplate>  
  67.                     <asp:Label ID="Label1" runat="server" Text='<%# Bind("name") %>'></asp:Label>  
  68.                 </ItemTemplate>  
  69.             </asp:TemplateField>  
  70.             <asp:TemplateField HeaderText="City">  
  71.                 <EditItemTemplate>  
  72.                     <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("city") %>'></asp:TextBox>  
  73.                 </EditItemTemplate>  
  74.                 <ItemTemplate>  
  75.                     <asp:Label ID="Label2" runat="server" Text='<%# Bind("city") %>'></asp:Label>  
  76.                 </ItemTemplate>  
  77.             </asp:TemplateField>  
  78.         </Columns>  
  79.         <FooterStyle BackColor="Tan" />  
  80.         <HeaderStyle BackColor="Tan" Font-Bold="True" />  
  81.         <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue"   
  82.             HorizontalAlign="Center" />  
  83.         <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />  
  84.         <SortedAscendingCellStyle BackColor="#FAFAE7" />  
  85.         <SortedAscendingHeaderStyle BackColor="#DAC09E" />  
  86.         <SortedDescendingCellStyle BackColor="#E1DB9C" />  
  87.         <SortedDescendingHeaderStyle BackColor="#C2A47B" />  
  88.     </asp:GridView>  
  89.     </form>  
  90. </body>  
  91. </html>  

Your design will look like the following:

design

Code chamber

Step 6

Open gridview_demo.aspx.cs and write some code so that our 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.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         if (!Page.IsPostBack)  
  15.         {  
  16.             refreshdata();  
  17.         }  
  18.     }  
  19.   
  20.     public void refreshdata()  
  21.     {  
  22.   
  23.   
  24.         SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  25.         SqlCommand cmd = new SqlCommand("select * from tbl_data", con);  
  26.         SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  27.         DataTable dt = new DataTable();  
  28.         sda.Fill(dt);  
  29.         GridView1.DataSource = dt;  
  30.         GridView1.DataBind();  
  31.       
  32.       
  33.     }  
  34.     protected void LinkButton1_Click(object sender, EventArgs e)  
  35.     {  
  36.   
  37.         SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  38.         SqlCommand cmd = new SqlCommand("sp_insert", con);  
  39.         cmd.CommandType = CommandType.StoredProcedure;  
  40.         cmd.Parameters.AddWithValue("name", TextBox3.Text);  
  41.         cmd.Parameters.AddWithValue("city", TextBox4.Text);  
  42.         con.Open();  
  43.         int i = cmd.ExecuteNonQuery();  
  44.         con.Close();  
  45.         refreshdata();  
  46.   
  47.     }  
  48. }  
Output chamber

Output

Enter detail

move data

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


Similar Articles