Parent-Child DropDownList Controls
In ASP.NET Web Forms

Example 1: Using SqlDataSource Controls

This demo shows how to create a parent / child DropDownLists using SqlDataSource controls alone. The parent DropDownList selects the ListItems that populate the child DropDownList, and the child DropDownList selects the record that populates a GridView.

Select A State:
Select A Town:

CityStateZIP CodeLatitideLongitude
AbbevilleAL36310 31.599256 -85.20940

Page Code

            <asp:Label runat="server" ID="lblParent" Text="Select A State: " />
            <!-- parent ddl -->
            <asp:DropDownList runat="server" ID="ddlParent" DataSourceID="sqlParentDDL" DataValueField="StateCode" DataTextField="StateName" AutoPostBack="true" />
            <!-- parent ddl is populated with a parameterless SQL query -->
            <asp:SqlDataSource runat="server" ID="sqlParentDDL" SelectCommand="GetStates" SelectCommandType="StoredProcedure" ConnectionString="<%$ ConnectionStrings:MyConnection %>" />
            <br />
            <!-- child ddl -->
            <asp:Label runat="server" ID="lblChild" Text="Select A Town: " />
            <asp:DropDownList runat="server" ID="ddlChild" DataSourceID="sqlChildDDL" DataValueField="ZIPCode" DataTextField="CityName" AutoPostBack="true" />
            <!-- child ddl gets its parameter value from the selected value of the parent ddl -->
            <!-- 
                ControlID: Name of the ASP.NET control that is providing the paramter's value
                Name: The name of the parameter in your stored procedure / SQL query
                PropertyName: The property of the control, specified in ControlID, that will supply the value to your query, specified in Name
            -->
            <asp:SqlDataSource runat="server" ID="sqlChildDDL" SelectCommand="GetZIPCodes" SelectCommandType="StoredProcedure" ConnectionString="<%$ ConnectionStrings:MyConnection %>">
                <SelectParameters>
                    <asp:ControlParameter ControlID="ddlParent" Name="StateInitials" PropertyName="SelectedValue" />
                </SelectParameters>
            </asp:SqlDataSource>
            <br />
            <br />

            <!-- A GridView to show the resuls -->
            <asp:GridView runat="server" ID="gvDetails" DataSourceID="sqlZipDetails" DefaultMode="ReadOnly" CellPadding="5" AutoGenerateColumns="false">
                <AlternatingRowStyle BackColor="LightGray" />
                <HeaderStyle BackColor="LightYellow" Font-Bold="True" HorizontalAlign="Center" />
                <Columns>
                    <asp:BoundField HeaderText="City" DataField="CityName" />
                    <asp:BoundField HeaderText="State" DataField="StateInitials" />
                    <asp:BoundField HeaderText="ZIP Code" DataField="ZIPCode" />
                    <asp:BoundField HeaderText="Latitide" DataField="CityLatitude" />
                    <asp:BoundField HeaderText="Longitude" DataField="CityLongitude" />
                </Columns>
            </asp:GridView>
            <!-- the GridView gets records based on the SelectedValue of ddlChild -->
            <asp:SqlDataSource runat="server" ID="sqlZipDetails" SelectCommand="GetCityDetails" SelectCommandType="StoredProcedure" ConnectionString="<%$ ConnectionStrings:MyConnection %>">
                <SelectParameters>
                    <asp:ControlParameter ControlID="ddlChild" Name="ZIPCode" PropertyName="SelectedValue" />
                </SelectParameters>
            </asp:SqlDataSource>