Subscribe

RSS Feed (xml)

Creating Dependent DropDownList Controls in ASP.NET

You can solve this issue by:
n Dynamically filling the DropDownList controls with data
n Catching the SelectedIndexChanged event from the control where the selection
changes
When you want the contents of a DropDownList control (referred to as the slave control)
to depend on the contents of another DropDownList control (referred to as the
master control), you need to signal this slave control when the selected item in the master
control changes.The result of this is a rewrite of the contents of the slave control.

The ASPX page is as follows:
<html>
<body>
<form id=”dependingdropdowns” method=”post” runat=”server”>
<asp:DropDownList id=”countryList” runat=”server”
AutoPostBack=”True”
OnSelectedIndexChanged=”SelectedIndexChangedEventHandler”/>
<asp:DropDownList id=”cityList” runat=”server” />
</form>
</body>
</html>
The master control has the AutoPostBack property set to True.This allows an
immediate postback of the form when the selection changes. Otherwise, it is
impossible to rewrite the contents of the slave control.When the selection changes
in the master control, the SelectedIndexChanged event will be raised and the
SelectedIndexChangedEventHandler function will be executed.
In <script runat=”server” /> block or codebehind:
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
countryList.Items.Add(New ListItem(“- Make a selection -”))
countryList.Items.Add(New ListItem(“Belgium”, “B”))
countryList.Items.Add(New ListItem(“France”, “F”))
End If
End Sub
The first time the page is shown, the contents of the master control will be set.The initial
selection will be the Make a selection option. In the same block or codebehind,
you also have:
Private Sub SelectedIndexChangedEventHandler( _
ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles countryList.SelectedIndexChanged
cityList.Items.Clear()
If countryList.SelectedItem.Value = “B” Then
cityList.Items.Add(New ListItem(“Brussels”))
cityList.Items.Add(New ListItem(“Antwerp”))
cityList.Items.Add(New ListItem(“Ghent”))
ElseIf countryList.SelectedItem.Value = “F” Then
cityList.Items.Add(New ListItem(“Paris”))
cityList.Items.Add(New ListItem(“Lyon”))
cityList.Items.Add(New ListItem(“Bordeaux”))
End If
End Sub

This is the core of the process. In this code block, the contents of the slave control are
set, depending on the selection in the master control.This happens only if a valid selection
for the master control is made (in this case, when a country is selected).This function
is called any time the selection in the master control changes.


This example covers the situation in which one slave control depends on one master
control.The technique can be extended.When several slaves depend on one master control,
you have to set the contents of all slave controls in the SelectedIndexChanged
event handler.When you want a third control to depend on the second one, you have to
set the AutoPostBack property to True for the second DropDownList, and add an event
handler to the SelectedIndexChanged event for this control.The technique to rewrite
this third combo is similar to the earlier technique.You simply have to make sure that
when the selection of the first combo changes, both selections for the second and third
are set to a valid option.

No comments:

Archives

Variety in the Web World