ASP.NET C# Two DropDown Lists with postback keep messing up each other's Index

Question

I'm testing a simple thing where I have a database of video cards and motherboards. The first DropDown List only pulls unique Brands

<asp:DropDownList ID="ddlfirst" runat="server" DataSourceID="SqlDataSource1" DataTextField="Brand" DataValueField="Brand" OnSelectedIndexChanged="ddlfirst_SelectedIndexChanged" AutoPostBack="True">
    </asp:DropDownList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:HardwareConnectionString %>" SelectCommand="SELECT DISTINCT [Brand] FROM [Computer_Motherboards]"></asp:SqlDataSource>

And the second dropdown list is populated by the first one. The Model is the display field and the Power requirement is the value.

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:HardwareConnectionString %>" SelectCommand="SELECT DISTINCT [Brand], [Model], [PowerDraw] FROM [Computer_Motherboards] where Brand = @SessionVar">
    <SelectParameters>
            <asp:SessionParameter Name="SessionVar" SessionField="Mobo_Brand_Selection" ConvertEmptyStringToNull="true" />
        </SelectParameters>
    </asp:SqlDataSource>

The session variable is set when the index of the first ddl is changed:

    protected void ddlfirst_SelectedIndexChanged(object sender, EventArgs e)
{
            //sets this session variable to whatever the selected brand is
            Session["Mobo_Brand_Selection"] = ddlfirst.SelectedValue;
}

The problem is that when do the same as above, except for my motherboard information, the index of the Model/Power Requirement changes on any sort of click event or postback. So if I pick EVGA and Model 5, and then go to my Motherboard ddls and pick ASUS and Model 4, the EVGA Model 5 selection will go to index 1 or something. I've tried playing around with various if (!postback) statements but I just cant figure it out.

Answer 1

Place the second set of drop downs for the video card and model inside an update panel and it will work:

<asp:DropDownList ID="ddlfirst" runat="server" DataSourceID="SqlDataSource1" DataTextField="Brand" DataValueField="Brand" AutoPostBack="True">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:HardwareConnectionString %>" SelectCommand="SELECT DISTINCT [Brand] FROM [Computer_Motherboards]"></asp:SqlDataSource>


<asp:DropDownList ID="DropDownList2" runat="server" DataSourceID="SqlDataSource2" DataTextField="Model" DataValueField="PowerDraw">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:HardwareConnectionString %>" SelectCommand="SELECT DISTINCT [Brand], [Model], [PowerDraw] FROM [Computer_Motherboards] where Brand = @Brand">
    <SelectParameters>
        <asp:ControlParameter ControlID="ddlfirst" PropertyName="SelectedValue" Name="Brand" />
    </SelectParameters>
</asp:SqlDataSource>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:DropDownList runat="server" ID="videoCardBrand" AutoPostBack="true">
            <asp:ListItem Text="Video card one" Value="1" />
            <asp:ListItem Text="Video card two" Value="2" />
            <asp:ListItem Text="Video card 3" Value="3" />
        </asp:DropDownList>
        <asp:DropDownList runat="server" ID="videoCardModel" AutoPostBack="true">
            <asp:ListItem Text="Video card model1" Value="1" />
            <asp:ListItem Text="Video card model2" Value="2" />
            <asp:ListItem Text="Video card model3" Value="3" />
        </asp:DropDownList>
    </ContentTemplate>
</asp:UpdatePanel>