Invoke ASP.NET TextChanged event from JavaScript using __doPostBack

Question

Like many others, I'm trying to invoke a .NET control's server-side event from JavaScript.

Specifically, I want to fire the TextChanged event on a TextBox named txtSearch. Therefore, I'm looking to reach the following event from client-side:

protected void txtSearch_TextChanged(object sender, EventArgs e)

Having read many answers on SO (for example here and here) I have the following JavaScript:

__doPostBack('ctl00$ctl00$Container$Main$txtSearch', 'TextChanged');

But the server-side event never fires.

I've tried numerous permutations: with the AutoPostBack true and false, with and without the event declared in the server-side instructions on the ASPX (i.e. OnTextChanged=""), with the EventValidation turned off in the page declaration, using the ClientID rather than the UniqueID in the EVENTTARGET parameter... but the event is still never fired.

A couple of other points

• the txtSearch button control is also the trigger for an UpdatePanel, in case that matters.
• I'm converting existing code, of which there's quite a lot, and am looking for something I can drop onto each page rather than converting the code-behind events to PageMethods.

Can anyone tell me what more I need to do?

Answer 1

I've tried this, and it works for me:

<asp:TextBox runat="server" ID="txtSearch" OnTextChanged="txtSearch_TextChanged"></asp:TextBox>
<input type="button" value="submit" onclick="<%= GetOnChangedScript() %>" />

The server side asp:TextBox, and the client side input which fires __doPostBack on click. The __doPostBack script is generated through PostBackOptions:

protected string GetOnChangedScript()
{
    var options = new PostBackOptions(txtSearch, string.Empty);
    options.AutoPostBack = true;
    options.RequiresJavaScriptProtocol = true;
    var script = Page.ClientScript.GetPostBackEventReference(options);
    return script;
}

The txtSearch_TextChanged event handler fires when the value of text box is changed, and the submit button is clicked.

But note, for controls like TextBox the text is stored in the viewstate; the new text entered by the user stores in the form data. When the TextBox load the viewstate data, it gets the old value. This is compared with the new value that comes in the form. If the values are different, the TextChanged event is fired. If no, the event handler won't be fired. This is the reason for the Page_Load event get fired (postback occured), but txtSearch_TextChanged didn't fire due to the value of the TextBox didn't change.

Answer 2

function initTxtBox(){  $('#<%=txtBox.ClientID%>').on('keyup change', function() {setTimeout('txtpostback()', 0); return false;});}
function txtpostback(){__doPostBack('" + txtCadastreNumber.UniqueID + @"','');
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(initTxtBox);

Set auotpostback property to false for your txtbox and AutoEventWireup="true" for your control or page declaration. OnTextChanged event server-side will work too. if you don't use jquery in your project, let me know and I give you some javascript example without jquery using.