如何在ASP.NET与JavaScript中使用UpdatePanel解决回发错误？

问题根源 #

你的TextBox设置了AutoPostBack="true"，会导致每次按键都触发整页回发，和前端onkeyup绑定的AJAX逻辑冲突；加上Save按钮的服务器回发后，页面DOM状态重置，动态生成的ListBox选项和JavaScript事件绑定都会丢失，最终引发功能异常。

修正后的ASPX代码 #

将相关控件放入UpdatePanel，配置局部回发触发器，同时关闭TextBox的自动回发：

<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:TextBox ID="txtSelectUser" AutoPostBack="false" runat="server" class="InputFormStyle form-control" OnKeyUp="GetEmployee();"></asp:TextBox>
        <asp:ListBox ID="lstEmployee" runat="server" onchange="SelectUser();"></asp:ListBox>
        <asp:Button Text="Save" runat="server" OnClick="btnadd_Click" ID="btnadd"/>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnadd" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

优化后的JavaScript代码 #

解决UpdatePanel局部回发后事件绑定丢失的问题，同时优化ID引用和逻辑：

var selectedUserId = 0;

// 统一初始化控件和事件
function initControls() {
    var lstEmployee = $("#<%= lstEmployee.ClientID %>")[0];
    lstEmployee.style.display = "none";
    
    // 重新绑定change事件（避免回发后失效）
    $(lstEmployee).off('change').on('change', SelectUser);
}

// 页面首次加载初始化
$(document).ready(initControls);

// 监听UpdatePanel回发结束，重新初始化
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initControls);

function SelectUser() {
    var lstEmployee = $("#<%= lstEmployee.ClientID %>")[0];
    var txtSelectUser = $("#<%= txtSelectUser.ClientID %>")[0];
    
    for (var i = 0; i < lstEmployee.options.length; i++) {
        if (lstEmployee.options[i].selected) {
            txtSelectUser.value = lstEmployee.options[i].text;
            selectedUserId = lstEmployee.options[i].value;
            lstEmployee.style.display = "none";
            return;
        }
    }
}

function GetEmployee() {
    selectedUserId = 0;
    var txtSelectUser = $("#<%= txtSelectUser.ClientID %>")[0];
    var lstEmployee = $("#<%= lstEmployee.ClientID %>")[0];
    var FN = txtSelectUser.value;
    
    if (!FN) {
        lstEmployee.style.display = "none";
        return;
    }
    
    $.ajax({
        url: '..../GetDataByFn',
        data: JSON.stringify({ fullname: FN }),
        type: 'post',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            lstEmployee.options.length = 0;
            if (data.d.length) {
                data.d.forEach(item => {
                    let opt = new Option(item.FullNameEN, item.Id);
                    lstEmployee.options.add(opt);
                });
                lstEmployee.style.display = "inline-block";
            } else {
                lstEmployee.style.display = "none";
            }
        },
        error: function (error) {
            console.error(JSON.stringify(error));
        }
    });
}

核心修改说明 #

1. 关闭TextBox自动回发：移除AutoPostBack="true"，避免按键触发服务器回发干扰前端AJAX逻辑
2. 局部回发配置：用UpdatePanel包裹控件，设置Save按钮为异步回发触发器，只刷新局部区域，保留页面其他状态
3. 动态ID适配：用<%= 控件.ClientID %>替代硬编码ID，适配母版页、用户控件等场景下的ID变化
4. 事件重新绑定：通过Sys.WebForms.PageRequestManager监听回发结束事件，重新初始化控件和事件，解决局部回发后事件失效问题
5. 逻辑优化：修复原代码中ListBox选项重复添加的问题，简化循环逻辑，提升代码可读性

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