jQuery Latest CDN Links

on
0

How to Create Cascading DropDownList in Asp.Net using C# and VB.Net

on

 

In this article I will show you, how to create cascading dropdownlist in Asp.Net using C# and VB.Net. Here I will show you cascading dropdownlist using AutoPostBack method.

Step1:

Now, I will add two sql table. 

1. Country table.

2. City table.

Step2:

Here I will add two dropdown component in html page/aspx page and add a label to show a message.

You need to add the AutoPostBack="true" command in dropdownlist component.

HTML:

<asp:DropDownList runat="server" ID="ddlCountry" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"></asp:DropDownList>
<br />
<asp:DropDownList runat="server" ID="ddlCity" AutoPostBack="true" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged">
<asp:ListItem Value="0">--Select City--</asp:ListItem>
</asp:DropDownList>
<br />

<asp:Label runat="server" ID="lblMessage"></asp:Label>

Step3:

Now, add some namespace for sql connection.

C#:

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net:

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Step4:

Now, I will  bind country dropdownlist on page load event from ms sql database. 

C#:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings("cons").ConnectionString;
        using (var con = new SqlConnection(constr))
        {
            using (var cmd = new SqlCommand("SELECT ID, Name FROM tblCountry"))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                ddlCountry.DataSource = cmd.ExecuteReader();
                ddlCountry.DataTextField = "Name";
                ddlCountry.DataValueField = "ID";
                ddlCountry.DataBind();
                con.Close();
            }
        }
        ddlCountry.Items.Insert(0, new ListItem("--Select Country--", "0"));
    }
}

VB.Net:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If Not IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("cons").ConnectionString
        Using con As SqlConnection = New SqlConnection(constr)
            Using cmd As SqlCommand = New SqlCommand("SELECT ID, Name FROM tblCountry")
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                con.Open()
                ddlCountry.DataSource = cmd.ExecuteReader()
                ddlCountry.DataTextField = "Name"
                ddlCountry.DataValueField = "ID"
                ddlCountry.DataBind()
                con.Close()
            End Using
        End Using
        ddlCountry.Items.Insert(0, New ListItem("--Select Country--", "0"))
    End If
End Sub

Step5:

Here, I will  use SelectedIndexChanged event to get the city list using CountryID from ms sql database.

C#:

protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
    string constr = ConfigurationManager.ConnectionStrings("cons").ConnectionString;
    using (var con = new SqlConnection(constr))
    {
        using (var cmd = new SqlCommand("SELECT ID, Name FROM tblCity where CountryID=" + ddlCountry.SelectedItem.Value + ""))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            ddlCity.DataSource = cmd.ExecuteReader();
            ddlCity.DataTextField = "Name";
            ddlCity.DataValueField = "ID";
            ddlCity.DataBind();
            con.Close();
        }
    }
    ddlCity.Items.Insert(0, new ListItem("--Select City--", "0"));
}

VB.Net:

Protected Sub ddlCountry_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim constr As String = ConfigurationManager.ConnectionStrings("cons").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("SELECT ID, Name FROM tblCity where CountryID=" & ddlCountry.SelectedItem.Value & "")
            cmd.CommandType = CommandType.Text
            cmd.Connection = con
            con.Open()
            ddlCity.DataSource = cmd.ExecuteReader()
            ddlCity.DataTextField = "Name"
            ddlCity.DataValueField = "ID"
            ddlCity.DataBind()
            con.Close()
        End Using
    End Using
    ddlCity.Items.Insert(0, New ListItem("--Select City--", "0"))
End Sub

Step6:

Now, I will add a message to a label after selecting city dropdownlist.

C#:

protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e)
{
    lblMessage.Text = "You selected --->" + ddlCountry.SelectedItem.Text + "--->" + ddlCity.SelectedItem.Text + "";
}

VB.Net:

Protected Sub ddlCity_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
    lblMessage.Text = "You selected --->" & ddlCountry.SelectedItem.Text & "--->" + ddlCity.SelectedItem.Text & ""
End Sub

Full Code:

HTML:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList runat="server" ID="ddlCountry" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"></asp:DropDownList>
            <br />
            <asp:DropDownList runat="server" ID="ddlCity" AutoPostBack="true" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged">
                <asp:ListItem Value="0">--Select City--</asp:ListItem>
            </asp:DropDownList>
            <br />
            <asp:Label runat="server" ID="lblMessage"></asp:Label>
        </div>
    </form>
</body>
</html>

C#:

using System;
using System.Data;
using System.Data.SqlClient;

namespace Demo
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string constr = ConfigurationManager.ConnectionStrings("cons").ConnectionString;
                using (var con = new SqlConnection(constr))
                {
                    using (var cmd = new SqlCommand("SELECT ID, Name FROM tblCountry"))
                    {
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        con.Open();
                        ddlCountry.DataSource = cmd.ExecuteReader();
                        ddlCountry.DataTextField = "Name";
                        ddlCountry.DataValueField = "ID";
                        ddlCountry.DataBind();
                        con.Close();
                    }
                }
                ddlCountry.Items.Insert(0, new ListItem("--Select Country--", "0"));
            }
        }
        protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
        {
            string constr = ConfigurationManager.ConnectionStrings("cons").ConnectionString;
            using (var con = new SqlConnection(constr))
            {
                using (var cmd = new SqlCommand("SELECT ID, Name FROM tblCity where CountryID=" + ddlCountry.SelectedItem.Value + ""))
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    ddlCity.DataSource = cmd.ExecuteReader();
                    ddlCity.DataTextField = "Name";
                    ddlCity.DataValueField = "ID";
                    ddlCity.DataBind();
                    con.Close();
                }
            }
            ddlCity.Items.Insert(0, new ListItem("--Select City--", "0"));
        }

        protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e)
        {
            lblMessage.Text = "You selected --->" + ddlCountry.SelectedItem.Text + "--->" + ddlCity.SelectedItem.Text + "";
        }
    }
}

VB.Net:

Imports System
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.UI
Imports System.Web.UI.WebControls

Namespace Demo
    Public Partial Class [Default]
        Inherits Web.UI.Page
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If Not IsPostBack Then
                Dim constr As String = ConfigurationManager.ConnectionStrings("cons").ConnectionString
                Using con As SqlConnection = New SqlConnection(constr)
                    Using cmd As SqlCommand = New SqlCommand("SELECT ID, Name FROM tblCountry")
                        cmd.CommandType = CommandType.Text
                        cmd.Connection = con
                        con.Open()
                        ddlCountry.DataSource = cmd.ExecuteReader()
                        ddlCountry.DataTextField = "Name"
                        ddlCountry.DataValueField = "ID"
                        ddlCountry.DataBind()
                        con.Close()
                    End Using
                End Using
                ddlCountry.Items.Insert(0, New ListItem("--Select Country--", "0"))
            End If
        End Sub
        Protected Sub ddlCountry_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
            Dim constr As String = ConfigurationManager.ConnectionStrings("cons").ConnectionString
            Using con As SqlConnection = New SqlConnection(constr)
                Using cmd As SqlCommand = New SqlCommand("SELECT ID, Name FROM tblCity where CountryID=" & ddlCountry.SelectedItem.Value & "")
                    cmd.CommandType = CommandType.Text
                    cmd.Connection = con
                    con.Open()
                    ddlCity.DataSource = cmd.ExecuteReader()
                    ddlCity.DataTextField = "Name"
                    ddlCity.DataValueField = "ID"
                    ddlCity.DataBind()
                    con.Close()
                End Using
            End Using
            ddlCity.Items.Insert(0, New ListItem("--Select City--", "0"))
        End Sub

        Protected Sub ddlCity_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
            lblMessage.Text = "You selected --->" & ddlCountry.SelectedItem.Text & "--->" + ddlCity.SelectedItem.Text & ""
        End Sub
    End Class
End Namespace

Please mail me at hemanta@webcodespider.net if you want any code solution from me. 

Thank You 😊 

How to Validate RadioButtonList using JavaScript in ASP.Net

India

Comments

Post a Comment