The main purpose of a database is to store data that can be retrieved at any given time. What better way to select the data to be retrieved than a drop down list? In this tutorial, we will bind a DropDownList control to a sample database and make it display related information of the selected field.

Setup

If you have not already done so, open Visual Studio up and save a new web project.

The Concept

We will create a database and connect a dropdown list to it in order to display the names of people and upon the click of the button, we will display the name chosen as well as what city they are from in a string format. Let’s get to work!

Step one

First we will need to create the database. Make a simple database that has personID, name, and city and at least 5 people populating it. Keep in mind that personID is the primary key and should be set to identity incrementing by 1.

Your sample database should appear as like the image below unless you are creating your own.

Step Two

Switch over to your default.aspx page where we will be creating our user interface. Drag and drop a SqlDataSource, DropDownList, Button and a label onto the screen and place them in a nice table. Configure the SqlDataSource to the database and select all columns to be included. Configure the DropDownList control to the SqlDataSource and click finish.

Here we have the code we have developed for the tutorial. Note: the ID names and some values may differ in your project, unless you are using the source code files.

Save and switch to design view. You should now see a neat table with the necessary control for our user interface. Now to make it work!

Step Three

Double click on the button in the table to go to the code behind. Here we will need to make sure that whatever is selected from the dropdown list is placed as the label output along with what city they are from. Copy and paste the following code into the code behind. If you are doing your own project, the following code shows the logic used for the functions.

We add the System.Data.SqlClient namespace to have the connection to our database. In our Page_Load method, we have Label1’s text set to instructions for the user. We then have our button OnClick event method that has the changes needed for the label.

Upon clicking the button, the label is to present the name of the person selected and the city they live in. By calling the SelectedItem property we get the actual item being displayed in the dropdown list, which is set on our default.aspx page to have DataTextField with the name field from the database. Upon calling the SelectedValue property of the DropDownList we call the actual value applied to the name or selection, which on our default.aspx page has the DataValueField set to the city field from the database.

If you were to switch them around and have the text field set to city and the value field set to name, you will find that your string applied to the label is backwards. The key to the two always matching up is the personID, since we have the data source grabbing all items from the database we can rely on the individuals personID to lead to the necessary information from that particular row, which in this case was city.

The final product should appear something like the image below:

Few Last Words

Learning how to control and manipulate databases is easy with ASP.NET and we intend to be there every step of the way to help! Thank you for being a valued reader and join us next time for additional database tutorials!

Download Source Files