Unable to trigger the code-behind (aspx.cs) method from aspx page using update panel

Question

I got a autocomplete textbox which displays Citynames. Whenever user clicks on a cityname the selected cityname is displayed in a textbox. This textbox value should be sent over to code behind method (aspx.cs) for fetching more details of the selected city name so that the resultant details are displayed in a gridview.

Now for passing the selected value I have added a textbox which copies the selected cityname value and enclosed it in a update panel. When ever the text box selection changes the idea is to trigger the code-behind method:

This is the code in aspx page:

      $(document).ready(function () {
            $('#txtName').on('change', function () {
                $('#selectedItem').html(this.value);
            }).change();
            $('#txtName').on('autocompleteselect', function (e, ui) {
                $('#selectedItem').val(ui.item.value);
            });
        });


 <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <label>Alternate Names: </label>
        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        &nbsp;
            <asp:Label ID="countLabel" runat="server"></asp:Label>
        <br />
        <asp:UpdatePanel ID="updatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="selectedItem" runat="server" OnTextChanged="selectedItem_TextChanged"></asp:TextBox>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="selectedItem" EventName="TextChanged" />
            </Triggers>
        </asp:UpdatePanel>
    </form>

This is the code in aspx.cs page:

    protected void selectedItem_TextChanged(object sender, EventArgs e)
    {
        MessageBox.Show(selectedItem.Text);
    }

But this method ain't getting triggered. Could somebody please help me with identifying the mistake i'm doing.

Answer 1

First, MessageBox.Show is not WEBforms code but WINforms. You should not mix those together. If you want to show results on a webpage, use javascript alert or a Modal.

Next item is this: $('#selectedItem').html(this.value); . It should be used with val()

  $('#selectedItem').val(this.value);

Third if yo want to trigger a PostBack on a TextChange, use AutoPostBack=true

<asp:TextBox ID="selectedItem"  ClientIDMode="Static" runat="server" 
   OnTextChanged="selectedItem_TextChanged" AutoPostBack="true"></asp:TextBox>

However a PostBack will not be triggered by changing the text from txtName in selectedItem also. the textbox needs to lose focus/blur itself to trigger the PostBack. So either just put txtName in the UpdatePanel and place the TextChanged event on that, or remove the TextChanged from selectedItem , place a Button in the UpdatePanel and click that with jQuery.

<asp:UpdatePanel ID="updatePanel1" runat="server">
    <ContentTemplate>

        <asp:TextBox ID="selectedItem" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <asp:Label ID="showResults" runat="server" Text=""></asp:Label>

    </ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">
    $(document).ready(function () {
        $('#txtName').on('change', function () {
            $('#selectedItem').val(this.value);
            $('#Button1').click();
        });
    });
</script>

And then in code behind

protected void Button1_Click(object sender, EventArgs e)
{
    showResults.Text = selectedItem.Text;
}