Populating a DropDown List with a Database in VB.NET
SetupIf 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.
<asp:sqldatasource id="SqlDataSource1" runat="server" connectionstring="<%$ ConnectionStrings:ConnectionString %>"
selectcommand="SELECT * FROM [tblOne]"></asp:sqldatasource>
<fieldset style="width: 804px" align="center">
<legend>Populating DropDownList with data from Database</legend>
<div align="left" style="text-align: center">
<form id="form2" 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>
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.
Partial Public Class _Default
Private conn As New SqlConnection("Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True")
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Label1.Text = "Select a person to know what city they are located in..."
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
Label1.Text = DropDownList1.SelectedItem + " lives in " + DropDownList1.SelectedValue
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 call 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, 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!