无法使用更新面板从 aspx 页面触发代码隐藏 (aspx.cs) 方法

Question

我有一个显示城市名称的自动完成文本框。每当用户单击城市名称时，选定的城市名称就会显示在文本框中。此文本框值应发送到代码隐藏方法 (aspx.cs) 以获取所选城市名称的更多详细信息，以便在网格视图中显示结果详细信息。

现在，为了传递所选值，我添加了一个文本框，用于复制所选城市名称值并将其包含在更新面板中。当文本框选择发生变化时，想法是触发代码隐藏方法：

这是aspx页面中的代码：

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

这是aspx.cs页面中的代码：

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

但是这个方法没有被触发。有人可以帮我找出我正在做的错误。

Answer 1

首先，MessageBox.Show 不是 WEBforms 代码，而是 WINforms。你不应该把它们混在一起。如果您想在网页上显示结果，请使用 javascript alert 或 Modal。

下一项是：$('#selectedItem').html(this.value);。它应该与val()一起使用

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

第三，如果您想在 TextChange 上触发 PostBack，请使用 AutoPostBack=true

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

但是，也不会通过将 txtName 中的文本更改为 selectedItem 来触发 PostBack。文本框需要失去焦点/模糊本身才能触发 PostBack。因此，要么将 txtName 放入 UpdatePanel 并在其上放置 TextChanged 事件，要么从 selectedItem 中删除 TextChanged，在 UpdatePanel 中放置一个 Button 并使用 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>

然后在后面的代码中

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