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" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  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">
  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">
  32. <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
  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;
  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. }
  20. public void refreshdata()
  21. {
  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();
  33. }
  34. protected void LinkButton1_Click(object sender, EventArgs e)
  35. {
  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();
  47. }
  48. }
Output chamber

Output

Enter detail

move data

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