How to Bind a Dictionary to DropDownList

The Microsoft .Net framework provides many software tools that enable you to quickly and easily build windowed applications and web sites. For example, you can create a web site with a drop down list just by dragging it onto your web form in Visual Studio. You don’t need any programming skill to create a nice looking web site. However, if you want to perform something more complicated, like binding a data container (e.g. a dictionary) to a drop down list, you need to write a little bit of code.

Things You'll Need

• Windows PC with Visual Studio 2010 Integrated Development Environment (IDE) Installed

Instructions

1. Click the Visual Studio 2010 icon to launch the software. Once the home page loads, click the button labeled “New Project.” A window opens. Click on “C#” from the left-hand column and click on “ASP.NET Web Site” from the right-hand column. Enter a name for the project and press the “OK” button to create the project. A source code file appears in the main text editor window.

2. Click on the tab labeled “Design” that sits right below the main text editor window to switch to visual design mode. The page already has some basic text on it, including a heading that states “Welcome to ASP.NET!”

3. Click the panel marked “Toolbar” that sits to the right of the main editor window. This toolbar lists all of the graphical user interface components compatible with the web site. Locate the “DropDownList” component.

4. Click and drag “DropDownList” onto your web site. Place it anywhere you like.

5. Click on the item labeled “Default.aspx” in the “Solution Explorer” panel, which is to the left of the text editor window. This item will expand and reveal two source code files: Default.aspx.cs and Default.aspx.designer.cs.

6. Double-click on the file “Default.aspx.cs” to open this file for editing. It appears in the main text editor window. This file is a C# file and controls the behavior of the web page.

7. Locate the function listed below. It is the only function in the source code file, so it won’t be hard to spot. All of the source code from the following steps must go in-between the curly brackets of this function.

   protected void Page_Load(object sender, EventArgs e)
   {
   }

8. Create a new Dictionary data container. A Dictionary holds pairs of data, a key and a value. It is like a real dictionary where the word you are looking up is the key and the word definition is the value.

   Dictionary<String, String> d = new Dictionary<string, string>();

9. Add an item to the dictionary like this:

   d.Add("President", "John Doe");

10. Add additional items to the dictionary by repeating the previous step.

11. Create an “if” statement that determines whether or not the page has already been loaded or not. This is important because you only need to add items to the “DropDownList” once. An “if” statement that accomplishes this looks like this:

    if (!Page.IsPostBack)
    {
    }

12. Set the data source of the “DropDownList” by placing the following lines of code in-between the curly brackets of the “if” statement:

    DropDownList1.DataSource = d;
    DropDownList1.DataTextField = "Value";
    DropDownList1.DataValueField = "Key";
    DropDownList1.DataBind();

13. Execute the program by pressing the green “Play” button located at the top of the Visual Studio IDE. The default web browser for your system loads your web site. The web site appears much as it did in the visual editor.

14. Click on the “DropDownList” and a menu will expand. This menu displays all of the items you added to the dictionary.

References

• Microsoft MSND: DropDownList Class
• Microsoft MSND: Page.IsPostBack Property