Building a Custom Country List Dropdown Component in ASP.NET

You've probably visited lots of websites and filled out many forms where you entered the country you're from. Most applications that need registration collect this data from users. When you attempt to create a dropdown list, it's tedious to enter all the country names and assign a value to each country.

It's definitely going to consume a lot of time if you do this manually for every form. Although there are third-party components available for a small fee that you can buy and use for a lifetime, you can create a simple component yourself. It's actually quite easy to create a dropdown list component that can be used in all your applications.

Setting Up Component Inheritance

Since you'll be inheriting the DropDownList control, you need to import the System.Web.UI, System.Web.UI.WebControls, and System.ComponentModel namespaces using the Imports statements above the component class. These namespaces provide all the functionality you'll need to create your custom control.

As the next step, you'll create a class called DDLCountry and then add two properties: Text and ValueLst. These properties will control how your dropdown displays and what values it uses.

Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.ComponentModel

<DefaultProperty("Text"), _
 ToolboxData("<{0}:DDLCountry runat=server></{0}:DDLCountry>")> _
Public Class DDLCountry
    Inherits System.Web.UI.WebControls.DropDownList
    
    Public Enum ValueListOption
        CC = 1
        CN = 0
    End Enum
    
    Dim _text As String
    Dim vlo As ValueListOption

Creating Component Properties

The code creates two essential properties for your component. The Text property will hold the selected text value, while the ValueLst property determines what kind of value system you're using (country codes or country names).

<Bindable(True), Category("Appearance"), DefaultValue("")> _
Property [Text]() As String
    Get
        Return _text
    End Get
    Set(ByVal Value As String)
        _text = Value
    End Set
End Property

<Bindable(True), Category("Appearance"), DefaultValue("0")> _
Property [ValueLst]() As ValueListOption
    Get
        Return vlo
    End Get
    Set(ByVal Value As ValueListOption)
        vlo = Value
        LoadList()
    End Set
End Property

Loading Country Names and Values

Now you'll create a subroutine that loads the values and names into the dropdown list when the control is added to the webform. Once this subroutine is created, you'll call it in the Init event. This enables the control to be initialized with the values and names when you add it to your form.

The following code snippet adds country names and the value for each country to the dropdown list. This is where you'll populate all your countries.

Private Sub LoadList()
    Dim licol As New WebControls.ListItemCollection()
    Dim li As ListItem
    
    ' Add default "Country" option
    Dim nav As New ListItem()
    nav.Text = "—Country List--"
    nav.Value = ""
    licol.Add(nav)
    
    ' Add Afghanistan
    Dim af As New ListItem()
    af.Text = "Afghanistan"
    af.Value = "AFG"
    licol.Add(af)
    
    ' Add Albania
    Dim al As New ListItem()
    al.Text = "Albania"
    al.Value = "ALB"
    licol.Add(al)
    
    ' Add other countries below...
    ' You'll continue this pattern for all countries
    
    ' Add the list item collection to the dropdown
    For Each li In licol
        Me.Items.Add(li)
    Next
End Sub

Modern Approach with Data Binding

While the above approach works, there's a more efficient way to handle country lists in modern applications. Instead of hardcoding each country, you can load them from a data source.

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

public class CountryDropdown : DropDownList
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        
        if (!Page.IsPostBack)
        {
            LoadCountries();
        }
    }
    
    private void LoadCountries()
    {
        var countries = new Dictionary<string, string>
        {
            { "", "—Select Country--" },
            { "AFG", "Afghanistan" },
            { "ALB", "Albania" },
            { "USA", "United States" },
            { "CAN", "Canada" },
            // Add more countries as needed
        };
        
        this.DataSource = countries;
        this.DataTextField = "Value";
        this.DataValueField = "Key";
        this.DataBind();
    }
}

Advanced Features with GeoIP Database

There are also some other types of web controls available that enable you to locate the user's country and then display that country as the default value in the dropdown list. For this purpose, you can use a database called the GeoIP database that's available from MaxMind.

This database is available freely from their site and can be used for IP address lookup for each country. By integrating this database, you can automatically detect where your users are located and pre-select their country in the dropdown, making for a much better user experience.

Using Your Custom Component

Once you've completed the component, compile it to create your DLL. Reference this component in your project and then start using it in your web pages. It's as simple as dragging and dropping any other control.

Creating your own component is definitely a better way to proceed with your project. You can reuse the country dropdown component in as many web pages as you need, saving yourself countless hours of repetitive work and ensuring consistency across your entire application.