Problem with textbox inside updatepanel - not causing OnTextChanged event - asp.net

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

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 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

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 4

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 5

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

Answer 6

The Control which id is used in AsyncPostBackTrigger must be outside the update Panel(that cause to fire the Async call) like this:
<tr>
<td colspan="4"><asp:Label ID="lblEnter_Successfully" Text="Enter Record SuccessFully" runat="server" Visible ="false" ForeColor ="Blue" Font-Size ="Larger" Font-Bold ="true"></asp:Label>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "Button_Save" EventName ="Click"/>
</Triggers>
</asp:UpdatePanel>
<table>
<tr>
<td width = "472px" align ="right">
<asp:Button ID="Button_Save" runat="server" Text="Save" OnClientClick ="return URLValidation();"/>
<asp:Button ID="Button_Clear" runat="server" Text="Clear"/>
</td>
</tr>
</table>