how to create Cascading Dropdown list in Asp.Net

Introduction

In this article I am going to explain how to create Cascading Dropdown list in Asp.net from database. The Cascading Dropdown list loads data based on the value selected in parent dropdown list.

For ex: if you have Dropdownlist1 and Dropdownlist2 then Dropdownlist2 will be populated based on the value selected in Dropdownlist1.

Complete Code:

To load data based on the value selected in dropdown list, we will be using the SelectedIndexChanged event in dropdown list and then load the data in dropdown list.

HTML:

In Dropdownlist1 we will be using selectedindexchanged event to fill the dropdownlist2.

asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                        AutoPostBack="true">
                    </asp:DropDownList>
                    

                    <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
                </ContentTemplate>
            </asp:UpdatePanel>

C#:

First dropdownlist we will populate as we normally populate the dropdownlist from database like given below

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //Load the first dropdownlist
                LoadDropDown();
            }
        }
        //This method is used to load the first dropdownlist
        public void LoadDropDown()
        {
            //Get your connection string
            string connstring = ConfigurationManager.ConnectionStrings["Adventure WorksConnectionString"].ToString();
            //Create connection here
            using (SqlConnection conn = new SqlConnection(connstring))
            {
                //Sample Query here; You need to update the query as per your need
                string sqlquery = "SELECT TOP 100 a.city as City FROM Person.Address a";
                //Create SQLCommand object
                using (SqlCommand cmd = new SqlCommand(sqlquery, conn))
                {
                    //Open the SQLConnection
                    conn.Open();
                    //Execute the query
                    SqlDataReader rdr = cmd.ExecuteReader();

                    //Assign the values to dropdownlist
                    DropDownList1.DataSource = rdr;
                    //Set the DataValueField of dropdownlist
                    DropDownList1.DataValueField = "City";
                    //Set the DataTextField of dropdownlist
                    DropDownList1.DataTextField = "City";
                    //Bind the dropdownlist
                    DropDownList1.DataBind();
                }
            }
        }

Populating the second Dropdown list:

Here basically we will get the dropdown list values from database based on the value selected in dropdownlist like given below

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            //Get your connection string
            string connstring = ConfigurationManager.ConnectionStrings["Adventure WorksConnectionString"].ToString();
            //Create connection here
            using (SqlConnection conn = new SqlConnection(connstring))
            {
                //Sample Query here; You need to update the query as per your need
                string sqlquery = "SELECT TOP 100 a.AddressLine1 as AddressLine FROM Person.Address a where a.City =@City";
                //Create SQLCommand object
                using (SqlCommand cmd = new SqlCommand(sqlquery, conn))
                {
                    //Open the SQLConnection
                    conn.Open();

                    //Pass the value selected in previous dropdownlist as parameter to this query
                    cmd.Parameters.AddWithValue("@City", DropDownList1.SelectedItem.Text);
                    //Execute the query
                    SqlDataReader rdr = cmd.ExecuteReader();

                    //Assign the values to dropdownlist
                    DropDownList2.DataSource = rdr;
                    //Set the DataValueField of dropdownlist
                    DropDownList2.DataValueField = "AddressLine";
                    //Set the DataTextField of dropdownlist
                    DropDownList2.DataTextField = "AddressLine";
                    //Bind the dropdownlist
                    DropDownList2.DataBind();
                }
            }
        }

Demo

Advertisements

, , , , ,

  1. #1 by John Hopkins. on October 6, 2016 - 11:05 am

    Really good. Very clear.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: