Cascading dropdownlists with linq to sql

In this article I am going to explain how to populate Cascading dropdown list using linq to sql

Description:

In the previous article I have explained How to fill Country, State and City dropdown list using linq to sql, Youtube autoplay and disable relatedvideos and Asp.net Embed Youtube video

I want to populate the Country, State and City dropdownlist.

Implementation:

I have created three tables Tb_Country, Tb_State and Tb_City.

HTML Markup of webform:

    <table>

    <tr>

    <td>Select Country:</td>

     <td>  <asp:DropDownList ID="ddlcountry" runat="server" AutoPostBack="true"

            onselectedindexchanged="ddlcountry_SelectedIndexChanged">

        </asp:DropDownList></td>

    </tr>

       <tr>

    <td></td>

     <td></td>

    </tr>

     <tr id="state" runat="server">

    <td>Select State:</td>

     <td><asp:DropDownList ID="ddlstate" runat="server" AutoPostBack="true"

            onselectedindexchanged="ddlstate_SelectedIndexChanged">

        </asp:DropDownList></td>

    </tr>

     <tr>

    <td></td>

     <td></td>

    </tr>

     <tr id="city" runat="server">

    <td>Select City:</td>

     <td> <asp:DropDownList ID="ddlcity" runat="server">

        </asp:DropDownList></td>

    </tr>

    </table>

Create object of DBML

C#:

BlogDataContext db = new BlogDataContext();

VB:

Private db As New BlogDataContext()

Bind the country dropdownlist

Write a method to bind the country dropdownlist and call it in page load event.

C# code:

protected void Page_Load(object sender, EventArgs e)

    {

        city.Visible = false;

        state.Visible = false;

        if (!IsPostBack)

        {

            BindCountry();

        }

    } 

    public void BindCountry()

    {

        try

        {

            var country = from co in db.Tb_Countries

                          select co;

            ddlcountry.DataSource = country;

            ddlcountry.DataValueField = "Id";

            ddlcountry.DataTextField = "CountryName";

            ddlcountry.DataBind();

            ddlcountry.Items.Insert(0, new ListItem("--Select--", "0"));

        }

        catch (Exception ex)

        { }

    }

VB code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        city.Visible = False

        state.Visible = False

        If Not IsPostBack Then

            BindCountry()

        End If

    End Sub

    Public Sub BindCountry()

        Try

            Dim country = From co In db.Tb_Countries

                          Select co

            ddlcountry.DataSource = country

            ddlcountry.DataValueField = "Id"

            ddlcountry.DataTextField = "CountryName"

            ddlcountry.DataBind()

            ddlcountry.Items.Insert(0, New ListItem("--Select--", "0"))

        Catch ex As Exception

        End Try

    End Sub

Populate the state dropdownlist

On SelectIndexchanged event of country dropdown write the below given code

C# code:

protected void ddlcountry_SelectedIndexChanged(object sender, EventArgs e)

    {

        try

        {

            var state = from st in db.Tb_States

                        where st.CountryId_Fk == ddlcountry.SelectedIndex

                        select st;

            ddlstate.DataSource = state;

            ddlstate.DataValueField = "Id";

            ddlstate.DataTextField = "StateName";

            ddlstate.DataBind();

            ddlstate.Items.Insert(0, new ListItem("--Select--", "0"));           

        }

          

        catch (Exception ex)

        { }

        finally

        {

              state.Visible = true;

        }

    }

VB code:

Protected Sub ddlcountry_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlcountry.SelectedIndexChanged

        Try

            Dim state = From st In db.Tb_States Where st.CountryId_Fk = ddlcountry.SelectedIndex

                        Select st

            ddlstate.DataSource = state

            ddlstate.DataValueField = "Id"

            ddlstate.DataTextField = "StateName"

            ddlstate.DataBind()

            ddlstate.Items.Insert(0, New ListItem("--Select--", "0"))

        Catch ex As Exception

        Finally

            state.Visible = True

        End Try

    End Sub

Populate the city dropdownlist

To SelectIndexchanged event of State dropdown write the below given code

C# code:

protected void ddlstate_SelectedIndexChanged(object sender, EventArgs e)

    {

        try

        {

            var city = from ct in db.Tb_Cities

                        where ct.StateId_Fk == Convert.ToInt32(ddlstate.SelectedValue)

                        select ct;

            ddlcity.DataSource = city;

            ddlcity.DataValueField = "Id";

            ddlcity.DataTextField = "CityName";

            ddlcity.DataBind();

            ddlcity.Items.Insert(0, new ListItem("--Select--", "0"));          

        } 

        catch (Exception ex)

        { }

        finally

        {

            state.Visible = true;

            city.Visible = true;

        }

    }

VB code:

Protected Sub ddlstate_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlstate.SelectedIndexChanged

        Try

            Dim city = From ct In db.Tb_Cities Where ct.StateId_Fk = Convert.ToInt32(ddlstate.SelectedValue)

                       Select ct

            ddlcity.DataSource = city

            ddlcity.DataValueField = "Id"

            ddlcity.DataTextField = "CityName"

            ddlcity.DataBind()

            ddlcity.Items.Insert(0, New ListItem("--Select--", "0"))

        Catch ex As Exception

        Finally

            state.Visible = True

            city.Visible = True

        End Try

    End Sub

Build the project and run

Demo:

    In this article we have learn to how to populate the cascading dropdownlist using linq to sql (C#, VB.net). I hope you enjoyed this article.