Blazor Server引入Black Dashboard模板后自定义脚本与MudBlazor冲突如何解决

Blazor Server启用预渲染时，$(document).ready()会在预渲染DOM加载完成后立刻执行自定义脚本并绑定事件，但Blazor初始化完成后会替换掉所有预渲染的DOM节点，导致之前绑定的事件全部失效，选中的DOM元素也不再存在，所以自定义功能无法触发。而删除blazor.server.js后Blazor不会替换DOM，所以自定义脚本正常，但MudBlazor依赖Blazor运行时，所以组件功能异常。

1. 调整事件绑定方式 #

将直接绑定到DOM元素的事件改为委托到document上，避免Blazor动态替换DOM后事件丢失。

2. 调整脚本执行时机 #

不要用$(document).ready()触发初始化，改为监听Blazor初始化完成事件，等Blazor替换完DOM后再执行初始化逻辑。

3. 替换自定义脚本部分 #

把你原来_Host.cshtml里的两个$(document).ready()代码块，替换为如下代码：

// 全局变量声明
let $sidebar, $navbar, $main_panel, $full_page, $sidebar_responsive;
let sidebar_mini_active = true, white_color = false;
let window_width, fixed_plugin_open;

// 初始化Dashboard核心逻辑
function initBlackDashboard() {
    $sidebar = $('.sidebar');
    $navbar = $('.navbar');
    $main_panel = $('.main-panel');
    $full_page = $('.full-page');
    $sidebar_responsive = $('body > .navbar-collapse');
    window_width = $(window).width();
    fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
}

// 所有事件绑定改为委托到document
$(document).on('click', '.fixed-plugin a', function (event) {
    if ($(this).hasClass('switch-trigger')) {
        event.stopPropagation?.() || (window.event && (window.event.cancelBubble = true));
    }
});

$(document).on('click', '.fixed-plugin .background-color span', function () {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    const new_color = $(this).data('color');
    $sidebar?.attr('data', new_color);
    $main_panel?.attr('data', new_color);
    $full_page?.attr('filter-color', new_color);
    $sidebar_responsive?.attr('data', new_color);
});

$(document).on('switchChange.bootstrapSwitch', '.switch-sidebar-mini input', function () {
    if (sidebar_mini_active) {
        $('body').removeClass('sidebar-mini');
        sidebar_mini_active = false;
        blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
    } else {
        $('body').addClass('sidebar-mini');
        sidebar_mini_active = true;
        blackDashboard.showSidebarMessage('Sidebar mini activated...');
    }
    const simulateWindowResize = setInterval(() => window.dispatchEvent(new Event('resize')), 180);
    setTimeout(() => clearInterval(simulateWindowResize), 1000);
});

$(document).on('switchChange.bootstrapSwitch', '.switch-change-color input', function () {
    $('body').addClass('change-background');
    setTimeout(() => {
        $('body').removeClass('change-background');
        if (white_color) {
            $('body').removeClass('white-content');
            white_color = false;
        } else {
            $('body').addClass('white-content');
            white_color = true;
        }
    }, 900);
});

$(document).on('click', '.light-badge', () => $('body').addClass('white-content'));
$(document).on('click', '.dark-badge', () => $('body').removeClass('white-content'));

// 等Blazor初始化完成后执行初始化
window.addEventListener('load', () => {
    Blazor.addEventListener('afterStarted', () => {
        initBlackDashboard();
        window.demo?.initDashboardPageCharts();
    });
});

4. 可选样式优化 #

你当前的CSS引入顺序是正确的（MudBlazor样式在前，Black Dashboard样式在后），如果出现个别组件样式冲突，可自定义优先级更高的CSS规则覆盖即可。

5. 页面跳转兼容（可选） #

如果切换页面后Dashboard状态异常，可在布局组件的OnAfterRenderAsync生命周期中调用initBlackDashboard()方法，每次页面渲染完成后重新初始化即可。

内容的提问来源于stack exchange，提问作者Duy Khương