Problem with textbox inside updatepanel - not causing OnTextChanged event

Question

I have the following situation: I have a textbox inside an ajax updatepanel. Wherever the user types in the textbox I must display a message (different message that depends on the user typed data).

     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <asp:TextBox ID="txtMyTexbox" runat="server" Width="500px" OnTextChanged="txtMyTexbox_TextChanged" AutoPostBack="true"></asp:TextBox>
            <br />
            <asp:Label ID="lblMessage" runat="server" CssClass="errorMessage" Visible="false">Hello World</asp:Label>
         </ContentTemplate>
            <Triggers>
             <asp:AsyncPostBackTrigger ControlID="txtMyTexbox" />
            </Triggers>
      </asp:UpdatePanel>

In server side I have written the following at page load

ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(txtMyTexbox);

and the method like this

protected void txtMyTexbox_TextChanged(object sender, EventArgs e)
    {           
            if (.....)
            {
                lblMessage.Visible = false;
            }
            else
            {
                lblMessage.Visible = true;
            }            
    }

My problem now is that: when the user types in the textbox it doesn't cause OnTextChanged event.

Am I missing something?

Answer 1

You should not be using RegisterAsyncPostBackControl for your TextBox. That method is really only for use for controls that reside outside of UpdatePanels. I would try removing that line of code and seeing what happens.

See this for more info: http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.registerasyncpostbackcontrol.aspx

Answer 2

Set the EventName property for your txtMyTexbox AsyncPostBackTrigger to TextChanged

<Triggers>             
    <asp:AsyncPostBackTrigger ControlID="txtMyTexbox" EventName="TextChanged" />            
</Triggers>

Other sugguestion:

Have you tried looking at the AutoComplete control that is part of the AjaxControlToolKit? Its behaves the same way you want your solution to behave.

Answer 3

I'm not sure that your problem has anything to do with the UpdatePanel.

In fact, the TextChanged event doesn't fire while typing. It will only fire after the textbox loses focus. This happens directly if AutoPostBack is set to True, or when the next postback occurs. Please see the docs for the AutoPostBack property and the TextChanged event.

Afaik, your best bet is probably to handle the keyup event in javascript.

Here's a simple jQuery example:

$(document).ready(function() {
    $(':text[id$=YourTextBox]').keyup(function() {
        if ($(this).val() === "your special value") {
            $('span[id$=YourLabel]').css('visibility', 'visible');
        }
        else {
            $('span[id$=YourLabel]').css('visibility', 'hidden');
        }
    });
});

Answer 4

a workaround check textbox - causesvalidation property and set it to true

Answer 5

its strnage to know that even after adding update panel / AsyncPostBackTrigger , TextBox ChangeEvent doesn't work properly. Some time its works and some times it not..Since its is Asychronous call, we need to some time refresh, or wait or unpredictable , Hopes microsoft will come up with competent one.. Below are easy way to check user name pretty good

------ Under Page_Load - aspx.cs -----------------------

this.TextBox1.Attributes.Add("onKeyUp", "fnUNameSubmit(this);");

-------in aspx -add script ---------------------------------------

<script language="javascript" type="text/javascript">

function fnUNameSubmit(urInput) {   
var inpt= urInput.value;
if (inpt.length > 21) { 
document.getElementById('<%= TextBox1.ClientID %>').style.backgroundColor = "green";
document.form1.submit();  // This is only trick we use here..
}
else {
document.getElementById('<%= TextBox1.ClientID %>').style.backgroundColor = "red";
}
  }
</script>

-------in aspx -add script --------------------------------------- ----------------aspx.cs ------------------- if (TextBox1.Text.Length > 21) { CheckUsrName(); Label2.Text = ""; } else { Label2.Text = "Length is less than 21"; //lets do some stuff..bla..bla } ------------------------------------------------- CheckUsername()

public void CheckUsrName() {

  Call dB values

}

Answer 6

its strnage to know that even after adding update panel / AsyncPostBackTrigger , TextBox ChangeEvent doesn't work properly. Some time its works and some times it not..Since its is Asychronous call, we need to some time refresh, or wait or unpredictable , Hopes microsoft will come up with competent one.. Below are easy way to check user name pretty good

------ Under Page_Load - aspx.cs -----------------------

this.TextBox1.Attributes.Add("onKeyUp", "fnUNameSubmit(this);");

-------in aspx -add script ---------------------------------------

<script language="javascript" type="text/javascript">

function fnUNameSubmit(urInput) {   
var inpt= urInput.value;
if (inpt.length > 21) { 
document.getElementById('<%= TextBox1.ClientID %>').style.backgroundColor = "green";
document.form1.submit();  // This is only trick we use here..
}
else {
document.getElementById('<%= TextBox1.ClientID %>').style.backgroundColor = "red";
}
  }
</script>

-------in aspx -add script --------------------------------------- ----------------aspx.cs ------------------- if (TextBox1.Text.Length > 21) { CheckUsrName(); Label2.Text = ""; } else { Label2.Text = "Length is less than 21"; //lets do some stuff..bla..bla } ------------------------------------------------- CheckUsername()

public void CheckUsrName() {

  Call dB values

}