{"id":4971,"date":"2024-03-02T05:58:27","date_gmt":"2024-03-02T05:58:27","guid":{"rendered":"https:\/\/isophal.com\/?p=4971"},"modified":"2024-03-02T05:58:29","modified_gmt":"2024-03-02T05:58:29","slug":"dropdownlist-with-country-state-and-city-in-asp-net","status":"publish","type":"post","link":"https:\/\/isophal.com\/news\/2024\/03\/02\/4971.html\/","title":{"rendered":"DropDownList With Country, State And City In ASP. NET"},"content":{"rendered":"\n

This article shows how to create three DropDownList to display countries, states and cities. When you select a country then its automatically shows the states name of that country in next DropDownList. Then when you select a state, the cities DropDownList will fetch the related cities for that state.<\/p>\n\n\n\n

Creating table for country, state and city.<\/p>\n\n\n\n

Country Table<\/strong><\/p>\n\n\n\n

    \n
  1. Create<\/strong> Table<\/strong> Country  <\/li>\n\n\n\n
  2. (  <\/li>\n\n\n\n
  3.    CountryId Int<\/strong> Primary<\/strong> Key<\/strong>,  <\/li>\n\n\n\n
  4.    County Varchar<\/strong>(30)  <\/li>\n\n\n\n
  5. )  <\/li>\n<\/ol>\n\n\n\n

    Countrystate Table<\/strong><\/p>\n\n\n\n

      \n
    1. Create<\/strong> Table<\/strong> countryState  <\/li>\n\n\n\n
    2. (  <\/li>\n\n\n\n
    3.    StateId Int<\/strong> Primary<\/strong> Key<\/strong>,  <\/li>\n\n\n\n
    4.    CountryId Int<\/strong> Foreign<\/strong> Key<\/strong> References<\/strong> Country(CountryId),  <\/li>\n\n\n\n
    5.    State Varchar<\/strong>(30)  <\/li>\n\n\n\n
    6. )  <\/li>\n<\/ol>\n\n\n\n

      StateCity Table<\/strong><\/p>\n\n\n\n

        \n
      1. Create<\/strong> Table<\/strong> stateCity  <\/li>\n\n\n\n
      2. (  <\/li>\n\n\n\n
      3.    CityId Int<\/strong>,  <\/li>\n\n\n\n
      4.    StateId Int<\/strong> Foreign<\/strong> Key<\/strong> References<\/strong> countryState(StateId),  <\/li>\n\n\n\n
      5.    City Varchar<\/strong>(30)  <\/li>\n\n\n\n
      6. )  <\/li>\n<\/ol>\n\n\n\n

        Now insert values in the table.<\/p>\n\n\n\n

          \n
        1. Insert<\/strong> Into<\/strong> Country Values<\/strong>(101,’India’)  <\/li>\n\n\n\n
        2. Insert<\/strong> Into<\/strong> Country Values<\/strong>(102,’USA’)  <\/li>\n\n\n\n
        3. Insert<\/strong> Into<\/strong> Country Values<\/strong>(103,’Pakistan’)  <\/li>\n\n\n\n
        4.    <\/li>\n\n\n\n
        5. Insert<\/strong> Into<\/strong> countryState Values<\/strong>(1001,101,’U.P’)  <\/li>\n\n\n\n
        6. Insert<\/strong> Into<\/strong> countryState Values<\/strong>(1002,101,’Kerala’)  <\/li>\n\n\n\n
        7. Insert<\/strong> Into<\/strong> countryState Values<\/strong>(1003,101,’Kasmir’)  <\/li>\n\n\n\n
        8. Insert<\/strong> Into<\/strong> countryState Values<\/strong>(2001,102,’Colorado’)  <\/li>\n\n\n\n
        9. Insert<\/strong> Into<\/strong> countryState Values<\/strong>(2002,102,’Delaware’)  <\/li>\n\n\n\n
        10. Insert<\/strong> Into<\/strong> countryState Values<\/strong>(2003,102,’Georgia’)  <\/li>\n\n\n\n
        11. Insert<\/strong> Into<\/strong> countryState Values<\/strong>(3001,103,’Punjap’)  <\/li>\n\n\n\n
        12. Insert<\/strong> Into<\/strong> countryState Values<\/strong>(3002,103,’Baluchistan’)  <\/li>\n\n\n\n
        13. Insert<\/strong> Into<\/strong> countryState Values<\/strong>(3003,103,’Sind’)  <\/li>\n\n\n\n
        14.    <\/li>\n\n\n\n
        15. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(11,1001,’Kanpur’)  <\/li>\n\n\n\n
        16. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(12,1001,’Dg’)  <\/li>\n\n\n\n
        17. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(21,1002,’Pal’)  <\/li>\n\n\n\n
        18. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(22,1002,’Tri’)  <\/li>\n\n\n\n
        19. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(31,1003,’Jammu’)  <\/li>\n\n\n\n
        20. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(32,1003,’Manali’)  <\/li>\n\n\n\n
        21. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(41,2001,’Alabama’)  <\/li>\n\n\n\n
        22. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(42,2001,’Arizona’)  <\/li>\n\n\n\n
        23. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(51,2002,’Bellefonte’)  <\/li>\n\n\n\n
        24. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(52,2002,’Felton’)  <\/li>\n\n\n\n
        25. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(61,2003,’Rustavi’)  <\/li>\n\n\n\n
        26. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(62,2003,’Kobulati’)  <\/li>\n\n\n\n
        27. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(71,3001,’Lahore’)  <\/li>\n\n\n\n
        28. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(72,3001,’Faisalabad’)  <\/li>\n\n\n\n
        29. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(81,3002,’Quetta’)  <\/li>\n\n\n\n
        30. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(82,3002,’Nasirabad’)  <\/li>\n\n\n\n
        31. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(91,3003,’Krachi’)  <\/li>\n\n\n\n
        32. Insert<\/strong> Into<\/strong> stateCity Values<\/strong>(92,3003,’Mirpur khas’)  <\/li>\n<\/ol>\n\n\n\n

          Now select it.<\/p>\n\n\n\n

            \n
          1. select<\/strong> * from<\/strong> Country;  <\/li>\n<\/ol>\n\n\n\n
            \"countrytable.gif\"\/<\/figure>\n\n\n\n

            Countrytable<\/p>\n\n\n\n

              \n
            1. select<\/strong> * from<\/strong>  countryState;  <\/li>\n<\/ol>\n\n\n\n
              \"citytable.gif\"\/<\/figure>\n\n\n\n

              Statetable<\/p>\n\n\n\n

                \n
              1. select<\/strong> * from<\/strong> stateCity;  <\/li>\n<\/ol>\n\n\n\n
                \"statetable.gif\"\/<\/figure>\n\n\n\n

                Citytable<\/p>\n\n\n\n

                Now drag and drop three DropDownList to display countries, states and cities and three update panel control on the page.<\/p>\n\n\n\n

                \"fig1.gif\"\/<\/figure>\n\n\n\n

                Figure1<\/p>\n\n\n\n

                .aspx code<\/strong><\/p>\n\n\n\n

                  \n
                1. <headrunat=”server”>  <\/li>\n\n\n\n
                2.    <title><\/title>  <\/li>\n\n\n\n
                3. <\/head>  <\/li>\n\n\n\n
                4. <body>  <\/li>\n\n\n\n
                5.    <formid=”form1″runat=”server”>  <\/li>\n\n\n\n
                6.   <asp:ScriptManagerID=”ScriptManager1″runat=”server”>  <\/li>\n\n\n\n
                7.    <\/asp:ScriptManager>  <\/li>\n\n\n\n
                8.    <div>  <\/li>\n\n\n\n
                9.        <asp:UpdatePanelID=”countrypanel”runat=”server”>  <\/li>\n\n\n\n
                10.           <ContentTemplate>  <\/li>\n\n\n\n
                11.               <spanclass=”style1″><strong>Select Country:<\/strong><\/span>  <\/li>\n\n\n\n
                12.              <asp:DropDownListID=”ddlcountry”AutoPostBack =”true” AppendDataBoundItems  <\/li>\n\n\n\n
                13. =”true” runat=”server”Height=”20px”Width=”156px”     <\/li>\n\n\n\n
                14. onselectedindexchanged=”ddlcountry_SelectedIndexChanged”BackColor=”#3399FF”  <\/li>\n\n\n\n
                15.                   ForeColor=”#FF9999″>  <\/li>\n\n\n\n
                16.            <\/asp:DropDownList>  <\/li>\n\n\n\n
                17.        <\/ContentTemplate>  <\/li>\n\n\n\n
                18.    <\/li>\n\n\n\n
                19.      <Triggers>  <\/li>\n\n\n\n
                20.       <asp:AsyncPostBackTriggerControlID =”ddlcountry” \/>  <\/li>\n\n\n\n
                21.      <\/Triggers>  <\/li>\n\n\n\n
                22.   <\/asp:UpdatePanel>  <\/li>\n\n\n\n
                23.        <br\/>  <\/li>\n\n\n\n
                24.    <\/li>\n\n\n\n
                25.  <asp:UpdatePanelID=”statepanel”runat=”server”>      <\/li>\n\n\n\n
                26.     <ContentTemplate>  <\/li>\n\n\n\n
                27.         <spanclass=”style1″><strong>     Select State:<\/strong><\/span>  <\/li>\n\n\n\n
                28.       <asp:DropDownListID=”ddlstate”AutoPostBack =”true”  <\/li>\n\n\n\n
                29.        AppendDataBoundItems=”true”  runat=”server”Height=”20px”  <\/li>\n\n\n\n
                30. Width=”155px”               onselectedindexchanged=”ddlstate_SelectedIndexChanged”  <\/li>\n\n\n\n
                31.             BackColor=”#FF3399″ForeColor=”Maroon”>  <\/li>\n\n\n\n
                32.       <\/asp:DropDownList>  <\/li>\n\n\n\n
                33.     <\/ContentTemplate>  <\/li>\n\n\n\n
                34.     <Triggers>  <\/li>\n\n\n\n
                35.        <asp:AsyncPostBackTriggerControlID =”ddlstate”\/>  <\/li>\n\n\n\n
                36.        <\/Triggers>  <\/li>\n\n\n\n
                37.     <\/asp:UpdatePanel>  <\/li>\n\n\n\n
                38.        <br\/>  <\/li>\n\n\n\n
                39.    <\/li>\n\n\n\n
                40. <asp:UpdatePanelID=”citypanel”runat=”server”>       <\/li>\n\n\n\n
                41.    <ContentTemplate>        <\/li>\n\n\n\n
                42.        <spanclass=”style1″><strong>      Select City:<\/strong><\/span>        <\/li>\n\n\n\n
                43.      <asp:DropDownListID=”ddlcity” AutoPostBack =”true”  <\/li>\n\n\n\n
                44.    AppendDataBoundItems=”true” runat=”server”Height=”20px”Width=”155px”  <\/li>\n\n\n\n
                45.            BackColor=”#66FFFF”ForeColor=”#006666″>  <\/li>\n\n\n\n
                46.      <\/asp:DropDownList>  <\/li>\n\n\n\n
                47.   <\/ContentTemplate>  <\/li>\n\n\n\n
                48.   <Triggers>  <\/li>\n\n\n\n
                49.     <asp:AsyncPostBackTrigger ControlID =”ddlcity”\/>         <\/Triggers>    <\/li>\n\n\n\n
                50.  <\/asp:UpdatePanel>  <\/li>\n\n\n\n
                51.  <\/div>  <\/li>\n\n\n\n
                52.    <\/form>  <\/li>\n\n\n\n
                53. <\/body>  <\/li>\n\n\n\n
                54. <\/html>  <\/li>\n<\/ol>\n\n\n\n

                  .VB code<\/strong> <\/p>\n\n\n\n

                    \n
                  1. using System;  <\/li>\n\n\n\n
                  2. using System.Collections.Generic;  <\/li>\n\n\n\n
                  3. using System.Linq;  <\/li>\n\n\n\n
                  4. using System.Web;  <\/li>\n\n\n\n
                  5. using System.Web.UI;  <\/li>\n\n\n\n
                  6. using System.Web.UI.WebControls;  <\/li>\n\n\n\n
                  7. using System.Data.SqlClient;  <\/li>\n\n\n\n
                  8.    <\/li>\n\n\n\n
                  9. namespace CountryStateCity  <\/li>\n\n\n\n
                  10. {  <\/li>\n\n\n\n
                  11.    public<\/strong> partialclass WebForm1 : System.Web.UI.Page  <\/li>\n\n\n\n
                  12.     {  <\/li>\n\n\n\n
                  13.        private<\/strong> SqlConnection conn = new<\/strong> SqlConnection(“Data source=.; uid=sa;   pwd=Password$2; database=CountryStateCity”);  <\/li>\n\n\n\n
                  14.    <\/li>\n\n\n\n
                  15.        public<\/strong> void<\/strong> Bind_ddlCountry()  <\/li>\n\n\n\n
                  16.         {  <\/li>\n\n\n\n
                  17.             conn.Open();  <\/li>\n\n\n\n
                  18.            SqlCommand cmd =new<\/strong> SqlCommand(“select County,CountryId from Country”, conn);  <\/li>\n\n\n\n
                  19.            SqlDataReader dr = cmd.ExecuteReader();   <\/li>\n\n\n\n
                  20.             ddlcountry.DataSource = dr;  <\/li>\n\n\n\n
                  21.             ddlcountry.Items.Clear();  <\/li>\n\n\n\n
                  22.             ddlcountry.Items.Add(“–Please Select country–“);   <\/li>\n\n\n\n
                  23.             ddlcountry.DataTextField = “County”;   <\/li>\n\n\n\n
                  24.             ddlcountry.DataValueField = “CountryId”;  <\/li>\n\n\n\n
                  25.             ddlcountry.DataBind();  <\/li>\n\n\n\n
                  26.             conn.Close();  <\/li>\n\n\n\n
                  27.         }  <\/li>\n\n\n\n
                  28.        public<\/strong> void<\/strong> Bind_ddlState()  <\/li>\n\n\n\n
                  29.         {  <\/li>\n\n\n\n
                  30.             conn.Open();  <\/li>\n\n\n\n
                  31.    <\/li>\n\n\n\n
                  32.            SqlCommand cmd =new<\/strong> SqlCommand(“select State,StateID from countryState where CountryId='” + ddlcountry.SelectedValue +”‘”, conn);  <\/li>\n\n\n\n
                  33.    <\/li>\n\n\n\n
                  34.            SqlDataReader dr = cmd.ExecuteReader();  <\/li>\n\n\n\n
                  35.              ddlstate.DataSource = dr;  <\/li>\n\n\n\n
                  36.             ddlstate.Items.Clear();   <\/li>\n\n\n\n
                  37.             ddlstate.Items.Add(“–Please Select state–“);  <\/li>\n\n\n\n
                  38.             ddlstate.DataTextField = “State”;  <\/li>\n\n\n\n
                  39.             ddlstate.DataValueField = “StateID”;  <\/li>\n\n\n\n
                  40.           ddlstate.DataBind();  <\/li>\n\n\n\n
                  41.             conn.Close();  <\/li>\n\n\n\n
                  42.         }  <\/li>\n\n\n\n
                  43.        public<\/strong> void<\/strong> Bind_ddlCity()  <\/li>\n\n\n\n
                  44.         {  <\/li>\n\n\n\n
                  45.             conn.Open();  <\/li>\n\n\n\n
                  46.             SqlCommand cmd =new<\/strong> SqlCommand(“select * from stateCity where StateId ='” + ddlstate.SelectedValue +”‘”, conn);  <\/li>\n\n\n\n
                  47.    <\/li>\n\n\n\n
                  48.            SqlDataReader dr = cmd.ExecuteReader();  <\/li>\n\n\n\n
                  49.             ddlcity.DataSource = dr;  <\/li>\n\n\n\n
                  50.             ddlcity.Items.Clear();  <\/li>\n\n\n\n
                  51.             ddlcity.Items.Add(“–Please Select city–“);  <\/li>\n\n\n\n
                  52.             ddlcity.DataTextField = “City”;  <\/li>\n\n\n\n
                  53.             ddlcity.DataValueField = “CityID”;  <\/li>\n\n\n\n
                  54.             ddlcity.DataBind();  <\/li>\n\n\n\n
                  55.              conn.Close();  <\/li>\n\n\n\n
                  56.         }  <\/li>\n\n\n\n
                  57.         protectedvoid Page_Load(object sender, EventArgs e)  <\/li>\n\n\n\n
                  58.         {  <\/li>\n\n\n\n
                  59.             if<\/strong> (!IsPostBack)  <\/li>\n\n\n\n
                  60.             {  <\/li>\n\n\n\n
                  61.                 Bind_ddlCountry();  <\/li>\n\n\n\n
                  62.             }  <\/li>\n\n\n\n
                  63.         }  <\/li>\n\n\n\n
                  64.         protectedvoid ddlcountry_SelectedIndexChanged(object sender, EventArgs e)  <\/li>\n\n\n\n
                  65.         {  <\/li>\n\n\n\n
                  66.             Bind_ddlState();  <\/li>\n\n\n\n
                  67.         }  <\/li>\n\n\n\n
                  68.         protectedvoid ddlstate_SelectedIndexChanged(object sender, EventArgs e)  <\/li>\n\n\n\n
                  69.         {  <\/li>\n\n\n\n
                  70.            Bind_ddlCity();  <\/li>\n\n\n\n
                  71.       }  <\/li>\n\n\n\n
                  72.    }  <\/li>\n\n\n\n
                  73.  }  <\/li>\n<\/ol>\n\n\n\n

                    Now run the application and test it.<\/p>\n\n\n\n

                    \"fig2.gif\"\/<\/figure>\n\n\n\n

                    Figure2<\/p>\n\n\n\n

                    Now select a country, then its automatically shows the states name of that country in next DropDownList. For example we select USA.<\/p>\n\n\n\n

                    \"fig3.gif\"\/<\/figure>\n\n\n\n

                    Figure3<\/p>\n\n\n\n

                    Now select a State, then its automatically shows the cities name of that state in next DropDownList. For example we select Punjab.<\/p>\n\n\n\n

                    \"fig4.gif\"\/<\/figure>\n\n\n\n

                    Figure4<\/p>\n\n\n\n

                    Note
                    <\/u><\/strong>
                    You can see a demo of this article by downloading this application.<\/p>\n\n\n\n

                    Download Source Code <\/p>\n","protected":false},"excerpt":{"rendered":"

                    This article shows how to create three…<\/p>\n","protected":false},"author":1,"featured_media":4972,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[189,140],"tags":[191],"class_list":["post-4971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net","category-programming","tag-asp-net"],"_links":{"self":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/comments?post=4971"}],"version-history":[{"count":1,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4971\/revisions"}],"predecessor-version":[{"id":4973,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4971\/revisions\/4973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/media\/4972"}],"wp:attachment":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/media?parent=4971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/categories?post=4971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/tags?post=4971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}