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" %>
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  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>
  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">
  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>
  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;
  10. public partial class _Default : System.Web.UI.Page
  11. {
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  15. }
  16. protected void Button1_Click(object sender, EventArgs e)
  17. {
  18. if (this.TextBox1.Text != null)
  19. {
  21. ListBox1.Items.Add(this.TextBox1.Text);
  22. Button2.Visible = true;
  23. }
  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();
  35. if (i!=0)
  36. {
  37. lbmsg.Text = "Your Data have been saved to Database";
  38. lbmsg.ForeColor = System.Drawing.Color.ForestGreen;
  39. }
  42. }
  43. }
Output chamber

data move to listbox

Output

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