Cascading Dropdown List in Three Tier ASP.NET Application

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;  
  8.   
  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.         }  
  37.   
  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;  
  7.   
  8. namespace EWD.BAL  
  9. {  
  10.     public class BAL_DropDownList  
  11.     {  
  12.         public static DataTable GetStateList()  
  13.         {  
  14.             return DAL.DAL_DropDownList.StateList();  
  15.         }  
  16.   
  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>  
  10.   
  11.  <td>Select City</td><td><asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList></td>  
  12.     </tr>  
  13.   </table>  
  14.   
  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;  
  9.   
  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.         }  
  21.   
  22.         public void BindState()  
  23.         {  
  24.             BAL_DropDownList DDL = new BAL_DropDownList();  
  25.   
  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.         }  
  33.   
  34.         protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)  
  35.         {  
  36.             BindCity();  
  37.         }  
  38.   
  39.         public void BindCity()  
  40.         {  
  41.             int S_id;  
  42.             int.TryParse(ddlState.SelectedValue, out S_id);  
  43.   
  44.             DataTable dtCity = EWD.BAL.BAL_DropDownList.GetCityList(S_id);  
  45.               
  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.


Similar Articles