Move Textbox Data to ListBox and Save Into Database

Nilesh Jadav
10y
13.4k
0
0

Article

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 184px;
}
.style2
{
width: 169px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<table style="width:100%;">
<tr>
<td class="style1">
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
<asp:TextBox ID="TextBox1" runat="server" BorderColor="#9933FF"
BorderStyle="Solid"></asp:TextBox>
</td>
<td class="style2">
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Move to ListBox" />
</td>
<td>
<asp:ListBox ID="ListBox1" runat="server" Width="200px" BackColor="#CCCCFF"
ForeColor="#0033CC"></asp:ListBox>
</td>
</tr>
<tr>
<td class="style1">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1" ForeColor="Red" runat="server" ErrorMessage="Please Provide some text to textbox"></asp:RequiredFieldValidator>
</td>
<td class="style2">
<asp:Label ID="lbmsg" runat="server"></asp:Label>
</td>
<td>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click"
Text="Save to Database" Visible="False" />
</td>
</tr>
</table>
</div>
</form>
</body>
</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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
if (this.TextBox1.Text != null)
{
ListBox1.Items.Add(this.TextBox1.Text);
Button2.Visible = true;
}
}
protected void Button2_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
SqlCommand cmd = new SqlCommand("insert into tbl_data (data) values (@data)", con);
cmd.Parameters.AddWithValue("data", ListBox1.Text);
con.Open();
int i = cmd.ExecuteNonQuery();
con.Close();
if (i!=0)
{
lbmsg.Text = "Your Data have been saved to Database";
lbmsg.ForeColor = System.Drawing.Color.ForestGreen;
}
}
}

Output chamber

data move to listbox

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