Web Forms中JS修改TextBox后如何触发C#的TextChanged事件？

在ASP.NET Web Forms应用中，通过JavaScript更新<asp:TextBox>的值后，后端C#的Value1_TextChanged服务器端事件不会自动触发，相关代码如下：

前端代码 #

<asp:TextBox ID="Value1" Columns="2" MaxLength="3" Text="1" runat="server" OnTextChanged="Value1_TextChanged"/>
    
<button onclick="changeText()">sample</button>
<script>
function changeText(){
   $("input[id$='Value1']").val("Change Value!");
}
</script>

后端C#代码 #

protected void Value1_TextChanged(object sender, EventArgs e)
{
    string test = "this works";
}

核心原因 #

ASP.NET的TextChanged是服务器端事件，只有当页面发生回发（PostBack），且服务器检测到TextBox的当前值与初始渲染值不一致时，才会触发该事件。JavaScript仅在客户端修改值，不会自动触发回发或通知服务器值已变更。

解决方法 #

方法一：使用__doPostBack手动触发控件回发

修改JavaScript函数，在更新TextBox值后，调用ASP.NET内置的__doPostBack函数，指定触发回发的控件唯一ID：

function changeText(){
    // 更新TextBox值
    $("input[id$='Value1']").val("Change Value!");
    // 触发目标控件的回发，<%= Value1.UniqueID %>会渲染为服务器端控件的唯一ID
    __doPostBack("<%= Value1.UniqueID %>", "");
}

方法二：开启AutoPostBack并触发客户端事件

1. 先给TextBox添加AutoPostBack="true"属性：

<asp:TextBox ID="Value1" Columns="2" MaxLength="3" Text="1" runat="server" 
    OnTextChanged="Value1_TextChanged" AutoPostBack="true"/>

2. 修改JavaScript函数，更新值后触发blur事件（AutoPostBack会在控件失去焦点时自动触发回发）：

function changeText(){
    var textBox = $("input[id$='Value1']");
    textBox.val("Change Value!");
    // 触发blur事件，触发AutoPostBack的回发逻辑
    textBox.blur();
}

方法三：直接提交整个表单

如果需要回发整个页面，可在更新值后手动提交表单：

function changeText(){
    $("input[id$='Value1']").val("Change Value!");
    // 提交当前页面表单
    $("form").submit();
}

注意事项 #

• 确保后端Value1_TextChanged事件已正确绑定到TextBox控件。
• 使用__doPostBack时，必须用<%= Value1.UniqueID %>获取控件的服务器端唯一ID，避免因命名容器导致客户端ID不匹配。

内容的提问来源于stack exchange，提问作者Amazon