Move Textbox Data to ListBox and Save Into Database

In this article I’ll show you how to move the text of a textbox to a ListBox and save it to a database in ASP.NET using C#.

We took one TextBox and ListBox and on a button click it will move it to the ListBox and on another button click it will be saved to the database.

Initial chamber

Step 1

Open your Visual Studio 2010 and create an Empty Website, provide a suitable name (textListBox_demo).

Step 2

In Solution Explorer you get your empty website, then add two web forms and a SQL Server Database as in the following.

For Web Form:

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

For SQL Server Database

textListBox_demo (your empty website) then right-click then select Add New Item -> SQL Server Database. (Add a 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.

Table tbl_data (Don't Forget to make ID as IS Identity -- True)


table

Design chamber

Step 4

Now open your textListBox_demo.aspx file, where we create our design for GridView sorting.

TextListBox_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  4.   
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9.     <title></title>  
  10.     <style type="text/css">  
  11.         .style1  
  12.         {  
  13.             width: 184px;  
  14.         }  
  15.         .style2  
  16.         {  
  17.             width: 169px;  
  18.         }  
  19.     </style>  
  20. </head>  
  21. <body>  
  22.     <form id="form1" runat="server">  
  23.     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  24.     </asp:ToolkitScriptManager>  
  25.     <div>  
  26.       
  27.         <table style="width:100%;">  
  28.             <tr>  
  29.                 <td class="style1">  
  30.                      </td>  
  31.                 <td class="style2">  
  32.                      </td>  
  33.                 <td>  
  34.                      </td>  
  35.             </tr>  
  36.             <tr>  
  37.                 <td class="style1">  
  38.                     <asp:TextBox ID="TextBox1" runat="server" BorderColor="#9933FF"   
  39.                         BorderStyle="Solid"></asp:TextBox>  
  40.                 </td>  
  41.                 <td class="style2">  
  42.                     <asp:Button ID="Button1" runat="server" onclick="Button1_Click"   
  43.                         Text="Move to ListBox" />  
  44.                 </td>  
  45.                 <td>  
  46.                     <asp:ListBox ID="ListBox1" runat="server" Width="200px" BackColor="#CCCCFF"   
  47.                         ForeColor="#0033CC"></asp:ListBox>  
  48.                 </td>  
  49.             </tr>  
  50.             <tr>              
  51.                 <td class="style1">  
  52.                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1" ForeColor="Red" runat="server" ErrorMessage="Please Provide some text to textbox"></asp:RequiredFieldValidator>  
  53.                     </td>  
  54.                 <td class="style2">  
  55.   
  56.                     <asp:Label ID="lbmsg" runat="server"></asp:Label>  
  57.                 </td>  
  58.                 <td>  
  59.                     <asp:Button ID="Button2" runat="server" onclick="Button2_Click"   
  60.                         Text="Save to Database" Visible="False" />  
  61.                 </td>  
  62.             </tr>  
  63.         </table>  
  64.       
  65.     </div>  
  66.     </form>  
  67. </body>  
  68. </html>  
Your design looks like this:

design
Code chamber

Step 5

Open your textListBox_demo.aspx.cs and write some code so that our application works.

textlistobx_demo.aspx.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.   
  15.     }  
  16.     protected void Button1_Click(object sender, EventArgs e)  
  17.     {  
  18.         if (this.TextBox1.Text != null)  
  19.         {  
  20.               
  21.             ListBox1.Items.Add(this.TextBox1.Text);  
  22.             Button2.Visible = true;  
  23.         }  
  24.   
  25.     }  
  26.     protected void Button2_Click(object sender, EventArgs e)  
  27.     {  
  28.         SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  29.         SqlCommand cmd = new SqlCommand("insert into tbl_data (data) values (@data)", con);  
  30.         cmd.Parameters.AddWithValue("data", ListBox1.Text);  
  31.         con.Open();  
  32.         int i = cmd.ExecuteNonQuery();  
  33.         con.Close();  
  34.   
  35.     if (i!=0)  
  36.         {  
  37.             lbmsg.Text = "Your Data have been saved to Database";  
  38.             lbmsg.ForeColor = System.Drawing.Color.ForestGreen;  
  39.         }  
  40.   
  41.   
  42.     }  
  43. }  
Output chamber

data move to listbox

Output

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