How to select cascading DropDownList with SqlDataSource

Question

I have the following in my data base -

breedId Species Breed
0       dog      Alsatian
1       dog      pitbull
2       dog      Shetland sheepdog
3       dog      Boxer
4       cat      Dragon Li
5       cat      Australian Mist
6       cat      Korat

In the c# designer view, I have 2 drop-down list one which has species and other for breed.

What I want is that when user picks 'dog' in species list, the breed list should have the following Alsatian, pitbull, Shetland sheepdog,Boxer

At the moment when I pick 'dog', all the breed from the database is shown.

<asp:DropDownList ID="DropDownListSpecies" runat="server" 
     Height="27px" Width="107px" DataSourceID="hs330" 
     DataTextField="Species" DataValueField="Species">
</asp:DropDownList>
<asp:SqlDataSource ID="Species" runat="server" 
     ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
     SelectCommand="SELECT DISTINCT [Species] FROM [Breed]">
</asp:SqlDataSource>

<asp:DropDownList ID="DropDownListBreed" runat="server" Height="20px" 
    Width="110px" DataSourceID="breed" DataTextField="Breed" 
    DataValueField="Breed">
</asp:DropDownList>
<asp:SqlDataSource ID="breed" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
    SelectCommand="SELECT DISTINCT [Breed] FROM [Breed]">
</asp:SqlDataSource>

Answer 1

You need to use ControlParameter in SelectParameters .

Make sure that AutoPostBack="True" for DropDownListSpecies

FYI: You have typo in Speecies

<asp:DropDownList ID="DropDownListSpecies" runat="server"
    Height="27px" Width="107px" DataSourceID="Species"
    DataTextField="Species" DataValueField="Species" AutoPostBack="True">
</asp:DropDownList>
<asp:SqlDataSource ID="Species" runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT DISTINCT [Species] FROM [Breed]"></asp:SqlDataSource>
<asp:DropDownList ID="DropDownListBreed" runat="server"
    Height="20px" Width="110px"
    DataSourceID="breed" DataTextField="Breed" DataValueField="Breed">
</asp:DropDownList>
<asp:SqlDataSource ID="breed" runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT DISTINCT [Breed] FROM [Breed] WHERE Species=@Species">
    <SelectParameters>
        <asp:ControlParameter ControlID="DropDownListSpecies" PropertyName="SelectedValue"
            Name="Species " Type="String" DefaultValue="cat" />
    </SelectParameters>
</asp:SqlDataSource>

Answer 2

You are not filtering the data in the second drop down list, based on the selection made in the first drop down list (which is what you want).

    <asp:DropDownList ID="DropDownListBreed" runat="server" Height="20px" Width="110px" DataSourceID="breed" DataTextField="Breed" DataValueField="Breed">
    </asp:DropDownList>
    <asp:SqlDataSource ID="breed" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT DISTINCT [Breed] FROM [Breed] WHERE Species = @Species">
    <SelectParameters>
        <asp:ControlParameter ControlID="DropDownListSpecies" PropertyName="SelectedValue"
            Name="Species " Type="String" DefaultValue="cat" />
    </SelectParameters>
</asp:SqlDataSource>

Also, you need to add the AutoPostBack="True" property to each DropDownList, if you want the changes to be reflected as soon as you change the value of each DropDownList.