Here first we have to create a user control. so, i will take a empty web application name it as "UserControl"and in this i add a user control (to add user control right click on "UserControl" add new item
in the left hand side click on "web" after that click on "web user control" name it as "DrpDwn.ascx"
Write the following code in .ascx page:
<table>
<tr>
<td>
Select the country:
</td>
<td>
<asp:DropDownList ID="Ddl_Country" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Ddl_Country_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Select the State:
</td>
<td>
<asp:DropDownList ID="Ddl_State" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Ddl_State_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Select the City:
</td>
<td>
<asp:DropDownList ID="Ddl_City" runat="server">
</asp:DropDownList>
</td>
</tr>
</table>
Here i added above 3 dropdowns first one is for to select country,
second one is for to select state and last one is for getting list of cites
which you have selcted in the state dropdown.
write the following code in .ascx.cs page:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Ddl_Country.DataSource = Country_Data();
Ddl_Country.DataValueField = "Id";
Ddl_Country.DataTextField = "Country_Name";
Ddl_Country.DataBind();
Ddl_Country.Items.Insert(0, "Select");
Ddl_Country.Items[0].Value = "-1";
}
}
public DataTable Country_Data()
{
DataTable dt_CountryData = new DataTable();
dt_CountryData.Columns.Add("Id");
dt_CountryData.Columns.Add("Country_Name");
DataRow dr = dt_CountryData.NewRow();
dr["Id"] = "1";
dr["Country_Name"] = "India";
dt_CountryData.Rows.Add(dr);
DataRow dr1 = dt_CountryData.NewRow();
dr1["Id"] = "2";
dr1["Country_Name"] = "USA";
dt_CountryData.Rows.Add(dr1);
return dt_CountryData;
}
protected void Ddl_Country_SelectedIndexChanged(object sender, EventArgs e)
{
DataTable dt_StateData = new DataTable();
dt_StateData.Columns.Add("Id");
dt_StateData.Columns.Add("State_Name");
dt_StateData.Columns.Add("Country_Id");
DataRow dr = dt_StateData.NewRow();
dr["Id"] = "1";
dr["State_Name"] = "Andhrapradesh";
dr["Country_Id"] = "1";
dt_StateData.Rows.Add(dr);
DataRow dr1 = dt_StateData.NewRow();
dr1["Id"] = "2";
dr1["State_Name"] = "Tamilnadu";
dr1["Country_Id"] = "1";
dt_StateData.Rows.Add(dr1);
DataRow dr2 = dt_StateData.NewRow();
dr2["Id"] = "3";
dr2["State_Name"] = "California";
dr2["Country_Id"] = "2";
dt_StateData.Rows.Add(dr2);
DataRow dr3 = dt_StateData.NewRow();
dr3["Id"] = "4";
dr3["State_Name"] = "Indiana";
dr3["Country_Id"] = "2";
dt_StateData.Rows.Add(dr3);
DataView view = dt_StateData.DefaultView;
view.RowFilter = "Country_Id =" + Ddl_Country.SelectedValue;
view.Table.Columns.Remove("Country_Id");
Ddl_State.DataSource = view.Table;
Ddl_State.DataValueField = "Id";
Ddl_State.DataTextField = "State_Name";
Ddl_State.DataBind();
Ddl_State.Items.Insert(0, "Select");
Ddl_State.Items[0].Value = "-1";
Ddl_City.ClearSelection();
Ddl_City.Items.Clear();
}
protected void Ddl_State_SelectedIndexChanged(object sender, EventArgs e)
{
DataTable dt_CityData = new DataTable();
dt_CityData.Columns.Add("City_Id");
dt_CityData.Columns.Add("City_Name");
dt_CityData.Columns.Add("State_Id");
DataRow dr = dt_CityData.NewRow();
dr["City_Id"] = "1";
dr["City_Name"] = "Visakhapatnam";
dr["State_Id"] = "1";
dt_CityData.Rows.Add(dr);
DataRow dr1 = dt_CityData.NewRow();
dr1["City_Id"] = "2";
dr1["City_Name"] = "Hyderabad";
dr1["State_Id"] = "1";
dt_CityData.Rows.Add(dr1);
DataRow dr2 = dt_CityData.NewRow();
dr2["City_Id"] = "3";
dr2["City_Name"] = "Vijayawada";
dr2["State_Id"] = "1";
dt_CityData.Rows.Add(dr2);
DataRow dr3 = dt_CityData.NewRow();
dr3["City_Id"] = "4";
dr3["City_Name"] = "Coimbatore";
dr3["State_Id"] = "2";
dt_CityData.Rows.Add(dr3);
DataRow dr4 = dt_CityData.NewRow();
dr4["City_Id"] = "5";
dr4["City_Name"] = "Madurai";
dr4["State_Id"] = "2";
dt_CityData.Rows.Add(dr4);
DataRow dr5 = dt_CityData.NewRow();
dr5["City_Id"] = "6";
dr5["City_Name"] = "Tiruvarur";
dr5["State_Id"] = "2";
dt_CityData.Rows.Add(dr5);
DataRow dr6 = dt_CityData.NewRow();
dr6["City_Id"] = "7";
dr6["City_Name"] = "Los Angeles";
dr6["State_Id"] = "3";
dt_CityData.Rows.Add(dr6);
DataRow dr7 = dt_CityData.NewRow();
dr7["City_Id"] = "8";
dr7["City_Name"] = "Woodland";
dr7["State_Id"] = "3";
dt_CityData.Rows.Add(dr7);
DataRow dr8 = dt_CityData.NewRow();
dr8["City_Id"] = "9";
dr8["City_Name"] = "San Diego";
dr8["State_Id"] = "3";
dt_CityData.Rows.Add(dr8);
DataRow dr9 = dt_CityData.NewRow();
dr9["City_Id"] = "10";
dr9["City_Name"] = "lawrence";
dr9["State_Id"] = "4";
dt_CityData.Rows.Add(dr9);
DataRow dr10 = dt_CityData.NewRow();
dr10["City_Id"] = "11";
dr10["City_Name"] = "south-bend";
dr10["State_Id"] = "4";
dt_CityData.Rows.Add(dr10);
DataRow dr11 = dt_CityData.NewRow();
dr11["City_Id"] = "12";
dr11["City_Name"] = "Terre Haute";
dr11["State_Id"] = "4";
dt_CityData.Rows.Add(dr11);
DataView CityView = dt_CityData.DefaultView;
CityView.RowFilter = "State_Id =" + Ddl_State.SelectedValue;
CityView.Table.Columns.Remove("State_Id");
Ddl_City.DataSource = CityView;
Ddl_City.DataValueField = "City_Id";
Ddl_City.DataTextField = "City_Name";
Ddl_City.DataBind();
}
public ArrayList SelectedText
{
get
{
ArrayList SelectedText = new ArrayList();
if (Ddl_Country.SelectedIndex != -1 && Ddl_Country.SelectedIndex != 0)
SelectedText.Add(Ddl_Country.SelectedItem.ToString());
else
SelectedText.Add(null);
if (Ddl_State.SelectedIndex != -1 && Ddl_State.SelectedIndex != 0)
SelectedText.Add(Ddl_State.SelectedItem.ToString());
else
SelectedText.Add(null);
if (Ddl_City.SelectedIndex != -1)
SelectedText.Add(Ddl_City.SelectedItem.ToString());
else
SelectedText.Add(null);
return SelectedText;
}
}
public ArrayList SelectedText
{
get
{
ArrayList selectedValues = new ArrayList();
if (Ddl_Country.SelectedIndex != -1 && Ddl_Country.SelectedIndex != 0)
selectedValues.Add(Ddl_Country.SelectedValue.ToString());
else
selectedValues.Add(null);
if (Ddl_State.SelectedIndex != -1 && Ddl_State.SelectedIndex != 0)
selectedValues.Add(Ddl_State.SelectedValue.ToString());
else
selectedValues.Add(null);
if (Ddl_City.SelectedIndex != -1 )
selectedValues.Add(Ddl_City.SelectedValue.ToString());
else
selectedValues.Add(null);
return selectedValues;
}
}
Here i created 2 properties for the user control like SelectedText, SelectedText. As per my requirement i added above.
Now take a new aspx page and name it as "page1.aspx"
write the code in aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="page1.aspx.cs" Inherits="UserControl_DrpDwn.page1" %>
<%@ Register TagPrefix="uc" TagName="Dropdown" Src="~/DrpDwn.ascx" %>
<!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">
<script type="text/javascript">
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc:Dropdown ID="uc1" runat="server" />
</div>
<div>
<asp:Button ID="btnNames" Text="Click" runat="server"
OnClick="btnNames_Click" /></div>
<div>
<asp:Label ID="lbltext" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
now go to code behind:
protected void btnNames_Click(object sender, EventArgs e)
{
ArrayList Name = uc1.SelectedText;
String strNames = null;
foreach (var item in Name)
{
strNames += item + ",";
}
strNames = strNames.TrimEnd(',');
lbltext.Text = strNames;
ArrayList Name1 = uc1.SelectedValues;
String strNames1 = null;
foreach (var item in Name1)
{
strNames1+= item + ",";
}
strNames1 = strNames1.TrimEnd(',');
label.Text = strNames1;
}
you will get the properties.you can use here. i think so you guys learnt how to create a user control in Dotnet.
Thanks for reading.
in the left hand side click on "web" after that click on "web user control" name it as "DrpDwn.ascx"
Write the following code in .ascx page:
<table>
<tr>
<td>
Select the country:
</td>
<td>
<asp:DropDownList ID="Ddl_Country" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Ddl_Country_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Select the State:
</td>
<td>
<asp:DropDownList ID="Ddl_State" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Ddl_State_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Select the City:
</td>
<td>
<asp:DropDownList ID="Ddl_City" runat="server">
</asp:DropDownList>
</td>
</tr>
</table>
Here i added above 3 dropdowns first one is for to select country,
second one is for to select state and last one is for getting list of cites
which you have selcted in the state dropdown.
write the following code in .ascx.cs page:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Ddl_Country.DataSource = Country_Data();
Ddl_Country.DataValueField = "Id";
Ddl_Country.DataTextField = "Country_Name";
Ddl_Country.DataBind();
Ddl_Country.Items.Insert(0, "Select");
Ddl_Country.Items[0].Value = "-1";
}
}
public DataTable Country_Data()
{
DataTable dt_CountryData = new DataTable();
dt_CountryData.Columns.Add("Id");
dt_CountryData.Columns.Add("Country_Name");
DataRow dr = dt_CountryData.NewRow();
dr["Id"] = "1";
dr["Country_Name"] = "India";
dt_CountryData.Rows.Add(dr);
DataRow dr1 = dt_CountryData.NewRow();
dr1["Id"] = "2";
dr1["Country_Name"] = "USA";
dt_CountryData.Rows.Add(dr1);
return dt_CountryData;
}
protected void Ddl_Country_SelectedIndexChanged(object sender, EventArgs e)
{
DataTable dt_StateData = new DataTable();
dt_StateData.Columns.Add("Id");
dt_StateData.Columns.Add("State_Name");
dt_StateData.Columns.Add("Country_Id");
DataRow dr = dt_StateData.NewRow();
dr["Id"] = "1";
dr["State_Name"] = "Andhrapradesh";
dr["Country_Id"] = "1";
dt_StateData.Rows.Add(dr);
DataRow dr1 = dt_StateData.NewRow();
dr1["Id"] = "2";
dr1["State_Name"] = "Tamilnadu";
dr1["Country_Id"] = "1";
dt_StateData.Rows.Add(dr1);
DataRow dr2 = dt_StateData.NewRow();
dr2["Id"] = "3";
dr2["State_Name"] = "California";
dr2["Country_Id"] = "2";
dt_StateData.Rows.Add(dr2);
DataRow dr3 = dt_StateData.NewRow();
dr3["Id"] = "4";
dr3["State_Name"] = "Indiana";
dr3["Country_Id"] = "2";
dt_StateData.Rows.Add(dr3);
DataView view = dt_StateData.DefaultView;
view.RowFilter = "Country_Id =" + Ddl_Country.SelectedValue;
view.Table.Columns.Remove("Country_Id");
Ddl_State.DataSource = view.Table;
Ddl_State.DataValueField = "Id";
Ddl_State.DataTextField = "State_Name";
Ddl_State.DataBind();
Ddl_State.Items.Insert(0, "Select");
Ddl_State.Items[0].Value = "-1";
Ddl_City.ClearSelection();
Ddl_City.Items.Clear();
}
protected void Ddl_State_SelectedIndexChanged(object sender, EventArgs e)
{
DataTable dt_CityData = new DataTable();
dt_CityData.Columns.Add("City_Id");
dt_CityData.Columns.Add("City_Name");
dt_CityData.Columns.Add("State_Id");
DataRow dr = dt_CityData.NewRow();
dr["City_Id"] = "1";
dr["City_Name"] = "Visakhapatnam";
dr["State_Id"] = "1";
dt_CityData.Rows.Add(dr);
DataRow dr1 = dt_CityData.NewRow();
dr1["City_Id"] = "2";
dr1["City_Name"] = "Hyderabad";
dr1["State_Id"] = "1";
dt_CityData.Rows.Add(dr1);
DataRow dr2 = dt_CityData.NewRow();
dr2["City_Id"] = "3";
dr2["City_Name"] = "Vijayawada";
dr2["State_Id"] = "1";
dt_CityData.Rows.Add(dr2);
DataRow dr3 = dt_CityData.NewRow();
dr3["City_Id"] = "4";
dr3["City_Name"] = "Coimbatore";
dr3["State_Id"] = "2";
dt_CityData.Rows.Add(dr3);
DataRow dr4 = dt_CityData.NewRow();
dr4["City_Id"] = "5";
dr4["City_Name"] = "Madurai";
dr4["State_Id"] = "2";
dt_CityData.Rows.Add(dr4);
DataRow dr5 = dt_CityData.NewRow();
dr5["City_Id"] = "6";
dr5["City_Name"] = "Tiruvarur";
dr5["State_Id"] = "2";
dt_CityData.Rows.Add(dr5);
DataRow dr6 = dt_CityData.NewRow();
dr6["City_Id"] = "7";
dr6["City_Name"] = "Los Angeles";
dr6["State_Id"] = "3";
dt_CityData.Rows.Add(dr6);
DataRow dr7 = dt_CityData.NewRow();
dr7["City_Id"] = "8";
dr7["City_Name"] = "Woodland";
dr7["State_Id"] = "3";
dt_CityData.Rows.Add(dr7);
DataRow dr8 = dt_CityData.NewRow();
dr8["City_Id"] = "9";
dr8["City_Name"] = "San Diego";
dr8["State_Id"] = "3";
dt_CityData.Rows.Add(dr8);
DataRow dr9 = dt_CityData.NewRow();
dr9["City_Id"] = "10";
dr9["City_Name"] = "lawrence";
dr9["State_Id"] = "4";
dt_CityData.Rows.Add(dr9);
DataRow dr10 = dt_CityData.NewRow();
dr10["City_Id"] = "11";
dr10["City_Name"] = "south-bend";
dr10["State_Id"] = "4";
dt_CityData.Rows.Add(dr10);
DataRow dr11 = dt_CityData.NewRow();
dr11["City_Id"] = "12";
dr11["City_Name"] = "Terre Haute";
dr11["State_Id"] = "4";
dt_CityData.Rows.Add(dr11);
DataView CityView = dt_CityData.DefaultView;
CityView.RowFilter = "State_Id =" + Ddl_State.SelectedValue;
CityView.Table.Columns.Remove("State_Id");
Ddl_City.DataSource = CityView;
Ddl_City.DataValueField = "City_Id";
Ddl_City.DataTextField = "City_Name";
Ddl_City.DataBind();
}
public ArrayList SelectedText
{
get
{
ArrayList SelectedText = new ArrayList();
if (Ddl_Country.SelectedIndex != -1 && Ddl_Country.SelectedIndex != 0)
SelectedText.Add(Ddl_Country.SelectedItem.ToString());
else
SelectedText.Add(null);
if (Ddl_State.SelectedIndex != -1 && Ddl_State.SelectedIndex != 0)
SelectedText.Add(Ddl_State.SelectedItem.ToString());
else
SelectedText.Add(null);
if (Ddl_City.SelectedIndex != -1)
SelectedText.Add(Ddl_City.SelectedItem.ToString());
else
SelectedText.Add(null);
return SelectedText;
}
}
public ArrayList SelectedText
{
get
{
ArrayList selectedValues = new ArrayList();
if (Ddl_Country.SelectedIndex != -1 && Ddl_Country.SelectedIndex != 0)
selectedValues.Add(Ddl_Country.SelectedValue.ToString());
else
selectedValues.Add(null);
if (Ddl_State.SelectedIndex != -1 && Ddl_State.SelectedIndex != 0)
selectedValues.Add(Ddl_State.SelectedValue.ToString());
else
selectedValues.Add(null);
if (Ddl_City.SelectedIndex != -1 )
selectedValues.Add(Ddl_City.SelectedValue.ToString());
else
selectedValues.Add(null);
return selectedValues;
}
}
Here i created 2 properties for the user control like SelectedText, SelectedText. As per my requirement i added above.
Now take a new aspx page and name it as "page1.aspx"
write the code in aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="page1.aspx.cs" Inherits="UserControl_DrpDwn.page1" %>
<%@ Register TagPrefix="uc" TagName="Dropdown" Src="~/DrpDwn.ascx" %>
<!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">
<script type="text/javascript">
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc:Dropdown ID="uc1" runat="server" />
</div>
<div>
<asp:Button ID="btnNames" Text="Click" runat="server"
OnClick="btnNames_Click" /></div>
<div>
<asp:Label ID="lbltext" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
now go to code behind:
protected void btnNames_Click(object sender, EventArgs e)
{
ArrayList Name = uc1.SelectedText;
String strNames = null;
foreach (var item in Name)
{
strNames += item + ",";
}
strNames = strNames.TrimEnd(',');
lbltext.Text = strNames;
ArrayList Name1 = uc1.SelectedValues;
String strNames1 = null;
foreach (var item in Name1)
{
strNames1+= item + ",";
}
strNames1 = strNames1.TrimEnd(',');
label.Text = strNames1;
}
you will get the properties.you can use here. i think so you guys learnt how to create a user control in Dotnet.
Thanks for reading.