Cascading DropDownList in Asp.net

Question

Let me preface this by saying this is an effort on my part to learn some more C#/.net and web development. So this may be something obvious, but I'm not seeing it.

I'm trying to create a cascading DropDownList. I've seen several examples, but they all seem to query a database to get their entries. Mine is much simpler. Based on the value of the first dropdown, I'll manually populate the second one. However, I don't seem to be getting OnSelectedIndexChange to fire. At least, DropDownList1_SelectedIndexChanged doesn't seem to be executed.

Here's the HTML:

<asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="DropDownList1" runat="server" style="z-index: 1; margin-top: 40px; width: 150px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">
        </asp:DropDownList><br/>
        <asp:DropDownList ID="DropDownList2" runat="server" style="z-index: 1; margin-top: 10px; width: 150px">
        </asp:DropDownList><br/>
    </ContentTemplate>
</asp:UpdatePanel>

And here's the C#:

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        TextBox2.Text = "Changed";
        DropDownList1.Items.Clear();
        switch (DropDownList1.Text)
        {
            case "Caesar Tools":
                DropDownList2.Items.Add("Caesar Bruteforce");
                DropDownList2.Items.Add("ROT-1");
                DropDownList2.Items.Add("ROT-2");
                DropDownList2.SelectedIndex = 1;
                break;
            case "ASCII Tools":
                DropDownList2.Items.Add("Decimal to ASCII");
                DropDownList2.Items.Add("Hex to ASCII");
                DropDownList2.Items.Add("Binary to ASCII");
                DropDownList2.SelectedIndex = 0;
                break;
            default:
                break;
        }
    }

What am I missing?

Thanks!

Answer 1

Well, there's actually a bug/typo in your code. If you look at the method, DropDownList1_SelectedIndexChanged more closely, you will find this line suspicious.

DropDownList1.Items.Clear();

My guess is that you would like to clear the items for DropDownList2 control, not DropDownList1 control, when the selection from DropDownList1 control is changed.

I have attached the markups and code behind below, for your reference.

ASPX Markup

<asp:ScriptManager runat="server" ID="sm1"></asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server" Style="z-index: 1; margin-top: 40px; width: 150px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">
                        <asp:ListItem Text="" Value=""></asp:ListItem>
                        <asp:ListItem Text="Caesar Tools" Value="Caesar Tools"></asp:ListItem>
                        <asp:ListItem Text="ASCII Tools" Value="ASCII Tools"></asp:ListItem>
                    </asp:DropDownList><br />
                    <asp:DropDownList ID="DropDownList2" runat="server" Style="z-index: 1; margin-top: 10px; width: 150px">
                    </asp:DropDownList><br />
                </ContentTemplate>
            </asp:UpdatePanel>

ASPX.cs Code Behind

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            DropDownList2.Items.Clear();
            switch (DropDownList1.Text)
            {
                case "Caesar Tools":
                    DropDownList2.Items.Add("Caesar Bruteforce");
                    DropDownList2.Items.Add("ROT-1");
                    DropDownList2.Items.Add("ROT-2");
                    DropDownList2.SelectedIndex = 1;
                    DropDownList2.DataBind();
                    break;
                case "ASCII Tools":
                    DropDownList2.Items.Add("Decimal to ASCII");
                    DropDownList2.Items.Add("Hex to ASCII");
                    DropDownList2.Items.Add("Binary to ASCII");
                    DropDownList2.SelectedIndex = 0;
                    DropDownList2.DataBind();
                    break;
                default:
                    break;
            }
        }

Hope this helps.