Introduction:
In the world of web development, enhancing user experience is a constant goal. One way to achieve this is by implementing dynamic features such as cascading dropdowns. In this article, we will delve into the process of populating one dropdown list based on the selection made in another dropdown list in ASP.NET using C#.
HTML Markup: Design Page
The foundation of our implementation lies in the HTML markup. Two dropdown lists, one for selecting the country and the other for the city, are incorporated into the design. The following HTML code snippet showcases the structure:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>Choose Country First : </td>
<td>
<asp:DropDownList ID="ddl_country" runat="server" Width="150px"
AutoPostBack="True" onselectedindexchanged="ddl_country_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Choose City : </td>
<td>
<asp:DropDownList ID="ddl_city" runat="server" Width="150px">
</asp:DropDownList><br />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btn_display" runat="server" Text="Display"
onclick="btn_display_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lbl_display" runat="server"></asp:Label>
</td>
</tr>
</table>
</form>
</body>
</html>
C# Coding: Namespace and Page Load
Moving on to the C# coding aspect, the article utilizes essential namespaces and implements the Page_Load method to ensure that dropdowns are appropriately populated during the page load. The GetCountry method is invoked to retrieve and bind country data.
// C# Coding: Namespace and Page Load
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Configuration;
using System.Data.OleDb;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ddl"].ConnectionString);
SqlCommand cmd;
SqlDataAdapter da;
DataSet ds = new DataSet();
string query;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetCountry();
ddl_city.Items.Insert(0, " No City Available ");
}
}
}
C# Coding: Get Country Method
The GetCountry method is pivotal in fetching country data from the database and populating the country dropdown list.
private void GetCountry()
{
query = "Select * from Country";
da = new SqlDataAdapter(query, con);
da.Fill(ds);
if (ds.Tables[0].Rows.Count > 0)
{
ddl_country.DataSource = ds;
ddl_country.DataTextField = "countryname";
ddl_country.DataValueField = "countryid";
ddl_country.DataBind();
ddl_country.Items.Insert(0, new ListItem(" Choose Country ", "0"));
ddl_country.SelectedIndex = 0;
}
}
C# Coding: Dropdownlist SelectedIndexChanged Event
The ddl_country_SelectedIndexChanged event is triggered when a country is selected. It dynamically fetches and populates the city dropdown based on the selected country.
// C# Coding: Dropdownlist SelectedIndexChanged Event
protected void ddl_country_SelectedIndexChanged(object sender, EventArgs e)
{
ds.Clear();
string get_countryname, countryname;
countryname = ddl_country.SelectedItem.Text;
get_countryname = ddl_country.SelectedValue.ToString();
if (get_countryname != "0")
{
query = "Select cityid, cityname from City where countryid='" + get_countryname.ToString() + "'";
da = new SqlDataAdapter(query, con);
da.Fill(ds);
if (ds.Tables[0].Rows.Count > 0)
{
ddl_city.DataSource = ds;
ddl_city.DataTextField = "cityname";
ddl_city.DataValueField = "cityid";
ddl_city.DataBind();
ddl_city.Items.Insert(0, new ListItem("Choose " + countryname.ToString() + " City ", "0"));
ddl_city.SelectedIndex = 0;
}
}
else
{
ddl_city.Items.Insert(0, " No City Available ");
ddl_city.DataBind();
}
}
C# Coding: Button Click Event
Finally, the btn_display_Click event captures the selected country and city, displaying the information in a user-friendly format.
protected void btn_display_Click(object sender, EventArgs e)
{
string display;
display = " Your Country : " + ddl_country.SelectedItem.Text + "
Your City : " + ddl_city.SelectedItem.Text + "";
lbl_display.Text = display;
}
}
Conclusion:
In this article, we have explored the step-by-step process of creating cascading dropdowns in ASP.NET using C#. By combining HTML markup and C# coding, developers can enhance the user interface and provide a seamless selection experience. Incorporating dynamic features not only improves user engagement but also showcases the power and versatility of ASP.NET with C#.
0 Comments