Binding ASP.NET DropDownList to Array, Dictionary and Enum

DrABELL

4.90/5 (13 votes)

2 Jul 2015CPOL1 min read

110.7K

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)