Post
Ask Question

Save Selected Data of DropDownList to Database in ASP.Net Using C#

We are using a dropdown list and a button. I will embed some data into the drop down, so when the user selects any data from the dropdown and clicks on the button it is saved to the database.

INITIAL CHAMBER

Step 1
 
Open Visual Studio 2010 and create an empty website, name it dropdownlist_demo.

Step 2
 
In Solution Explorer you will get your empty website, add a web form and SQL Database. Use the following procedure.

For Web Form

dropdownlist_demo (your empty website), right-click and select Add New Item, Web Form. Name it dropdownlist_demo.aspx page.

For SQL Server Database

dropdownlist_demo (your empty website), right-click and select Add New Item, SQL Server Database. Add the database inside the App_Data_folder.

Add some data into the dropdown list, I had inserted some city names, you can take anything by going to the dropdown list. Edit Items and a new window will open where you need to add the data. Now ADD Text Field = (”City Name”) add 5-6 cities in the similar manner.

DATABASE CHAMBER

Step 3
 
In Server Explorer click on your database (Database.mdf) and select Tables to add a new table. Make the table like the following:

Table: tbl_data


Figure 1: Data Table

DESIGN CHAMBER

Step 4
 
Open your dropdownlist_demo.aspx file from Solution Explorer and start designing your application.

Dropdownlist_demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <style type="text/css">  
  8. .style1  
  9. {  
  10. width: 298px;  
  11. }  
  12. .style2  
  13. {  
  14. text-decoration: underline;  
  15. text-align: left;  
  16. font-size: x-large;  
  17. }  
  18. .style3  
  19. {  
  20. font-size: xx-large;  
  21. text-decoration: underline;  
  22. }  
  23. .style4  
  24. {  
  25. text-align: left;  
  26. }  
  27. </style>  
  28.     </head>  
  29.     <body>  
  30.         <form id="form1" runat="server">  
  31.             <div class="style4">  
  32.                 <br />  
  33.                 <br />  
  34.                 <strong>  
  35.                     <span class="style3">Save Selected Data of DropDownList to Database</span>  
  36.                 </strong>  
  37.                 <br />  
  38.                 <br />  
  39.             </div>  
  40.             <table style="width:100%;">  
  41.                 <tr>  
  42.                     <td class="style1">  
  43.  </td>  
  44.                     <td class="style2"></td>  
  45.                     <td>  
  46.  </td>  
  47.                 </tr>  
  48.                 <tr>  
  49.                     <td class="style1">  
  50.  </td>  
  51.                     <td>  
  52.  </td>  
  53.                     <td>  
  54.  </td>  
  55.                 </tr>  
  56.                 <tr>  
  57.                     <td class="style1">  
  58.  </td>  
  59.                     <td>  
  60.                         <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"   
  61. DataTextField="city" DataValueField="city" BackColor="#FFCCCC" Height="32px"   
  62. style="text-align: center" Width="145px">  
  63.                             <asp:ListItem Value="0">-- Select your City--</asp:ListItem>  
  64.                             <asp:ListItem>Rajkot</asp:ListItem>  
  65.                             <asp:ListItem>Ahmedabad</asp:ListItem>  
  66.                             <asp:ListItem>Bhuj</asp:ListItem>  
  67.                             <asp:ListItem>Surat</asp:ListItem>  
  68.                             <asp:ListItem>Delhi</asp:ListItem>  
  69.                         </asp:DropDownList>  
  70.                     </td>  
  71.                     <td>  
  72.  </td>  
  73.                 </tr>  
  74.                 <tr>  
  75.                     <td class="style1">  
  76.  </td>  
  77.                     <td>  
  78.  </td>  
  79.                     <td>  
  80.  </td>  
  81.                 </tr>  
  82.                 <tr>  
  83.                     <td class="style1">  
  84.  </td>  
  85.                     <td>  
  86.                         <asp:Button ID="Button1" runat="server" onclick="Button1_Click"   
  87. Text="Save to Database" />  
  88.                     </td>  
  89.                     <td>  
  90.                         <asp:Label ID="lbmsg" runat="server"></asp:Label>  
  91.                     </td>  
  92.                 </tr>  
  93.             </table>  
  94.         </form>  
  95.     </body>  
  96. </html>

Your design look will look like the following:


Figure 2: Design

CODE CHAMBER

Step 5

Open your dropdownlist.aspx.cs file to write the code, for making the application like we assumed.

  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. public partial class _Default: System.Web.UI.Page   
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)   
  12.     {  
  13.         //if (!Page.IsPostBack)  
  14.         //{  
  15.         // DropDownList1.DataSource = DropDownList1.SelectedItem.Value;  
  16.         // DropDownList1.DataBind();  
  17.         //}  
  18.     }  
  19.     protected void Button1_Click(object sender, EventArgs e)   
  20.     {  
  21.         SqlConnection con = new SqlConnection(@  
  22.         "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  23.         SqlCommand cmd = new SqlCommand("insert into tbl_data (city) values (@city)", con);  
  24.         cmd.Parameters.AddWithValue("city", DropDownList1.SelectedItem.Value);  
  25.         con.Open();  
  26.         int i = cmd.ExecuteNonQuery();  
  27.         con.Close();  
  28.         if (i != 0) {  
  29.             lbmsg.Text = " Your data is been saved in the database";  
  30.             lbmsg.ForeColor = System.Drawing.Color.ForestGreen;  
  31.   
  32.         } else {  
  33.             lbmsg.Text = "Something went wrong with selection";  
  34.             lbmsg.ForeColor = System.Drawing.Color.Red;  
  35.   
  36.         }  
  37.     }  
  38. }  
OUTPUT CHAMBER


Figure 3: Output 1


Figure 4: Output 2

Check out the database from tbl_data and the table data shown.


Figure 5: Database Output

I hope you liked this. Thanks for reading. Have a good day!


Similar Articles