In many web applications we want to load a control based on what is selected in another control. For example, loading a ListBox control or a DropDownList control based on what is selected in another ListBox or DropDownList control. The situation is not limited to only these controls but could also use RadioButtonList, CheckBoxList controls, etc.
In this example, I have created a page that populates ListBox control with States value based on what Country is selected in another ListBox. I have added 2 ListBox controls – for State and Country, a Button and a Label control to the page. From code-behind page, I have created a DataTable that holds the country and corresponding state values. When an item is selected from Country ListBox, the State ListBox is populated. The AutoPostBack property for Country ListBox is set to true and SelectedIndexChanged event is implemented.
When the Button is clicked, the Label control’s Text property is populated to display the state and country that has been selected from the ListBox controls. The code for the aspx page and code-behind is below.
- <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="LoadListboxFromDatatable.aspx.cs" Inherits="WebApplication1.LoadListboxFromDatatable" %>
- <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
- </asp:Content>
- <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
- <asp:ListBox ID="ListBoxCountry" runat="server" AutoPostBack="True"
- onselectedindexchanged="ListBoxCountry_SelectedIndexChanged">
- <asp:ListItem>Select:</asp:ListItem>
- <asp:ListItem>Australia</asp:ListItem>
- <asp:ListItem>US</asp:ListItem>
- <asp:ListItem>India</asp:ListItem>
- </asp:ListBox>
- <asp:ListBox ID="ListBoxState" runat="server"></asp:ListBox>
- <br />
- <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Show" />
- <asp:Label ID="LStatus" runat="server"></asp:Label>
- </asp:Content>
- using System;
- using System.Data;
- namespace WebApplication1
- {
- public partial class LoadListboxFromDatatable : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- }
- protected void ListBoxCountry_SelectedIndexChanged(object sender, EventArgs e)
- {
- string country = ListBoxCountry.SelectedValue;
- ListBoxState.Items.Clear();
- foreach (DataRow rows in GetStates().Rows)
- {
- if (rows[0].ToString() == country)
- ListBoxState.Items.Add(rows[1].ToString());
- }
- }
- private DataTable GetStates()
- {
- DataTable dt = new DataTable();
- dt.Columns.Add("Country", typeof(string));
- dt.Columns.Add("State", typeof(string));
- dt.Rows.Add(new object[] { "US", "Los Angeles" });
- dt.Rows.Add(new object[] { "US", "Virginia" });
- dt.Rows.Add(new object[] { "US", "Ohio" });
- dt.Rows.Add(new object[] { "Australia", "NSW" });
- dt.Rows.Add(new object[] { "Australia", "Victoria" });
- dt.Rows.Add(new object[] { "Australia", "Tasmania" });
- dt.Rows.Add(new object[] { "India", "Maharastra" });
- dt.Rows.Add(new object[] { "India", "West Bengal" });
- dt.Rows.Add(new object[] { "India", "Assam" });
- return dt;
- }
- protected void Button1_Click(object sender, EventArgs e)
- {
- LStatus.Text = "Country: " + ListBoxCountry.SelectedValue + "; State: " + ListBoxState.SelectedValue;
- }
- }
- }