The main purpose of a database is to store data, that is to 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 in Visual Basic.

Setup

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.

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. 
Code Block
Ask a Question
Download Source
Default.aspx
<asp:sqldatasource id="SqlDataSource1" runat="server" connectionstring="<%$ ConnectionStrings:ConnectionString %>"
    selectcommand="SELECT * FROM [tblOne]"></asp:sqldatasource>
<br />
<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">
        <div align="center">
            <table>
                <tr>
                    <th>
                        Name:
                    </th>
                    <td>
                        <asp:dropdownlist id="DropDownList1" runat="server" datasourceid="SqlDataSource1"
                            datatextfield="name" datavaluefield="city">
</asp:dropdownlist>
                    </td>
                    <td>
                        <asp:button id="Button1" runat="server" onclick="Button1_Click" text="Button" />
                    </td>
                </tr>
                <tr>
                    <th>
                        Data:
                    </th>
                    <td>
                        <asp:label id="Label1" runat="server" text="Label"></asp:label>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </div>
</fieldset>
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.
Code Block
Ask a Question
Download Source
Default.aspx.vb
Imports System.Data.SqlClient
 
Partial Public Class _Default
Inherits System.Web.UI.Page
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..."
End Sub
 
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
 
Label1.Text = DropDownList1.SelectedItem + " lives in " + DropDownList1.SelectedValue
End Sub
End Class
 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 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! 

Populating_Dropdown_Source_2010VB.zip