ASP.NET中UpdatePanel触发后Bootstrap Toggle的JS和CSS失效如何解决

失效核心原因 #

UpdatePanel触发异步回发时，会将面板内部的DOM节点整体替换，页面首次加载时Bootstrap Toggle生成的包装DOM结构、绑定的事件监听会被全部清除。如果直接重复执行初始化逻辑不做旧实例清理，就会出现样式丢失、交互失效的问题，这也是多数人使用pageLoad或PageRequestManager做适配仍不生效的核心原因。

可直接复用的修复代码 #

两种绑定方式选其一即可，不要重复绑定。

方式1：使用ASP.NET原生pageLoad事件 #

该事件会在页面首次全量加载、每次异步回发完成后自动触发，无需额外绑定事件监听：

function pageLoad() {
    // 查找所有需要渲染为Bootstrap Toggle的复选框
    const $toggleCheckboxes = $('input[type="checkbox"][data-toggle="toggle"]');
    $toggleCheckboxes.each(function () {
        const $current = $(this);
        // 销毁可能存在的旧实例，避免重复初始化报错
        if ($current.data('bootstrapToggle')) {
            $current.bootstrapToggle('destroy');
        }
        // 重新渲染组件
        $current.bootstrapToggle();
    });
}

方式2：监听PageRequestManager异步回发结束事件 #

如果不想用全局pageLoad，可以抽离统一初始化方法，在页面加载完成、异步回发结束两个时机分别调用：

// 页面首次加载完成后执行初始化+绑定事件
$(function () {
    initBootstrapToggle();
    const prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(initBootstrapToggle);
});

// 统一初始化逻辑
function initBootstrapToggle() {
    $('input[type="checkbox"][data-toggle="toggle"]').each(function () {
        const $el = $(this);
        if ($el.data('bootstrapToggle')) {
            $el.bootstrapToggle('destroy');
        }
        $el.bootstrapToggle();
    });
}

必做的配置检查 #

• 确认Bootstrap Toggle的JS、CSS文件引用放在UpdatePanel容器外部，不要放在UpdatePanel内部，避免异步回发时重复加载资源导致组件异常。
• 不要将初始化逻辑仅写在jQuery的$(document).ready()回调中，该回调仅在页面全量首次加载时触发，异步局部回发不会重新执行该回调。
• 如果是动态设置Toggle的选中状态、尺寸、颜色等配置，需要在destroy旧实例之后，重新初始化之前把配置参数传入，避免配置丢失。

修复前后效果差异：修复前页面首次加载时组件样式、交互动效正常，UpdatePanel触发异步回发后退化为原生复选框，样式丢失、点击无切换动效；修复后每次回发组件都能正常渲染、交互。

内容的提问来源于stack exchange，提问作者Mr. Breezy