In this article I’ll show you how we can cascade one dropdownlist with other dropdownlist in asp.net using C#. Here I had taken three dropdownlist – Country, State and City. You will see how we get data in state dropdownlist based on the data of country dropdownlist. So here we go!
INITIAL CHAMBER:
Step1) Open your VS10, Create an empty Website [I hope you will get the idea of creating empty website from my previous articles]. Name it as – Cascade_dropdownlist_demo.
Step2 ) In Solution Explorer, Right Click on your website -> Add New Item -> Web Form. Name it as dropdownlist_demo.aspx [Or whatever you want to give the name. No compulsion. :P]. In Solution Explorer you will get your dropdownlist_demo.aspx and dropdownlist.aspx.cs both files.
Step3) Again you have to get to -> Add New Item and Select -> SQL Server Database. [You know very well what we have to do if they prompt you by asking - Would you like to place your Database inside App_Data_Folder? Do it “Yes” – Always ☺ ]. You will get your Database in Server Explorer [CTRL + ALT + S].
DATABASE CHAMBER:
Step4) In Server Explorer, Click on arrow sign of your Database [“Database.mdf”]. Go to tables-> Right Click -> Add New Table.
- Country Table : tbl_country [Don’t Forgot – IS INDENTITY = “TRUE”]
- State Table : tbl_State [IS IDENTITY=”TRUE”]
- City Table : tbl_city [IS IDENTITY= “TRUE”]
Make “Is Identity – True”. Don’t forgot it. Another thing is Data of tables that you have to enter manually. Just right click on your tables (country, state, city) -> Show Table Data Here you have to add all the data that will be shown in dropdownlist when we will run our project.
DESIGN CHAMBER:
Step5) Open your dropdownlist.aspx from Solution Explorer and start design your application.
Cook It Like this:
Here is your Design Code:
<form id="form1" runat="server">
<table style="width: 100%; height: 86px;">
<tr>
<td class="style1">
<asp:Label ID="Label1" runat="server" Text="Choose Your Country :"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
DataTextField="country_name" DataValueField="country_id" AppendDataBoundItems="true"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="0">--Select Country--</asp:ListItem>
</asp:DropDownList>
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label ID="Label2" runat="server" Text="Choose Your State :"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList2" runat="server" AppendDataBoundItems="true" DataTextField="state_name"
DataValueField="state_id" AutoPostBack="True"
onselectedindexchanged="DropDownList2_SelectedIndexChanged">
<asp:ListItem Value="0">-- Select State--</asp:ListItem>
</asp:DropDownList>
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label ID="Label3" runat="server" Text="Choose Your City :"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList3" runat="server" AppendDataBoundItems="true" DataTextField="city_name"
DataValueField="city_id">
<asp:ListItem Value="0">-- Select City--</asp:ListItem>
</asp:DropDownList>
</td>
<td>
</td>
</tr>
</table>
<div>
</div>
</form>
CODING CHAMBER:
Step6) Now we are entering into our Code Zone. Let’s Begin by adding some Namespaces:
Here is the Code for cascading more than one dropdown list in asp.net:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
SqlCommand cmd = new SqlCommand("select * from tbl_country", con);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
sda.Fill(dt);
DropDownList1.DataSource = dt;
DropDownList1.DataBind();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList2.Items.Clear();
DropDownList2.Items.Add("Select State");
SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
SqlCommand cmd = new SqlCommand("select * from tbl_state where country_id=" + DropDownList1.SelectedItem.Value, con);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
sda.Fill(dt);
DropDownList2.DataSource= dt;
DropDownList2.DataBind();
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList3.Items.Clear();
DropDownList3.Items.Add("Select State");
SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
SqlCommand cmd = new SqlCommand("select * from tbl_city where state_id=" + DropDownList2.SelectedItem.Value, con);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
sda.Fill(dt);
DropDownList3.DataSource = dt;
DropDownList3.DataBind();
}
You can get your Connection String by going to you database (in server explorer)→ right Click→ Properties you can see there “Connection String”. Copy it and paste it in the Sql connection field. Yeah! Surely your connection string is quite different from me, initially it look like this:
Before:
Connection String → ("Data Source=.\SQLEXPRESS;AttachDbFilename="C:\Users\Nilesh\Documents\Visual Studio 2010\WebSites\WebSite13\App_Data\Database.mdf";Integrated Security=True;User Instance=True");
You have to remove the path and make it short like:
C:\Users\Nilesh\Documents\Visual Studio 2010\WebSites\WebSite13\App_Data -- > Remove this
And add instead of this |DataDirectory|
After:
Modified Connection String →(@"DataSource=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
OUTPUT CHAMBER:
HOPE YOU LIKE IT ☺ ENJOY YOUR DAY WITH THIS TUTORIAL.
No comments:
Post a Comment