如何在 AJAX UpdatePanel 中使 ASP.NET TextBox 触发其 onTextChanged 事件？

Question

我正在尝试使一个文本框在每次按键时都触发其onTextChanged事件，而不仅仅在失去焦点时触发。我认为添加AsyncPostBackTrigger可以实现这一点，但它仍然没有起作用。我所尝试的是否可能？以下是代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Items.aspx.cs" MasterPageFile="~/MMPAdmin.Master" Inherits="MMPAdmin.Items" %>
<asp:Content ID="content1" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<asp:ScriptManager ID="sm_Main" runat="server" />
    <div style="left:10px;position:relative;width:100%;overflow:hidden">
        <asp:UpdatePanel ID="up_SearchText" runat="server">
            <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="tb_Search" EventName="TextChanged" />
            </Triggers>
            <ContentTemplate>
                <div style="position:relative;float:left">
                    <b style="font-size:xx-large">Items</b>(<a href="Item.aspx">Add New</a>)
                </div>
                <div style="right:25px;position:absolute; top:30px">
                    Search: <asp:TextBox ID="tb_Search" runat="server" Width="200" OnTextChanged="UpdateGrid" AutoPostBack="true" />
                </div>
                <br />
                <div>
                    <asp:GridView runat="server" AutoGenerateColumns="true" ID="gv_Items" AutoGenerateEditButton="true" AutoGenerateDeleteButton="true" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

- Broham

Answer 1

• 当使用JavaScript触发onkeyup事件时，需要调用_postback()函数来处理文本框控件。
• 然而，由于文本框在更新面板内部，每次用户按键时文本框都会重新渲染，导致光标失去焦点。
• 除非将文本框从更新面板中移出，否则它无法使用。即使如此，更新面板通常速度较慢，您仍可能遇到可用性问题。我建议您使用自动完成组件。

P.S：asp.net控件工具包中有一个自动完成组件，或者您还可以使用我发现比较好的jquery自动完成插件。

- smercer

---

仅作为对@smercer回答的补充：onTextChange事件仅在postback时触发，而不是在更新文本框时触发。OP所寻找的更接近于JavaScript onKeyPress事件。@Smercer正确地指出，您最好选择提到的其中一个组件。 - Rob Allen

我不清楚如何使用自动完成组件来完成我需要做的事情。我希望使用JavaScript在文本框的onkeyup事件上弹回焦点，但正如你所说，每次文本框都会失去焦点。如果我将文本框从更新面板中移除，那么每次输入内容时事件都会导致重新提交，这是行不通的。在重新呈现后，将焦点分配给文本框是否可能？ - Broham

当我说“弹跳焦点”时，我指的是以下内容：function BounceFocus(){ var element = document.getElementById('<%=tb_Search.ClientID%>'); element.blur(); element.focus(); } - Broham

好的，通过将textBox移出updatePanel，保留Asynch Trigger，并附加onkeyup BounceFocus，我已经让它正常工作了。感谢您的帮助！ - Broham

当我尝试像Broham的document.getElementById('<%=tb_Search.ClientID%>');这样做时，我会收到“文字量太多”的错误提示。 - vapcguy

Answer 2

AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"

这两个事件都是触发文本更改事件所必需的。

- Shujaat Ali

Answer 3

不需要使用AJAX控件来检查可用性。使用AJAX控件并非强制要求。 我们可以使用以下代码。

<iframe>
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" ontextchanged="TextBox1_TextChanged"></asp:TextBox>

 protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        RequiredFieldValidator1.ErrorMessage = "";
        Label1.Text = "";
        string name = TextBox1.Text.ToString();
        string constr = "data Source=MURALY-PC\\SQLEXPRESS; database=Online; Integrated Security=SSPI";
        SqlConnection con = new SqlConnection(constr);
        con.Open();
        string query = "select UserName from User_tab where UserName='" + name + "'";
        SqlCommand cmd = new SqlCommand(query, con);
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.Read())
        {

            Label1.Text = "UserName Already Exists";
        }
        else
        {
            Label1.Text = "";
            Label1.Text = "UserName Available";
        }
        con.Close();


    }
</iframe>

- Srividhya

---

然而，这并没有展示GridView中的数据如何被更新。这就是UpdatePanel的原因——不仅是文本框数据的更改会触发文本通知，而且GridView也会因此而更新。确实，标签可以像这样在onchange方式下显示数据而不需要AJAX，但有时将数据库表格数据添加到标签中比添加到GridView中要困难得多——后者需要UpdatePanels。 - vapcguy

Answer 4

所有的AsyncPostBackTrigger所做的就是确保当事件被触发时只刷新页面的那一部分，它不会在事件被触发时进行更改。

我认为你想要实现的是可能可以做到的，但你需要编写一些JavaScript代码来手动触发该事件...而且我甚至不想考虑如何使其工作。

- CodeRedick