Parent-Child DropDownList Controls
In ASP.NET Web Forms

Example 1B: Augmenting The SqlDataSource Control Methodology

This demo uses a small bit of code behind to augment the SqlDataSource approach to parent-child DropDownLists. Specifically, the code behind will, every time the parent DropDownList has its selected index changed, rebind the child DropDownList, select its first item, and rebind the SqlDataSource that populates the 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>

Code Behind

            Sub ddlParent_selectedIndexChanged(Sender As Object, E As EventArgs) Handles ddlParent.SelectedIndexChanged
                ddlChild.DataBind()
                ddlChild.SelectedIndex = 0
                sqlZipDetails.DataBind()
            End Sub