Bind (Populate) DropDownList with Country Name and Flag using C# and VB.Net in ASP.Net

Last Reply 11 days ago By pandeyism

Posted 11 days ago

hello,

i have seen on many places they use country flags and coutnry code in dropdown for user to add phone number and its auto validate the phone number based on country code

how to do it in asp dot net 

i found this https://github.com/jackocnr/intl-tel-input#demo-and-examples 

but it has lots of code i am not sure how it will work with asp dot net

please advice

You are viewing reply posted by: pandeyism 11 days ago.
Posted 11 days ago Modified on 10 days ago

Hi nauna,

Refer below sample.

Use json data for country phone code.

Download plugin from below link -

https://github.com/marghoobsuleman/ms-Dropdown

HTML

<link href="ms-Dropdown-master/css/msdropdown/dd.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="ms-Dropdown-master/js/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="ms-Dropdown-master/js/msdropdown/jquery.dd.js"></script>
<script type="text/javascript" type="text/javascript">
    $(document).ready(function () {
        $("#DropDownList1").msDropDown();
    });
</script>
<div>
    <asp:DropDownList ID="DropDownList1" runat="server" Width="300px"></asp:DropDownList>
</div>

Namespaces

C#

using System.Globalization;
using System.Collections.Generic;
using Newtonsoft.Json.Linq;
using Newtonsoft.Json;
using System.IO;

VB.Net

Imports System.Globalization
Imports System.Collections.Generic
Imports Newtonsoft.Json.Linq
Imports Newtonsoft.Json
Imports System.IO

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        List<string> countryList = CountryList();
        string duplicateItem = "";
        foreach (var items in countryList)
        {
            if (duplicateItem == "")
            {
                String text = String.Format("{0}-{1}\n",
                                items.ToString(), GetCode(items.ToString()));
                DropDownList1.Items.Add(new ListItem(text.ToString(), "http://www.geognos.com/api/en/countries/flag/" + GetCountryCode(items.ToString()) + ".png"));
                duplicateItem = items;
            }
            if (duplicateItem != items.ToString())
            {
                String text = String.Format("{0}-{1}\n",
                                items.ToString(), GetCode(items.ToString()));
                DropDownList1.Items.Add(new ListItem(text.ToString(), "http://www.geognos.com/api/en/countries/flag/" + GetCountryCode(items.ToString()) + ".png"));
                duplicateItem = items;
            }
        }
        Imagetitlebind();
        DropDownList1.Items.Insert(0, new ListItem("Select", "0"));
    }
}

public static List<string> CountryList()
{
    List<string> CultureList = new List<string>();
    CultureInfo[] getCultureInfo = CultureInfo.GetCultures(CultureTypes.SpecificCultures);

    foreach (CultureInfo getCulture in getCultureInfo)
    {
        RegionInfo getRegionInfo = new RegionInfo(getCulture.LCID);
        if (!(CultureList.Contains(getRegionInfo.Name)))
        {
            CultureList.Add(getRegionInfo.EnglishName);
        }
    }
    CultureList.Sort();
    return CultureList;
}

protected void Imagetitlebind()
{
    if (DropDownList1 != null)
    {
        foreach (ListItem item in DropDownList1.Items)
        {
            item.Attributes["title"] = item.Value;
        }
    }
}

public static string GetCountryCode(string country)
{
    string countryCode = "";
    CultureInfo[] cultures = CultureInfo.GetCultures(CultureTypes.SpecificCultures);
    foreach (CultureInfo culture in cultures)
    {
        RegionInfo region = new RegionInfo(culture.LCID);
        if (region.EnglishName.ToUpper().Contains(country.ToUpper()))
        {
            countryCode = region.TwoLetterISORegionName;
        }
    }
    return countryCode;
}

public string GetCode(string country)
{
    string code = "";
    JObject weatherInfo = JsonConvert.DeserializeObject<JObject>(File.ReadAllText(Server.MapPath("~/TextFile.json")));
    code = Convert.ToString(((JToken)weatherInfo[GetCountryCode(country)])).Replace("\"", string.Empty);
    return code;
}

VB.Net

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Dim countryList As List(Of String) = CountryList()
            Dim duplicateItem As String = ""
            For Each items In countryList
                If duplicateItem = "" Then
                    Dim text As String = String.Format("{0}-{1}" & vbLf, items.ToString(), GetCode(items.ToString()))
                    DropDownList1.Items.Add(New ListItem(text.ToString(), "http://www.geognos.com/api/en/countries/flag/" & GetCountryCode(items.ToString()) & ".png"))
                    duplicateItem = items
                End If
                If duplicateItem <> items.ToString() Then
                    Dim text As String = String.Format("{0}-{1}" & vbLf, items.ToString(), GetCode(items.ToString()))
                    DropDownList1.Items.Add(New ListItem(text.ToString(), "http://www.geognos.com/api/en/countries/flag/" & GetCountryCode(items.ToString()) & ".png"))
                    duplicateItem = items
                End If
            Next
            Imagetitlebind()
            DropDownList1.Items.Insert(0, New ListItem("Select", "0"))
        End If
    End Sub
    Public Shared Function CountryList() As List(Of String)
        Dim CultureList As List(Of String) = New List(Of String)()
        Dim getCultureInfo As CultureInfo() = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
        For Each getCulture As CultureInfo In getCultureInfo
            Dim getRegionInfo As RegionInfo = New RegionInfo(getCulture.LCID)
            If Not (CultureList.Contains(getRegionInfo.Name)) Then
                CultureList.Add(getRegionInfo.EnglishName)
            End If
        Next
        CultureList.Sort()
        Return CultureList
    End Function
    Protected Sub Imagetitlebind()
        If DropDownList1 IsNot Nothing Then

            For Each item As ListItem In DropDownList1.Items
                item.Attributes("title") = item.Value
            Next
        End If
    End Sub
    Public Shared Function GetCountryCode(ByVal country As String) As String
        Dim countryCode As String = ""
        Dim cultures As CultureInfo() = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
        For Each culture As CultureInfo In cultures
            Dim region As RegionInfo = New RegionInfo(culture.LCID)
            If region.EnglishName.ToUpper().Contains(country.ToUpper()) Then
                countryCode = region.TwoLetterISORegionName
            End If
        Next
        Return countryCode
    End Function
    Public Function GetCode(ByVal country As String) As String
        Dim code As String = ""
        Dim weatherInfo As JObject = JsonConvert.DeserializeObject(Of JObject)(File.ReadAllText(Server.MapPath("~/TextFile.json")))
        code = Convert.ToString((CType(weatherInfo(GetCountryCode(country)), JToken))).Replace("""", String.Empty)
        Return code
    End Function

Json

{"BD": "880", "BE": "32", "BF": "226", "BG": "359", "BA": "387", "BB": "+1-246", "WF": "681", "BL": "590", "BM": "+1-441", 
"BN": "673", "BO": "591", "BH": "973", "BI": "257", "BJ": "229", "BT": "975", "JM": "+1-876", "BV": "", "BW": "267", 
"WS": "685", "BQ": "599", "BR": "55", "BS": "+1-242", "JE": "+44-1534", "BY": "375", "BZ": "501", "RU": "7", "RW": "250", 
"RS": "381", "TL": "670", "RE": "262", "TM": "993", "TJ": "992", "RO": "40", "TK": "690", "GW": "245", "GU": "+1-671", 
"GT": "502", "GS": "", "GR": "30", "GQ": "240", "GP": "590", "JP": "81", "GY": "592", "GG": "+44-1481", "GF": "594", 
"GE": "995", "GD": "+1-473", "GB": "44", "GA": "241", "SV": "503", "GN": "224", "GM": "220", "GL": "299", "GI": "350", 
"GH": "233", "OM": "968", "TN": "216", "JO": "962", "HR": "385", "HT": "509", "HU": "36", "HK": "852", "HN": "504", 
"HM": " ", "VE": "58", "PR": "+1-787 and 1-939", "PS": "970", "PW": "680", "PT": "351", "SJ": "47", "PY": "595", "IQ": "964", 
"PA": "507", "PF": "689", "PG": "675", "PE": "51", "PK": "92", "PH": "63", "PN": "870", "PL": "48", "PM": "508", "ZM": "260", 
"EH": "212", "EE": "372", "EG": "20", "ZA": "27", "EC": "593", "IT": "39", "VN": "84", "SB": "677", "ET": "251", "SO": "252", 
"ZW": "263", "SA": "966", "ES": "34", "ER": "291", "ME": "382", "MD": "373", "MG": "261", "MF": "590", "MA": "212", "MC": "377", 
"UZ": "998", "MM": "95", "ML": "223", "MO": "853", "MN": "976", "MH": "692", "MK": "389", "MU": "230", "MT": "356", "MW": "265", 
"MV": "960", "MQ": "596", "MP": "+1-670", "MS": "+1-664", "MR": "222", "IM": "+44-1624", "UG": "256", "TZ": "255", "MY": "60", 
"MX": "52", "IL": "972", "FR": "33", "IO": "246", "SH": "290", "FI": "358", "FJ": "679", "FK": "500", "FM": "691", "FO": "298", 
"NI": "505", "NL": "31", "NO": "47", "NA": "264", "VU": "678", "NC": "687", "NE": "227", "NF": "672", "NG": "234", "NZ": "64", 
"NP": "977", "NR": "674", "NU": "683", "CK": "682", "XK": "", "CI": "225", "CH": "41", "CO": "57", "CN": "86", "CM": "237", 
"CL": "56", "CC": "61", "CA": "1", "CG": "242", "CF": "236", "CD": "243", "CZ": "420", "CY": "357", "CX": "61", "CR": "506", 
"CW": "599", "CV": "238", "CU": "53", "SZ": "268", "SY": "963", "SX": "599", "KG": "996", "KE": "254", "SS": "211", "SR": "597", 
"KI": "686", "KH": "855", "KN": "+1-869", "KM": "269", "ST": "239", "SK": "421", "KR": "82", "SI": "386", "KP": "850", "KW": "965", 
"SN": "221", "SM": "378", "SL": "232", "SC": "248", "KZ": "7", "KY": "+1-345", "SG": "65", "SE": "46", "SD": "249", "DO": "+1-809 and 1-829",
"DM": "+1-767", "DJ": "253", "DK": "45", "VG": "+1-284", "DE": "49", "YE": "967", "DZ": "213", "US": "1", "UY": "598", "YT": "262", 
"UM": "1", "LB": "961", "LC": "+1-758", "LA": "856", "TV": "688", "TW": "886", "TT": "+1-868", "TR": "90", "LK": "94", "LI": "423", 
"LV": "371", "TO": "676", "LT": "370", "LU": "352", "LR": "231", "LS": "266", "TH": "66", "TF": "", "TG": "228", "TD": "235", "TC": "+1-649", 
"LY": "218", "VA": "379", "VC": "+1-784", "AE": "971", "AD": "376", "AG": "+1-268", "AF": "93", "AI": "+1-264", "VI": "+1-340", "IS": "354",
"IR": "98", "AM": "374", "AL": "355", "AO": "244", "AQ": "", "AS": "+1-684", "AR": "54", "AU": "61", "AT": "43", "AW": "297", "IN": "91",
"AX": "+358-18", "AZ": "994", "IE": "353", "ID": "62", "UA": "380", "QA": "974", "MZ": "258"}

Screenshot