I will explain step-by-step Cascading Dropdown lists in the following.

1: SQL Database

In this database section create the two tables, State and City.

Table 1: State

  1. Create table India_State
  2. (
  3. S_id int identity(1,1) primary key,
  4. S_name varchar(30)
  5. )
Table 2: City
  1. create table City
  2. (
  3. City_id int identity(1,1) primary key,
  4. City_name varchar(30),
  5. S_id int foreign key references India_state(S_id)
  6. )

2: Visual Studio

In this section add a UI Page, BAL class file and DAL class file.

Step 1

Create a DAL file as in the following.

Go to the project in the Solution Explorer and add a DAL class file as in Figure 1.

Add DAL class File
Figure 1: Add DAL class File.

DAL Code

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Configuration;
  6. using System.Data;
  7. using System.Data.SqlClient;
  9. namespace EWD.DAL
  10. {
  11. public class DAL_DropDownList
  12. {
  13. public static DataTable StateList()
  14. {
  15. string connection = ConfigurationManager.ConnectionStrings["Conncet_DB"].ConnectionString;
  16. // bool status = false;
  17. SqlConnection con = new SqlConnection(connection);
  18. SqlCommand cmd = new SqlCommand("select S_id,S_name from India_State", con);
  19. con.Open();
  20. cmd.CommandType = CommandType.Text;
  21. SqlDataReader dr = cmd.ExecuteReader();
  22. DataTable dt = null;
  23. if (dr.HasRows)
  24. {
  25. dt = new DataTable("India_State");
  26. dt.Load(dr);
  27. // status = true;
  28. return dt;
  29. }
  30. if (cmd != null)
  31. {
  32. cmd.Dispose();
  33. cmd = null;
  34. }
  35. return dt;
  36. }
  38. public static DataTable GetCityList(int S_id)
  39. {
  40. string connection = ConfigurationManager.ConnectionStrings["Conncet_DB"].ConnectionString;
  41. // bool status = false;
  42. SqlConnection con = new SqlConnection(connection);
  43. SqlCommand cmd = new SqlCommand("select City_id,City_name from City Where S_id=@S_id", con);
  44. con.Open();
  45. cmd.CommandType = CommandType.Text;
  46. cmd.Parameters.AddWithValue("@S_id", SqlDbType.Int).Value = S_id;
  47. SqlDataReader dr = cmd.ExecuteReader();
  48. DataTable dt = null;
  49. if (dr.HasRows)
  50. {
  51. dt = new DataTable("City");
  52. dt.Load(dr);
  53. // status = true;
  54. return dt;
  55. }
  56. if (cmd != null)
  57. {
  58. cmd.Dispose();
  59. cmd = null;
  60. }
  61. return dt;
  62. }
  63. }
  64. }

Step 2

Add a BAL File as in Figure 2.

Add BAL Class
Figure 2: Add BAL Class

BAL Code

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Data;
  6. using EWD;
  8. namespace EWD.BAL
  9. {
  10. public class BAL_DropDownList
  11. {
  12. public static DataTable GetStateList()
  13. {
  14. return DAL.DAL_DropDownList.StateList();
  15. }
  17. public static DataTable GetCityList(int S_id)
  18. {
  19. return DAL.DAL_DropDownList.GetCityList(S_id);
  20. }
  21. }
  22. }

Step 3

Create the UI Design.

Add Design Page
Figure 3: Add Design Page,

UI Design Code

In this section add a dropdown list to bind a State and City record from the database.

Also the State dropdownlist AutoPostBack event true bind for Child City Record.

  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DropDownList.aspx.cs" Inherits="EWD.UI.DropDownList" %>
  2. <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  3. </asp:Content>
  4. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  5. <h2>Cascading DropDownList in three tier Application </h2>
  6. <table>
  7. <tr>
  8. <td>Select State</td><td><asp:DropDownList ID="ddlState" runat="server"
  9. onselectedindexchanged="ddlState_SelectedIndexChanged" AutoPostBack="true" ></asp:DropDownList></td>
  11. <td>Select City</td><td><asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList></td>
  12. </tr>
  13. </table>
  15. </asp:Content>
UI 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;
  8. using EWD.BAL;
  10. namespace EWD.UI
  11. {
  12. public partial class DropDownList : System.Web.UI.Page
  13. {
  14. protected void Page_Load(object sender, EventArgs e)
  15. {
  16. if (!IsPostBack)
  17. {
  18. BindState();
  19. }
  20. }
  22. public void BindState()
  23. {
  24. BAL_DropDownList DDL = new BAL_DropDownList();
  26. DataTable dtState = EWD.BAL.BAL_DropDownList.GetStateList();
  27. ddlState.DataSource = dtState;
  28. ddlState.DataTextField = "S_name";
  29. ddlState.DataValueField = "S_id";
  30. ddlState.DataBind();
  31. ddlState.Items.Insert(0, new ListItem("---Select State---"));
  32. }
  34. protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
  35. {
  36. BindCity();
  37. }
  39. public void BindCity()
  40. {
  41. int S_id;
  42. int.TryParse(ddlState.SelectedValue, out S_id);
  44. DataTable dtCity = EWD.BAL.BAL_DropDownList.GetCityList(S_id);
  46. ddlCity.DataSource = dtCity;
  47. ddlCity.DataTextField = "City_name";
  48. ddlCity.DataValueField = "City_id";
  49. ddlCity.DataBind();
  50. ddlCity.Items.Insert(0, new ListItem("---Select City---"));
  51. }
  52. }
  53. }
Output

Now run the code and display the results in the web page.

Parent DropDownList
Figure 4: Parent DropDownList

Child DropDownList
Figure 5: Child DropDownList

Thanks for reading this article. Have a nice day sir.