Update Panel - Textbox TextChanged Event is interfering with the DropDown SelectedIndexChanged event

Question

Basics:

• I have a text box (txtDepositAmount) that people can enter a deposit amount into and a drop down (ddlSelectedTerm) that sets the terms.
• Through these two values I calculate the APY (lblCurrentApy).

Rules:

• If only one of the values is selected I still want to do an update on the current APY label and clear it.
• If either value changes I want to update the current APY and recalculate.

The problem:

As soon as I click away from the textbox and onto the drop down to select my term the drop down flashes and closes because the textbox TextChanged event was just fired.

I have to click on the drop down a second time to be able to select anything!

Do I need to change what event I'm looking at or do I need to move some of the controls outside of the UpdatePanel? Can this only happen if some of the business rules change? Should I just give up and go to javascript?

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <table width="100%">
            <tr>
                <td align="left" style="width: 10%" class="LineAlign">
                    &nbsp;
                </td>
                <td align="left" style="width: 40%" class="LineAlign">
                    <asp:Label ID="lblDollarSymbol" runat="server" Text="$"/> 
                    &nbsp;
                    <asp:TextBox ID="txtDepositAmount" runat="server"
                     AutoPostBack="true" TabIndex="1" MaxLength="14" 
                     ontextchanged="txtDepositAmount_TextChanged"/>
                </td>
                <td align="left" style="width: 30%" class="LineAlign">
                    <asp:DropDownList ID="ddlSelectedTerm" runat="server" 
                     AutoPostBack="true" TabIndex="2"
                     onselectedindexchanged="ddlSelectedTerm_SelectedIndexChanged">
                    </asp:DropDownList>
                </td>
                <td align="center" style="width: 20%">
                    <asp:Label ID="lblCurrentApy" runat="server"/>
                    &nbsp;
                    <asp:Label ID="lblPercentSymbol" runat="server" Text="%"/>
                </td>
            </tr>
        </table>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlSelectedTerm" />
        <asp:AsyncPostBackTrigger ControlID="txtDepositAmount" />
    </Triggers>
</asp:UpdatePanel>

Answer 1

autopostback="true" on your textbox is causing this, since both controls are reloaded after they leave the textbox. I doubt there is a way to avoid this as long as they are in the same UpdatePanel.

Maybe you could set focus to the dropdown list after the textbox-initiated postback, or you could probably make this work by putting the controls in separate UpdatePanels. But really it seems the wrong way to go about it. I would use javascript (and ajax if the logic is complicated) to update the APY. Or just add a "calculate" button...

(Edit) Here's a slightly ugly hack to avoid ajax, three update panels and still be able to do your logic server side. I do not approve of this method but it is quick and dirty.

Put the Label control that contains the calculation results in an UpdatePanel. The input controls do not need to be in an UpdatePanel.

In the update panel (with the results) have a hidden submit button:

    <asp:Button ID="DoCalculate" style="display:none;" UseSubmitBehavior="false"
 runat="server" OnClick="Recalculate()" />

This should be the trigger for the UpdatePanel. Then have your two input controls click that button using javascript to cause a partial postback to the "results" panel. Here is the code to add this javascript for the dropdown, for example, in Page_Load:

    ddSelectedTerm.Attributes.Add("onSelectedIndexChanged",
"document.getElementByID('" + DoCalculate.ClientID + "').Click()");

Then in put the C# code to do the calculation and update the label in the 2nd update panel in the "Recalculate()" method.

This should work, and give you better layout control and less code flow ugliness then using 3 update panels.