Summary

AJAX Control Toolkit contains a cascading dropdown control, where the results shown in the child dropdown depend on the parent dropdown. There is a way to AJAX-ify existing cascading dropdowns without using the AJAX Control Toolkit.

Here we have two related dropdown list boxes: Category and SubCategory. The scenario here is to fill the ddlCategory dropdown with category values; and when a different category is selected in this list, appropriate sub categories would need to be shown in ddlSubCategory dropdown. The Dropdowns First, the two drop down lists:

<asp:DropDownList ID="ddlCategory" runat="server" Width="158px" DataSourceID="sdsCategory"
DataTextField="ID" AutoPostBack="True">
</asp:DropDownList>

<asp:DropDownList ID="ddlSubCategory" runat="server" Width="157px" DataSourceID="sdsSubCategory"
DataTextField="ID">
</asp:DropDownList>

Each of these drop downs get their data from its own SqlDataSource control. According to which field contains the the data you want to display, set the DataTextField of DropDownList. In this case, it so happens that the fields we want to display are named ID. It is important to note here that the category drop down has AutoPostBack set to True. Without this post back, the sub categories dropdown will not be updated when a different category is selected. This is what causes the flicker.

The SqlDataSource Controls

Now let’s see how the SqlDataSource controls are configured:

<asp:SqlDataSource ID="sdsCategory" runat="server" ConnectionString="<%$ ConnectionStrings:...%>"
    ProviderName="<%$ ConnectionStrings:... %>" SelectCommand="SELECT ID FROM Categories"
    DataSourceMode="DataReader"></asp:SqlDataSource>

<asp:SqlDataSource ID="sdsSubCategory" runat="server" ConnectionString="<%$ ConnectionStrings:... %>"
    DataSourceMode="DataReader" ProviderName="<%$ ConnectionStrings:... %>" SelectCommand="SELECT ID FROM SubCategories WHERE CategoryID = @CategoryID">
    <SelectParameters>
        <asp:ControlParameter ControlID="ddlCategory" Name="CategoryID" PropertyName="SelectedValue"
            DefaultValue="" />
    </SelectParameters>
</asp:SqlDataSource>

Following settings are set for both the SqlDataSource controls (in addition to the ConnectionString related settings):

SelectCommand: Getting the data from the database.
DataSourceMode is set to DataReader, because we are not editing the data

The way SqlDataSource for sub categories gets only the relevant sub categories is via the @CategoryID parameter. The parameter in the Where clause is obtained at runtime from the values listed in the SelectParameters settings. Here we are saying that the @CategoryID is to be replaced by SelectedValue of the ddlCategory dropdown.

Following is the entire listing of the two dropdowns and two SqlDataSource controls:

<asp:DropDownList ID="ddlCategory" runat="server" Width="158px" DataSourceID="sdsCategory"
    DataTextField="ID" AutoPostBack="True">
</asp:DropDownList>

<asp:SqlDataSource ID="sdsCategory" runat="server" ConnectionString="" ProviderName=""
    SelectCommand="SELECT ID FROM Categories" DataSourceMode="DataReader"></asp:SqlDataSource>

<asp:DropDownList ID="ddlSubCategory" runat="server" Width="157px" DataSourceID="sdsSubCategory"
    DataTextField="ID">
</asp:DropDownList>

<asp:SqlDataSource ID="sdsSubCategory" runat="server" ConnectionString="<%$ ConnectionStrings:... %>"
    DataSourceMode="DataReader" ProviderName="<%$ ConnectionStrings:... %>" SelectCommand="SELECT ID FROM SubCategories wHERE CategoryID = @CategoryID">
    <SelectParameters>
        <asp:ControlParameter ControlID="ddlCategory" Name="CategoryID" PropertyName="SelectedValue"
            DefaultValue="" />
    </SelectParameters>
</asp:SqlDataSource>

Adding AJAX to the above dropdowns

Now that two drop downs are linked to each other, you can AJAX-ify the above code very easily. Simply wrap the above code (the dropdowns) inside an UpdatePanel and you are home free.

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>

        <asp:DropDownList ID="ddlCategory" runat="server" Width="158px" DataSourceID="sdsCategory"
            DataTextField="ID" AutoPostBack="True">
        </asp:DropDownList>

        <asp:SqlDataSource ID="sdsCategory" runat="server" ConnectionString="" ProviderName=""
            SelectCommand="SELECT ID FROM Categories" DataSourceMode="DataReader"></asp:SqlDataSource>

        <asp:DropDownList ID="ddlSubCategory" runat="server" Width="157px" DataSourceID="sdsSubCategory"
            DataTextField="ID">
        </asp:DropDownList>

        <asp:SqlDataSource ID="sdsSubCategory" runat="server" ConnectionString="<%$ ConnectionStrings:... %>"
            DataSourceMode="DataReader" ProviderName="<%$ ConnectionStrings:... %>" SelectCommand="SELECT ID FROM SubCategories WHERE CategoryID = @CategoryID">
            <SelectParameters>
                <asp:ControlParameter ControlID="ddlCategory" Name="CategoryID" PropertyName="SelectedValue"
                    DefaultValue="" />
            </SelectParameters>
        </asp:SqlDataSource>

    </ContentTemplate>
</asp:UpdatePanel>

Of course, for AJAX to work on this page, you need to add one and only one instance of ScriptManager.