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" Enabled="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.
Solution
The solution really makes me want to regurgitate the protein shake I just drank, 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 bug we're dealing with here (and makes me never want to see an UpdatePanel again).
So! 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.