A DropDownList for U.S. States/Canadian Provinces and Countries

• Download source - 5 Kb

Introduction

My task was to create a simple DropDownList containing U.S. States and Canadian Provinces that could be reused easily. The requirements were that it should be entirely self-contained and should operate exactly like any other DropDownList.

For this reason, it made the most sense to subclass the DropDownList component, and load the ItemList within the overloaded OnInit event.

Contents

This package contains two controls, SDIddlStates and SDIddlCountries. This article contains code snippets from the SDIddlStates control. However, the SDIddlCountries control is almost identical, as you will see as soon as you look at it. In fact, you could easily combine the two and add a new parameter that the user could set at design-time to establish which type it is. That would be a very good exercise.

Using the code

To use the code, simply compile it. Then, within the Visual .NET IDE, choose the TOOLS | Add/Remove Toolbox Items... menu option and browse until you find the DLL that resulted from the compilation. You should them be able to drag-and-drop the control onto any Web Form you need it.

Points of Interest

Accessing the required Classes

The code requires the use of certain classes, so we must grab their definitions, like this:

using System;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

Subclassing the DropDownList

The next thing we need to do is begin the code by declaring the new class, which I call SDIddlStates, like this:

    public class SDIddlStates : DropDownList 
    {
    ...all of the code will go here...
    }

Overriding the OnInit Event

In order to preload the ItemList, which contains the Values and Text of the DropDownList control, I wrote the following code:

    protected override void OnInit(EventArgs e)
    {
        // Create the DataSource that contains the data

        this.DataSource = CreateDataSource();
        
        // Tell the control what column in the DataSource contains the Text

        this.DataTextField = "StatesTextField";

        // Tell the control what column in the DataSource contains the Value

        this.DataValueField = "StatesValueField";

        // Bind the DataSource to the control

        this.DataBind();

        // Do whatever the control usually does OnInit

        base.OnInit(e);
    }

Creating the DataSource

In order to create the DataSource that is used in the code, above, I wrote the following code:

    protected ICollection CreateDataSource() 
    {

        // Create a table to store data for the DropDownList control.

        DataTable dt = new DataTable();
        
        // The first column of the DataSource contains the Text

        dt.Columns.Add(new DataColumn("StatesTextField", typeof(String)));

        // The second column of the DataSource contains the Value

        dt.Columns.Add(new DataColumn("StatesValueField", typeof(String)));

        // Populate the table with rows.

        dt.Rows.Add(CreateRow("0", "Choose a State/Province", dt));
        dt.Rows.Add(CreateRow("AL", "Alabama", dt));
        dt.Rows.Add(CreateRow("AK", "Alaska", dt));
        ...
        dt.Rows.Add(CreateRow("SK", "Saskatchewan", dt));
        dt.Rows.Add(CreateRow("YT", "Yukon Territories", dt));

        // Create a DataView from the DataTable to act as the 

        // DataSource for the DropDownList control.

        DataView dv = new DataView(dt);
        return dv;
    }

Creating the DataRow

In order to create the DataRow that is used in the code, above, I wrote the following code:

    protected DataRow CreateRow(String Value, String Text, DataTable dt)
    {
        // Create a DataRow using the DataTable defined in the 

        // CreateDataSource method.

        DataRow dr = dt.NewRow();

        // The first column of the DataSource contain the Text

        dr[0] = Text;

        // The second column of the DataSource contain the Value

        dr[1] = Value;

        return dr;
    }

Putting the Control in the Toolbox

To be able to drag-and-drop the control from the Toolbox, I had to make sure I could put it in the toolbox to begin with. So I wrote this code:

    [
    ToolboxData("<{0}:SDIddlStates runat="server">")
    ]

Note that the name of the control in the Toolbox must match the class name.

History

V1.01

• Removed duplicate province.