Home ProgrammingASP.net DropDownList With Country, State And City In ASP. NET
ASP.netProgramming

DropDownList With Country, State And City In ASP. NET

by Sophal
0 comment
DropDownList With Country, State And City In ASP. NET

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.

Creating table for country, state and city.

Country Table

  1. Create Table Country  
  2. (  
  3.    CountryId Int Primary Key,  
  4.    County Varchar(30)  
  5. )  

Countrystate Table

  1. Create Table countryState  
  2. (  
  3.    StateId Int Primary Key,  
  4.    CountryId Int Foreign Key References Country(CountryId),  
  5.    State Varchar(30)  
  6. )  

StateCity Table

  1. Create Table stateCity  
  2. (  
  3.    CityId Int,  
  4.    StateId Int Foreign Key References countryState(StateId),  
  5.    City Varchar(30)  
  6. )  

Now insert values in the table.

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

Now select it.

  1. select * from Country;  
countrytable.gif

Countrytable

  1. select * from  countryState;  
citytable.gif

Statetable

  1. select * from stateCity;  
statetable.gif

Citytable

Now drag and drop three DropDownList to display countries, states and cities and three update panel control on the page.

fig1.gif

Figure1

.aspx code

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

.VB code 

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

Now run the application and test it.

fig2.gif

Figure2

Now select a country, then its automatically shows the states name of that country in next DropDownList. For example we select USA.

fig3.gif

Figure3

Now select a State, then its automatically shows the cities name of that state in next DropDownList. For example we select Punjab.

fig4.gif

Figure4

Note

You can see a demo of this article by downloading this application.

Download Source Code

0 comment
FacebookTelegram

You may also like

ADO.NET MVC Example

20 February 2023

ជីវ​ប្រវត្តិ​សង្ខេបរបស់ស្ថាបនិក​បង្កើត​ភាសា Java

12 February 2020

4 Ways To Get Form Data In ASP.NET...

6 February 2024

ហេតុអ្វីបានជាត្រូវសិក្សាមុខវិជ្ជា Python?

26 June 2023

របៀបប្រៀបធៀប array និង array ដោយ​ប្រើ​ភាសា C និង C++

8 June 2017

ADO.NET Web Form Example

20 February 2023

How to Create a Blogger Blog Step by...

11 June 2016

ប្រមូលផ្តុំសៀវភៅ Programming ជាភាសាខ្មែរ

27 June 2017

How Model Binding Works In ASP.NET MVC With...

6 February 2024

តើការរៀនសរសេរកូដគឺជាអ្វី? ហេតុបានអ្វីវាសំខាន់?

29 December 2022