Bind Data To DropDownList in ASP.NET C#

This article shows how to bind a Dropdown in ASP.Net C#. In this tutorial I'll show you how data is bound to a dropdown list in ASP.Net using C#.

INITIAL CHAMBER

Step 1

Open VS10, make an empty website and give it the name "DropDownList".

Step 2

You will see your empty website in Solution Explorer that may be in the right hand side of VS10. Right-click on that website and select “Add New Item". A new window will open, from that you must select "web form" and give the "Dropdownlist.aspx".

In ASP.Net we use .aspx files for design purposes, we also make a short design for our project but at a later time. You will see in the Solution Explorer two files "dropdownlist.aspx" and "dropdownlist.aspx.cs". For now assume that the ".aspx page" is for design purposes (front end, for advanced people) and the ".cs page" is used for coding purposes (back end, for advanced people).

Step 3

Again go to Add New Item and select SQL Server Database then press OK. In the prompt you will be asked "Do you want to add your database into the "App_Data Folder" or not ?" Better say "YES", the reason behind yes is, If you had chosen "No" than your database will be out of security and it can easily be hacked by SQL Injection attacks but suppose your database is inside some sort of Security like VS10 has in the form of the folder "APP_DATA" folder then it will be very hard for attackers to get to your database.

Step 4

Open your Server Explorer (if anyhow vs10 is not showing you the Server Explorer then in the View menu select Server Explorer, that will show your Servers). To make it simple, press "CTRL+ALT+S". Here you go, can you see it? Tell me in the comments, I'll be waiting.

DATABASE CHAMBER

Step 5

In Server Explorer, you will see your database ("Database.mdf") file that you had just added. Click on your database, you will see many options (like tables, Stored Procedures and many more). For now add a table to your database by going to Table then right-click and select Add new table.

Make it like this and  make it "IS IDENTITY= "TRUE" in the bottom part as shown in the below image :

 

DESIGN CHAMBER

Step 6

Open your Dropdownlist.aspx page for designing your application. Try to make it like the following.

Here is your code to add a dropdown from the Toolbar:



Here is your design:

CODING CHAMBER

Step 7

Now to get into the code. Open your ”Dropdownlist.aspx.cs“ page and add the following namespaces:



Here is the code for binding the dropdownlist :

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     if (!Page.IsPostBack)  
  4.     {  
  5.         SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  6.         SqlCommand cmd = new SqlCommand("select * from tbl_media", con);  
  7.         SqlDataAdapter sda = new SqlDataAdapter(cmd);   
  8.         DataTable dt = new DataTable();  
  9.         sda.Fill(dt);  
  10.         DropDownList1.DataSource = dt;  
  11.         DropDownList1.DataBind();  
  12.          
  13.     }  
  14. }  
You can get your Connection String by going to the database (In Server Explorer right-click on you database then select"Properties". You will then see “Connection String” there. Copy it and paste it into the SQL connection field. Yeah! Surely your connection string is quite different from mine, initially it look like this:

Before
  1. "Data Source=.\SQLEXPRESS;AttachDbFilename="C:\Users\Nilesh\Documents\Visual Studio 2010\WebSites\WebSite13\App_Data\Database.mdf";Integrated Security=True;User Instance=True"  
You need to remove the path and make it short like:

C:\Users\Nilesh\Documents\Visual Studio 2010\WebSites\WebSite13\App_Data -- > Remove this

And add  this "|DataDirectory|".

After
  1. @"DataSource=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True"  
OUTPUT CHAMBER



Thank you for reading! I hope you like it. I am trying to pull up more articles sooner. Stay tuned to comments and the likes. Have a happy day!