Question

I have a _TextChanged event which works properly except in a specific circumstance which can be replicated as follows:

1. User modifies text (event fires correctly)
2. User modifies text again to match the original value (event doesn’t fire)

I can get the _TextChanged event to work on my development box by turning on Viewstate for the update panel on the ascx page, but when I move it to the server I get an error that the viewstate failed if I switch user controls and then switch back to that page. The controls which go inside the update panel are build dynamically in code behind and are rebuilt with each postback — this works for every other postback so I don’t think the issue is with the controls.

Additionally, turning on viewstate makes the page run dreadfully slow anyway, so this would not be an ideal fix.

Finally, the _TextChanged event works for all changes except when reverting back to the original value.

Can anyone tell me why the event doesn’t fire in that specific circumstance, and how to address the problem?

Text box creation in code behind:

 TextBox annualHoursTextBox = new TextBox();
 annualHoursTextBox.ID = string.Format("bundle{0}_annualHoursTextBox{1}", bundle.BundleNbr, parentItem.LaborItemNbr);
 annualHoursTextBox.CssClass = "";
 annualHoursTextBox.Columns = 4;
 annualHoursTextBox.Text = childItem == null ? string.Empty : childItem.FTEHours.ToString("F0");
 annualHoursTextBox.AutoPostBack = true;
 annualHoursTextBox.TextChanged += new EventHandler(annualHoursTextBox_TextChanged);

 AsyncPostBackTrigger AHtrigger = new AsyncPostBackTrigger();
 AHtrigger.ControlID = annualHoursTextBox.UniqueID;
 AHtrigger.EventName = "TextChanged";
 upPricingSheet.Triggers.Add(AHtrigger);

 //snip

 //add some attributes for reference on the events
 annualHoursTextBox.Attributes["othercontrol"] = tasksPerYearTextBox.UniqueID;
 annualHoursTextBox.Attributes["nextcontrol"] = benefitsTextBox.UniqueID;
 annualHoursTextBox.Attributes["targetTBcontrol"] = taskTimeTextBox.UniqueID;
 annualHoursTextBox.Attributes["targetDDLcontrol"] = taskTimeUOMDropDown.UniqueID;

Event Handler:

protected void annualHoursTextBox_TextChanged(object sender, EventArgs e)
{
    TextBox ah = sender as TextBox;
    TextBox other = Page.FindControl(ah.Attributes["othercontrol"]) as TextBox;

    if ((!String.IsNullOrEmpty(ah.Text)) && (!String.IsNullOrEmpty(other.Text))) 
    {
        TextBox next = Page.FindControl(ah.Attributes["nextcontrol"]) as TextBox;
        TextBox targetTB = Page.FindControl(ah.Attributes["targetTBcontrol"]) as TextBox;
        DropDownList ddl = Page.FindControl(ah.Attributes["targetDDLcontrol"]) as DropDownList;
        Double TasksPerSecond;

        TasksPerSecond = CalculateTimePerTask(ah.Text, other.Text);
        string TimeUnit;
        double Time;

        if (TasksPerSecond < 60)
        {
            TimeUnit = "Seconds";
            Time = TasksPerSecond;
        }
        else if (TasksPerSecond < 3600)
        {
            TimeUnit = "Minutes";
            Time = (TasksPerSecond / 60);
        }
        else
        {
            TimeUnit = "Hours";
            Time = (TasksPerSecond / 60 / 60);
        }

        //Enter the time in the appropriate textbox
        targetTB.Text = Time.ToString("F2");

        //select the appropriate item from the ddl
        ListItem i = ddl.Items.FindByText(TimeUnit);

        if (i != null)
        {
            ddl.SelectedItem.Selected = false;
            i.Selected = true;
        }
    }
}

ASPX Page:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Solution.aspx.cs" Inherits="Solution" %>

<%@ Register Src="fragments/solutionRecommended.ascx" TagName="solutionRecommended"
TagPrefix="uc1" %>
<%@ Register Src="fragments/solutionPricingSheet.ascx" TagName="solutionPricingSheet"
TagPrefix="uc2" %>
<%@ Register Src="fragments/solutionSuggested.ascx" TagName="solutionSuggested" TagPrefix="uc3" %>
<%@ Register Src="fragments/solutionSummary.ascx" TagName="solutionSummary" TagPrefix="uc4" %>
<%@ Register Src="fragments/ucItemFilterSearch.ascx" TagName="ucItemFilterSearch"
TagPrefix="uc5" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
    function addItemToBundle(postUrl, redirectUrl) {
        $.post(postUrl);
        window.location = redirectUrl;
        //  window.location = url;
    }

</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:HiddenField ID="hfStepNbr" runat="server" />
<asp:Panel ID="pnlStepMessage" runat="server" Visible="false" CssClass="padding10">
    <h3 class="placeholder">
        <asp:Label ID="lblMessage" runat="server" /></h3>
</asp:Panel>
<div class='elev8form' id="mainDiv" runat="server">
    <h3 class='header'>
        Solutions</h3>
    <div id="tabs">
        <div class='tab'>
            <asp:LinkButton ID="lbSuggested" runat="server" Text="Select Items" data-step="1"
                OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
        </div>
        <div class='tab'>
            <asp:LinkButton ID="lbPricing" runat="server" Text="Pricing Worksheet" data-step="2"
                OnClick="lbTab_Click" ></asp:LinkButton>
        </div>
        <div class='tab'>
            <asp:LinkButton ID="lbRecommendedSolutions" runat="server" Text="Recommended Solutions"
                data-step="3" OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
        </div>
        <div class='tab'>
            <asp:LinkButton ID="lbSummary" runat="server" Text="Solutions Summary" data-step="4"
                OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
        </div>
    </div>
    <div id="solutions-body">
        <asp:MultiView ID="mltSolution" runat="server">
            <asp:View ID="viewSuggested" runat="server">
                <uc3:solutionSuggested ID="solutionSuggested1" runat="server" RedirectUrl="~/portal/elev8/solution.aspx" />
            </asp:View>
            <asp:View ID="viewPricing" runat="server">
                <uc2:solutionPricingSheet ID="solutionPricingSheet1" runat="server" />
            </asp:View>
            <asp:View ID="viewRecommended" runat="server">
                <uc1:solutionRecommended ID="solutionRecommended1" runat="server" />
            </asp:View>
            <asp:View ID="viewSummary" runat="server">
                <p style="font-size: 14px;">
                    Text here 
                </p>
                <uc4:solutionSummary ID="solutionSummary1" runat="server" />
            </asp:View>
        </asp:MultiView>
    </div>
</div>
<script type="text/javascript">
    function pageLoad() {
        $(function () {

            var maxChannelHeight;

            var items = $('.channel');

            for (var counter = 0; counter < items.length; counter++) {
                var channel = items[counter];

                var channelHeight = $(channel).height();

                maxChannelHeight = maxChannelHeight > channelHeight ? maxChannelHeight : channelHeight;
            }

            $('.channel').height(maxChannelHeight);

            $("#priceing-sheet-save-button *").click(function () {
                window.scrollTo(0, 0);

            });
        });
    }

</script>

ASCX Page:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="solutionPricingSheet.ascx.cs"
Inherits="solutionPricingSheet" %>

<asp:UpdateProgress ID="upProgressRecSolution" runat='server' AssociatedUpdatePanelID="upPricingSheet">
<ProgressTemplate>
    <div style="position: absolute; z-index: 2000; left: 45%; display: inline; width: 100px;"
        class="elev8form">
        <asp:Image ID="Image1" runat='server' ImageUrl="~/portal/img/ajax-loader-big.gif" />
    </div>
</ProgressTemplate>
</asp:UpdateProgress>
<div id="pricing-sheet-wrapper">
<p class='left'>
    More text</p>
<asp:Panel ID="pnlSaveMessage" runat="server" Visible="false" CssClass="save-message">
    <span>Item prices saved</span>
</asp:Panel>
<div class='export'>
    <span class='bigbutton'>
        <asp:LinkButton ID="btnExport" runat='server' Text="Export to Excel" OnClick="btnExport_Click" />
    </span>
</div>
<asp:UpdatePanel ID="upPricingSheet" runat="server" UpdateMode="Conditional" ViewStateMode="Disabled">
    <ContentTemplate>
        <div id="pricing-sheet">        
            <asp:PlaceHolder ID="phContent" runat="server"></asp:PlaceHolder>
            <asp:PlaceHolder ID="opportunityPlaceHolder" runat="server" />
            <div class='save export'>
                <div>
                    <div id="pageValidationError" class="validationMessage">
                       * Changes not saved. Review all entries for validation messages. Required fields marked with an asterisk.
                    </div>
                </div>
                <%--<asp:HiddenField ID="hf" runat="server" value="0" />--%>
                <center>
                    <span id="priceing-sheet-save-button">
                    <asp:Button ID="btnSave" runat="server" Text="Save All Prices" SkinID="redbutton"
                        OnClick="btnSave_Click" CausesValidation="true" />
                    </span>
                </center>
            </div>
        </div>
        <script type="text/javascript">
            function pageLoad() {

                $("#tabs .tab a").click(function () {
                    $("#<%= btnSave.ClientID%>").click();
                });
            }
        </script>
    </ContentTemplate>
</asp:UpdatePanel>
</div>
    <script type="text/javascript">
$(document).ready(function () {
    $('.validationMessage').hide();

    $('#<%= btnSave.ClientID %>').click(function () {
        if (Page_IsValid == false) {
            $('.validationMessage').show();
            return false;
        }
    });

    $('input[type=text]').blur(function () {
        if (Page_IsValid == false) {
            $('.validationMessage').show();
            return false;
        }
        else {
            $('.validationMessage').hide();
        }
    })
});

Answer 1

That is the intended behavior – the event is called OnTextChanged (different from original) not OnTextTyped (any text entered), for that you would have to handle this event (which triggers even if nothing at all is entered):

OnBlur="__doPostBack(this.id, '');"

UPDATE: its pretty simple actually, since you are using ajax, your textbox’s .defaultValue is not changing between postbacks, only the .value is – so either use OnBlur as I told you, or on every postback change the .defaultValue to .value in javascript: http://www.w3schools.com/jsref/prop_text_defaultvalue.asp

or just place the textbox in the UpdatePanel, and it will take care of it self on its own…

UPDATE 2: First off, nowhere in your code is the textbox shown to be inside an `UpdatePanel’, and secondly, you have 3 choices:

a) For OnBlur method to work, remove AutoPostBack property (it is the client side OnChange event), but keep the OnTextChanged event (it is server side).

b) For ViewState method to work, set ViewStateMode="Enabled" on the textbox, and make sure you are using ViewStateMode="Disabled" on its containers – and not EnableViewState="False".

c) javascript .defaultValue method…