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.
If you have not already done so, open Visual Studio up and save a new web project.
We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
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!
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.
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.
<fieldset style="width: 804px" align="center">
<legend>Populating DropDownList with data from Database</legend>
<div align="left" style="text-align: center">
<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
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!
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.
public partial class _Default : System.Web.UI.Page
SqlConnection conn = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database.mdf;Integrated Security=True;User Instance=True");
protected void Page_Load(object sender, EventArgs e)
Label1.Text = "Select a person to know what city they are located in...";
protected void Button1_Click(object sender, EventArgs e)
Label1.Text = DropDownList1.SelectedItem + " lives in " + DropDownList1.SelectedValue;
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:
We migrated our web sites to Server Intellect
over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s
help, we were able to avoid any headaches!
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!