Search code examples
c#.netcascadingdropdown

Cascading dropdown not populating


I have been following the following example to create some cascading dropdowns in a web application. The example does not use jquery and I would like to stick with this for now. https://www.aspsnippets.com/Articles/Populate-Cascading-DropDownList-from-Database-in-ASPNet-Example.aspx

I am having trouble getting my second dropdown to populate a list using the result from the first. Here is my code:

 protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        CategorySelect.Items.Clear();
       CategorySelect.Items.Add(new ListItem("--Select Activity--", ""));

        CategorySelect.AppendDataBoundItems = true;
        String strConnString = ConfigurationManager
            .ConnectionStrings["iSAMSConnectionString"].ConnectionString;
        String strQuery = "select TblActivityManagerFolderID, txtName from dbo.TblActivityManagerFolder";
        SqlConnection con = new SqlConnection(strConnString);
        SqlCommand cmd = new SqlCommand();
        cmd.CommandType = CommandType.Text;
        cmd.CommandText = strQuery;
        cmd.Connection = con;
        try
        {
            con.Open();
            CategorySelect.DataSource = cmd.ExecuteReader();
            CategorySelect.DataTextField = "txtName";
            CategorySelect.DataValueField = "TblActivityManagerFolderID";
            CategorySelect.DataBind();
        }
        finally
        {
            con.Close();
            con.Dispose();
        }
    }
}
protected void ActivitySelect_SelectedIndexChanged(object sender, EventArgs e)
{
    ActivitySelect.Items.Clear();
    ActivitySelect.Items.Add(new ListItem("--Select Activity--", ""));

    ActivitySelect.AppendDataBoundItems = true;
    String strConnString = ConfigurationManager
        .ConnectionStrings["iSAMSConnectionString"].ConnectionString;
    String strQuery = "select txtName, TblActivityManagerGroupID from dbo.TblActivityManagerGroup " +
                       "where intFolder=@txtName";
    SqlConnection con = new SqlConnection(strConnString);
    SqlCommand cmd = new SqlCommand();
    cmd.Parameters.AddWithValue("@txtName",
        CategorySelect.SelectedItem.Value);
    cmd.CommandType = CommandType.Text;
    cmd.CommandText = strQuery;
    cmd.Connection = con;
    try
    {
        con.Open();
        ActivitySelect.DataSource = cmd.ExecuteReader();
        ActivitySelect.DataTextField = "txtName";
        ActivitySelect.DataValueField = "TblActivityManagerGroupID";
        ActivitySelect.DataBind();
        if (ActivitySelect.Items.Count > 1)
        {
            ActivitySelect.Enabled = true;
        }
        else
        {
            ActivitySelect.Enabled = false;
        }
    }
    finally
    {
        con.Close();
        con.Dispose();
    }
}

I am using 2 tables.

TblActivityManagerFolder where I am using 2 fields - TblActivityManagerFolderID and txtName

TblActivityManagerGroup where I am using 2 fields - intFolder (which joins to TblActivityManagerFolderID) and txtName

My first drop down populates exactly as expected, but when I make a selection nothing at all happens in the 2nd dropdown.

Additional Code:

<asp:SqlDataSource ID="iSAMS" runat="server" ConnectionString="<%$ ConnectionStrings:iSAMSConnectionString %>" 
                SelectCommand="SELECT [blnActive], [TblActivityManagerFolderID], [txtName] FROM [TblActivityManagerFolder] WHERE ([intActivity] = @intActivity)">
            <SelectParameters>
                <asp:Parameter DefaultValue="34" Name="intActivity" Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>
                </div>

            <div class="auto-style18">

        <asp:DropDownList ID="CategorySelect" runat="server" DataTextField="txtName" DataValueField="TblActivityManagerFolderID" 
            OnSelectedIndexChanged="ActivitySelect_SelectedIndexChanged" CssClass="newStyle1">
        </asp:DropDownList>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="CategorySelect" 
                    ErrorMessage="Please select your answer" style="text-align: left; font-weight: 700; color: #FF0000; font-size: medium;">!</asp:RequiredFieldValidator>
            </div>
        
           <br />
            <div class="auto-style19">
                <div class="auto-style20">
                Please select the activity undertaken from the pick list:&nbsp; 
                <asp:DropDownList ID="ActivitySelect" runat="server" DataSourceID="iSAMSActivity" DataTextField="txtName" DataValueField="TblActivityManagerGroupId" CssClass="newStyle1" OnSelectedIndexChanged="ActivitySelect_SelectedIndexChanged">
        </asp:DropDownList>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="ActivitySelect" 
                    ErrorMessage="Please select your answer" style="text-align: left; font-weight: 700; color: #FF0000; font-size: medium;">!</asp:RequiredFieldValidator>
                <asp:SqlDataSource ID="iSAMSActivity" runat="server" ConnectionString="<%$ ConnectionStrings:iSAMSConnectionString %>" SelectCommand="SELECT [txtName], [intActivity], [intFolder], [TblActivityManagerGroupId] FROM [TblActivityManagerGroup] WHERE ([intFolder] = @intFolder)">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="CategorySelect" Name="intFolder" PropertyName="SelectedValue" Type="Int32" />
                    </SelectParameters>
            </asp:SqlDataSource>                    

I am also posting back the results so I can see if this is working using:

protected void Button1_Click(object sender, EventArgs e)
    {
        var activity = CategorySelect.DataTextField;
        var CoCActivity = ActivitySelect.DataTextField;
        var OtherSkills = SkillsTextBox.Text;
        var ExtraDev = DevTextBox.Text;
        var OtherActivities = OtherActivitiesTextBox.Text;
        OutputLabel.Text = activity + "<br/>" + CoCActivity + "<br/>" + OtherSkills + "<br/>" + ExtraDev + "<br/>" + OtherActivities;
    }

When it is posting back, it is producing an integer rather than the label in the dropdown list. Can this be changed so it post backs the actual text?


Solution

  • Set the AutoPostBack property of the DropdownList to True. If you dont set it, the event would be only be triggered server side when other events force a postback (a button click or similar)