How do i build my editform in asp.net where two dropdowns are inter-dependent?

Question

i have a small problem, i am creating a edit page in my asp.net application where the user can edit properties in an object. I have two dropdowns (category and group) where the amount of groups is dependent on the category chosen. My goal is to display the right category og the object being edited, then load the list of groups and select the correct group - problem is that my selectedindexchanged event is never fired.

When i load my categories in page_load and populate the categories the code looks like this:

protected void Page_Load(object sender, EventArgs e)
    { string editid= Request["edit"] == null ? null : Request["edit"].ToString();
        int id = Convert.ToInt32(editid);
        if (link == null)
        {
            link = BLLink.Load(id, blm);
        }
        if (!IsPostBack)
        {
            group = BLGroup.Load(link.GroupId, blm);
            category = BLCategory.Load(group.CategoryId, blm);

            List<BLCategory> categories = BLCategory.LoadAll();
            categoryDropDown.DataSource = categories;
            categoryDropDown.DataTextField = "CategoryName";
            categoryDropDown.DataValueField = "id";
            categoryDropDown.SelectedValue = category.id.ToString(); //this one doesnt cause the event to fire??? Doesnt matter if it is called after the databind() method
            categoryDropDown.DataBind();
        }

}

Theevent handler i would like to execute should load all the groups and populate the dropdown and select the correct one:

protected void categoryDropDown_SelectedIndexChanged(object sender, EventArgs e)
    {
        category = BLCategory.Load(Convert.ToInt32(categoryDropDown.SelectedValue), new TestModelDataContext());
        if (category != null)
        {
            List<BLGroup> groups = BLGroup.LoadAll(category.id);
            groupDropDown.DataSource = groups;
            groupDropDown.DataTextField = "GroupHeading";
            groupDropDown.DataValueField = "GroupId";
            groupDropDown.DataBind();
            if (group != null)
            {
                groupDropDown.SelectedValue = group.GroupId.ToString();
            }
            else
            {
                groupDropDown.SelectedIndex = 0;
            }
        }
    }

I dont know what is going wrong, this seems like a straightforward thing to do, what am I doing wrong?

Answer 1

To get this event to fire, the page needs to PostBack when the user's selection changes. This will cause the entire page to refresh (but controls should retain their state).

This SelectedIndexChanged event is running on the server and I think there is a property on the first dropdown about submitting/postback when the selected item changes on it.

To get client-side behavior, you can do two things:
1) Wrap that section in an UpdatePanel and have the second list refresh when the first one's value changes
2) Load the values using JavaScript client-side code that fires when the selected value changes on the first one, retrieves the list and fills the second one
2a) You can either write a service that wraps the call to the data source and returns the values as JSON, etc., or 2b) You can fill all the values for every possible choice into hidden fields that are id'd in some way by the values in the first box (this is not desirable, but is possible depending on the security and size of your data sets).

Option 1 is probably the most straightforward way to retain your existing codebase and still get client-side behavior.