dropdownlist not giving correct selection in code behind

Question

The following code is the markup for my page

<div id="addnewcontact">
    <fieldset style="width:70%;">
        <legend>Add New Contact Form</legend>
        <asp:panel runat="server" ID="custform" cssclass="contactform visible">
        "code removed for brevity"
            <asp:UpdatePanel ID="updtpanlCity" runat="server">
                <ContentTemplate>
                <!-- State dropdown selector area -->
                <asp:DropDownList ID="ddlStates" runat="server" AppendDataBoundItems="True"
                     AutoPostBack="True" CssClass="dropdowns" TabIndex="7" ToolTip="Select a state"
                    OnSelectedIndexChanged="ddlStates_SelectedIndexChanged">

                </asp:DropDownList>
                <asp:RequiredFieldValidator ID="rfvState" runat="server" ErrorMessage="[Required]"
                        ToolTip="Please select a state" ForeColor="#FF3300" ControlToValidate="ddlStates"
                        Display="Dynamic">
                </asp:RequiredFieldValidator>   
                <!-- End of State dropdown selector area -->
                <br /><p class="spacer"></p>
                <asp:DropDownList ID="ddlCity" runat="server" CssClass="dropdowns"
                        BorderColor="Black" BorderStyle="Solid" BorderWidth="2px"
                        TabIndex="8" ToolTip="Select a city here"
                        OnSelectedIndexChanged="ddlCity_SelectedIndexChanged"
                        AppendDataBoundItems="True" AutoPostBack="True">           
                        <asp:ListItem Value="" Text="Select a city"/>
                </asp:DropDownList>
                <br /><p class="spacer"></p>
                <asp:DropDownList ID="ddlPostalCode"  runat="server" TabIndex="9" 
                        CssClass="dropdowns" ToolTip="Select your postal code here."
                        AppendDataBoundItems="True" AutoPostBack="True">      
                        <asp:ListItem Value="" Text="Postal Code"/>
                </asp:DropDownList>&nbsp;&nbsp;
                <br />  

            </ContentTemplate>     
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlStates" EventName="SelectedIndexChanged"/>
                <asp:AsyncPostBackTrigger ControlID="ddlCity" EventName="SelectedIndexChanged"/>
                <asp:AsyncPostBackTrigger ControlID="ddlPostalCode" EventName="SelectedIndexChanged"/>
            </Triggers>
            </asp:UpdatePanel>
            <br />

            <br /><p class="spacer"></p>
            <asp:Button ID="submit" runat="server" Text="Submit" CssClass="buttons" />

        </asp:panel> <%--end of custform panel--%>
    </fieldset>
</div>

On selecting a state from the state dropdown selector, the code should retrieve a list of cities to populate the city dropdown. This was working before but I rebuilt the page as i changed the database structure. The problem is that the msgbox line i put in the event handler is showing that the selection with index 0 is what is always returned from that event, why is that?

Protected Sub ddlStates_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlStates.SelectedIndexChanged
    If IsPostBack Then
        MsgBox("item: " & ddlStates.SelectedItem.ToString() & "    " & "index: " & ddlStates.SelectedIndex.ToString())
        Dim ctx As New enerteckwebEntities()
        'retrieve the list of cities based on state selected
        Dim citylist As List(Of String) = (From c In ctx.ziptaxes Where c.StateID = Convert.ToInt32(ddlStates.SelectedValue) Order By c.City Ascending Select c.City).ToList()
        With ddlCity
            .Items.Clear()
            .DataSource = citylist.Distinct()
            .DataBind()
            .Items.Insert(0, "Select a city")
            .SelectedIndex = 0
        End With
    End If
End Sub

I have autopostback, appenddatabounditems and enableviewstate set to true in the markup

Answer 1

Here is one thing you can try.

1. Make sure that databind the States dropdown in the if(!IsPostBack) condition in the page_load method. This ensures that the dropdown is not databound again when the Selected Index change event is fired.