DropDownList in ModalPopup/UpdatePanel intermittently does not fire SelectedIndexChanged

I've got a UserControl that's used inside of an UpdatePanel.

The UserControl is a fairly simple form that appears via a ModalPopupExtender (which is also part of the UserControl). There are four DropDownLists, as well as some other UI elements.

Three of the four DropDownLists have AutoPostBack="true", with SelectedIndexChanged events that fire on the server and cause some of the other DropDownLists to rebind.

Two of the three DDL's that AutoPostBack are working fine. One of them, which I only just added, is showing some strange behavior.

Let's say I bind five Items to it: 1, 2, 3, 4, 5. I set the SelectedIndex to 0, which makes 1 the selected item.

If I select 5 and then 1 and keep toggling back and forth, everything works fine. The postback occurs and SelectedIndexChanged fires. Every time.

If I ever select 2 or 4, the postback occurs but SelectedIndexChanged does not fire. Every time.

If I ever select 3, something bizarre happens and sometimes the value of the DDL reverts to 1. Even though breakpoints seem to show that it's not rebinding and no unexpected code is running. I know your first instinct will probably be that I'm wrong about the rebinding code not running, but I have literally been staring at the debugger for hours trying to find my mistake. Lots of breakpoints. I don't get it -- this really isn't that complicated.

But obviously I am missing something.

I've put about four hours into this so far and I think I'm just grinding at this point. I could use another perspective.

HTML (and by the way, DropProtocolCycleID is the problem control):

<asp:Panel ID="PanelPopupAssign" runat="server" Style="display:none; cursor: move; width:325px; background-color:Transparent;">
    <BlueUI:Panel runat="server" ID="PanelPatientProtocol" Width="500px" HeaderText="Assign Protocol">
    <table cellspacing="5">
        <tr>
            <td style="width:150px;"></td>
            <td style="width:50px;"></td>
            <td style="width:125px;"></td>
        </tr>
        <tr runat="server" id="TableRowCategory">
            <td align="right">Category:</td>
            <td colspan="2">
                <asp:DropDownList runat="server" ID="DropProtocolCategories" CausesValidation="false" autopostback="true"/>
            </td>
        </tr>                        
        <tr>
            <td align="right">Protocol:</td>
            <td colspan="2">
                <asp:DropDownList ID="DropProtocolID" runat="server" Enable开发者_如何学运维d="false" CausesValidation="false" autopostback="true"/>
                <asp:Label ID="LabelProtocolName_SetDate" runat="server" />
            </td>
        </tr>

        <tr>
            <td colspan="3">

                <table style="margin-left: 120px">

                    <tr>
                        <td align="right">Cycle:</td>
                        <td><asp:DropDownList ID="DropProtocolCycleID" runat="server" autopostback="true" /></td>
                    </tr>

                    <tr>
                        <td align="right">Day:</td>
                        <td>
                            <asp:DropDownList ID="DropProtocolCycleDayID" runat="server" Enabled="false" />                                                 
                        </td>
                    </tr>
                </table>

            </td>
        </tr>               

        <tr>
            <td align="right">Start Date:</td>
            <td colspan="2">
                <table>
                    <tr>
                        <td>
                            <asp:Textbox ID="TextProtocolStartDate" runat="server" Width="65px" 
                                BackColor="Transparent" BorderStyle="None" ReadOnly="True" Font-Size="11px" 
                                ForeColor="#1C4071" Font-Names="Verdana" ValidationGroup="AssignProtocol" />                            
                        </td>
                        <td>
                            <img id="ImageProtocolStartDate" 
                                 alt="Calendar" 
                                 onclick="CalProtocolStartDate.show();" 
                                 class="calendar_button" 
                                 src="../../Images/Icons/btn_calendar.gif" 
                                 width="25" 
                                 height="22" />
                            <asp:RequiredFieldValidator ID="ValRequiredProtocolStartDate" runat="server" display="Dynamic" 
                                ControlToValidate="TextProtocolStartDate" ErrorMessage="Protocol Start Date is required!" 
                                InitialValue="(None)"
                                Enabled="false" ValidationGroup="AssignProtocol">*</asp:RequiredFieldValidator>                               
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
    <ComponentArt:Calendar runat="server" 
            id="CalProtocolStartDate" 
            AllowMonthSelection="false"
            AllowMultipleSelection="false"
            AllowWeekSelection="false"
            CalendarCssClass="calendar" 
            TitleCssClass="title" 
            ControlType="Calendar"
            DayCssClass="day" 
            DayHeaderCssClass="dayheader" 
            DayHoverCssClass="dayhover" 
            DayNameFormat="FirstTwoLetters"
            ImagesBaseUrl="~/Images/Calendar/"
            MonthCssClass="month"
            NextImageUrl="cal_nextMonth.gif"
            NextPrevCssClass="nextprev" 
            OtherMonthDayCssClass="othermonthday" 
            PopUp="Custom"
            PopUpExpandControlId="ImageProtocolStartDate"
            PrevImageUrl="cal_prevMonth.gif" 
            SelectedDate=""
            VisibleDate=""
            SelectedDayCssClass="selectedday" 
            SelectMonthCssClass="selector"
            SelectMonthText="¤" 
            SelectWeekCssClass="selector"
            SelectWeekText="»" 
            SwapDuration="300"
            SwapSlide="Linear" 
            AutoPostBackOnSelectionChanged="False" 
            PopUpCollapseDuration="0"
            ClientSideOnSelectionChanged="onCalProtocolStartDateChange"> 
          <ClientEvents>
            <Load EventHandler="Calendar1_onLoad" />
          </ClientEvents>
         </ComponentArt:Calendar>                        
    <br />
    <div style="text-align:center;">
        <asp:Button ID="ButtonSaveProtocol" runat="server" Text="Save" ValidationGroup="AssignProtocol" Enabled="false" />
        <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" CausesValidation="false" />
    </div> 
    <br />
    </BlueUI:Panel>
</asp:Panel> 

<ajaxToolkit:ModalPopupExtender id="ModalPopupExtenderAssignProtocol" runat="server"
popupcontrolid="PanelPopupAssign" popupdraghandlecontrolid="PanelPopupAssign" CancelControlID="ButtonCancel"
targetcontrolid="ButtonAssignProtocol" BackgroundCssClass="modalBackground" RepositionMode="RepositionOnWindowResizeAndScroll" >
</ajaxToolkit:ModalPopupExtender>  

Relevant codebehind:

Private Sub DropProtocolCycleID_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropProtocolCycleID.SelectedIndexChanged
    Me.Show()

    Me.SetupDropProtocolCycleDayID()
End Sub

Public Sub Show()
    Me.ModalPopupExtenderAssignProtocol.Show()
End Sub

Here's the code where I bind DropProtocolCycleID, if you're interested. It fires in the SelectedIndexChanged event of DropProtocolID, which actually works reliably:

Private Sub SetupDropProtocolCycleID()
    If Me.DropProtocolID.SelectedValue = Constants.NothingSelected Then
        Me.DropProtocolCycleID.Enabled = False
        Exit Sub
    Else
        Me.DropProtocolCycleID.Enabled = True
    End If

    Dim ProtocolID As Integer = Me.DropProtocolID.SelectedValue
    Dim ProtocolCycles As DataTable = ProtocolManager.GenerateCycleTable(ProtocolID)

    Me.DropProtocolCycleID.DataSource = ProtocolCycles
    Me.DropProtocolCycleID.DataTextField = "ProtocolCycleNumber"
    Me.DropProtocolCycleID.DataValueField = "ProtocolCycleID"
    Me.DropProtocolCycleID.DataBind()

    If DropProtocolCycleID.Items.Count > 0 Then
        Me.DropProtocolCycleID.SelectedIndex = 0
    End If
End Sub

ProtocolCycleNumber and ProtocolCycleID are just integers. No chance of anything in there that could interfere with the javascript.

This solution is ugly, but it works, and at this point I need to just get it working and move on.

In a nutshell, I added an invisible button and then made the DropDownList's onchange event click the button with JavaScript whenever it gets changed. This gets around whatever problem we're dealing with here.

I added this JS to the page:

function IndexChanged() {
    document.getElementById("ctl00$MainContent$AssignProtocolControl$ButtonIndexChanged").click(); 
}

I changed the DropDownList to call that:

<asp:DropDownList ID="DropProtocolCycleID" runat="server" onchange="IndexChanged();"  />

I added the invisible button:

<asp:Button id="ButtonIndexChanged" Text="Index Changed" style="display: none;" OnClick="DropProtocolCycleID_SelectedIndexChanged" runat="server" />

...And that solved the problem. Please let me know if you discover a better solution.

Oh, and as for the issue with the value sometimes being reverted to 1, it was because I needed to have duplicate values in my ListIems -- the text varied, but the values were sometimes the same.

Apparently when you do that, ViewState botches the job of restoring state and selects the first matched value it finds. So I just made my value a little more elaborate and it works fine now.

I had the same problem, I solved it by adding modalpop.show()

e.g.

AutoPostback=true in the design file

protected void ddlCars_SelectedIndexChanged(object sender, EventArgs e)
    {
        //Do all your work here 
        mpEditCars.Show();
    }