Binding ASP.NET DropDownList to Array, Dictionary and Enum

DrABELL

Rate me:

4.90/5 (13 votes)

2 Jul 2015CPOL1 min read

110K

DropDownList Data Binding to Array (1D/2D), Enum and Dictionary objects in .NET

Data Binding is the process that establishes a connection between the application UI and business logic. This article describes the dynamic Data Binding of DropDownList (using C# code-behind) to various data structures available in .NET Framework, namely: 1d- and 2d-Array, Enum and Dictionary object.

Data Binding could be done in two alternative ways: by using either iterative technique, i.e. looping through the data structure object and adding items to the DropDownList, or by using the DataSource/DataBind() property/method of the DropDownList. The following code snippets written in C#/ASP.NET implement both techniques, pertinent to data structures mentioned above (for demo purposes encapsulated in Default.aspx file with corresponding code-behind Default.aspx.cs file).

Listing 1. Default.aspx

HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <title>Binding DropDownList | ASP.NET</title>
</head>
<body>
    <form id="form1"  runat="server">
    <div>
        <asp:DropDownList ID="ddl2DictionaryDataBind" runat="server" />
        <asp:DropDownList ID="ddl2DictionaryBindValues" runat="server" />
        <asp:DropDownList ID="ddl2DictionaryLoop" runat="server" />
        <asp:DropDownList ID="ddl2EnumBindValues" runat="server" />
        <asp:DropDownList ID="ddl2EnumLoop" runat="server" />
        <asp:DropDownList ID="ddl2Array" runat="server" />
        <asp:DropDownList ID="ddl2Array2d" runat="server" />
    </div>
    </form>
</body>
</html>

Listing 2. Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using System.Data;
using System.Linq; // this is only needed for Method 1b

public partial class _Default : System.Web.UI.Page
{
    // sample 1d array containing string items: countries in North America
    string[] arrCountries = { "United States of America", "Canada", "Mexico" };
 
    // sample 2d array containing string items: countries in North America and corresponding Country codes (ISO 3166)
    string[,] arrCountries2d = { {"United States of America", "US"}, {"Canada", "CA"}, {"Mexico", "MX"} };
 
    // sample enum containing Country codes in North America
    // with numeric representation (ISO 3166)
    enum enumCountries { US=840, CA=124, MX=484 };
    
    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack)  {
            // create sample dictionary object: country list in North America
            Dictionary<string,> dictCountries = new Dictionary<string,>();
            dictCountries.Add("US", "United States of America");
            dictCountries.Add("CA", "Canada");
            dictCountries.Add("MX", "Mexico");
 
            // Method 1a: Data Binding DropDownList to Dictionary using DataSource and DataBind()
            ddl2DictionaryDataBind.DataSource = dictCountries;
            ddl2DictionaryDataBind.DataTextField = "Value";
            ddl2DictionaryDataBind.DataValueField = "Key";
            ddl2DictionaryDataBind.DataBind();
            ddl2DictionaryDataBind.ToolTip = "Data Bind to Dictionary using Value/Key";
            
            // Method 1b. Data Binding DropDownList to Dictionary (either Keys or Values)
            // using DataSource property of the DropDownList object. This method will
            // render the <select> HTML element with option values and inner HTML
            // both corresponding to Dictionary Values (it could be bound to Keys instead)
            // note: this method requires System.Linq reference
            ddl2DictionaryBindValues.DataSource = dictCountries.Values.ToArray();
            ddl2DictionaryBindValues.DataBind();
            ddl2DictionaryBindValues.ToolTip = "Data Bind to Dictionary using only Values";
            
            // Method 1c. Data Binding DropDownList to Dictionary using iterations:
            // looping through the dictionary items and adding them to the DropDownList
            // this method will render the <select> HTML element with option values 
            // corresponding to Dictionary Keys and inner HTML corresponding to Values
            // note: if Dictionary contains data types other than String (for example, Dictionary<int,>)
            // then add the ToString() conversion to that data type
            ddl2DictionaryLoop.ToolTip = "Bind to Dictionary (Key/Values) using iteration";
            foreach (KeyValuePair<string,> _dictItem in dictCountries)
            {
                ddl2DictionaryLoop.Items.Add(new ListItem(_dictItem.Value, _dictItem.Key));
            }
 
            // Method 2a. Data Binding DropDownList to Enum using DataSource/DataBind()
            ddl2EnumBindValues.ToolTip = "Data Bind to Enum, Values only";
            ddl2EnumBindValues.DataSource = Enum.GetNames(typeof(enumCountries));
            ddl2EnumBindValues.DataBind();
 
            // Method 2b. Data Binding DropDownList to Enum, alternative method using iteration
            ddl2EnumLoop.ToolTip = "Bind to Enum (Key/Values) using iteration";
            foreach (enumCountries co in Enum.GetValues(typeof(enumCountries)))
            {
                string _val = co.ToString();
                string _key = ((Int32)Enum.Parse(typeof(enumCountries), _val)).ToString();
                ddl2EnumLoop.Items.Add(new ListItem(_val, _key));
            }
    
            // Method 3a. Data Binding DropDownList to 1D-array of strings (countries in North America)
            ddl2Array.ToolTip = "Data Bind to 1d array";
            ddl2Array.DataSource = arrCountries;
            ddl2Array.DataBind();
 
            // Method 3b. Data Binding DropDownList to 2D-array of strings (countries in North America)
            ddl2Array2d.ToolTip = "Bind to 2d array";
            for (int i = 0; i < arrCountries2d.GetLength(0); i++)
            {
                ddl2Array2d.Items.Add(new ListItem(arrCountries2d[i, 0], arrCountries2d[i, 1]));
            }
        }
    }
}
// ************************************************************************************************

Binding DropDown List to Enum

The coding technique of binding ASP.NET DropDownList control to Enum is demonstrates in the following code snippet:

Listing 3: Binding ASP.NET DropDownList control to Enum

            // Data Binding DropDownList to Enum using DataSource/DataBind()
            ddl2EnumBindValues.ToolTip = "Data Bind to Enum, Values only";
            ddl2EnumBindValues.DataSource = Enum.GetNames(typeof(enumCountries));
            ddl2EnumBindValues.DataBind();
 
            // Data Binding DropDownList to Enum, alternative method using iteration
            ddl2EnumLoop.ToolTip = "Bind to Enum (Key/Values) using iteration";
            foreach (enumCountries co in Enum.GetValues(typeof(enumCountries)))
            {
                string _val = co.ToString();
                string _key = ((Int32)Enum.Parse(typeof(enumCountries), _val)).ToString();
                ddl2EnumLoop.Items.Add(new ListItem(_val, _key));
            }

Binding DropDown List to Dictionary object

The coding technique of binding ASP.NET DropDownList control to 1d-and 2d-arrays is demonstrates in the following code snippet:

Listing 4: Binding ASP.NET DropDownList control to Dictionary

// Data Binding DropDownList to Dictionary using DataSource and DataBind()
ddl2DictionaryDataBind.DataSource = dictCountries;
ddl2DictionaryDataBind.DataTextField = "Value";
ddl2DictionaryDataBind.DataValueField = "Key";
ddl2DictionaryDataBind.DataBind();
ddl2DictionaryDataBind.ToolTip = "Data Bind to Dictionary using Value/Key";

// Data Binding DropDownList to Dictionary (either Keys or Values)
// using DataSource property of the DropDownList object. This method will
// render the <select> HTML element with option values and inner HTML
// both corresponding to Dictionary Values (it could be bound to Keys instead)
// note: this method requires System.Linq reference
ddl2DictionaryBindValues.DataSource = dictCountries.Values.ToArray();
ddl2DictionaryBindValues.DataBind();
ddl2DictionaryBindValues.ToolTip = "Data Bind to Dictionary using only Values";

// Data Binding DropDownList to Dictionary using iterations:
// looping through the dictionary items and adding them to the DropDownList
// this method will render the <select> HTML element with option values
// corresponding to Dictionary Keys and inner HTML corresponding to Values
// note: if Dictionary contains data types other than String (for example, Dictionary<int,>)
// then add the ToString() conversion to that data type
ddl2DictionaryLoop.ToolTip = "Bind to Dictionary (Key/Values) using iteration";
foreach (KeyValuePair<string,> _dictItem in dictCountries)
{
    ddl2DictionaryLoop.Items.Add(new ListItem(_dictItem.Value, _dictItem.Key));
}

Binding DropDown List to Arrays

The coding technique of binding ASP.NET DropDownList control to 1d-and 2d-arrays is demonstrates in the following code snippet:

Listing 5: Binding ASP.NET DropDownList control to 1d-and 2d-arrays

            // Data Binding DropDownList to 1D-array of strings (countries in North America)
            ddl2Array.ToolTip = "Data Bind to 1d array";
            ddl2Array.DataSource = arrCountries;
            ddl2Array.DataBind();
 
            // Data Binding DropDownList to 2D-array of strings (countries in North America)
            ddl2Array2d.ToolTip = "Bind to 2d array";
            for (int i = 0; i < arrCountries2d.GetLength(0); i++)
            {
                ddl2Array2d.Items.Add(new ListItem(arrCountries2d[i, 0], arrCountries2d[i, 1]));
            }

Points of Interest

In addition to Data Binding, styling of DropDownList control rendered as HTML5 Select element via CSS3 is detailed in [1].

References

Advanced CSS3 Styling of HTML5 SELECT Element

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

DrABELL

Engineer

United States

Dr. Alexander Bell (aka DrABell), a seasoned full-stack Software (Win/Web/Mobile) and Data Engineer holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles and developed multiple award-winning apps (App Innovation Contests AIC 2012/2013 submissions) Alexander is currently focused on Microsoft Azure Cloud and .NET 6/8 development projects.