如何在Blazor Server应用中运行jQuery代码？

问题根源 #

1. 脚本加载顺序错误：原布局中blazor.server.js先于jQuery加载，虽然main.js执行时jQuery已就绪，但Blazor组件的DOM渲染晚于document.ready时机，导致初始绑定无法找到目标元素。
2. 静态事件绑定失效：Blazor是动态渲染DOM，直接使用.click()等方式绑定的事件无法作用于后续生成的元素。
3. DOM渲染时机不匹配：document.ready触发时，Blazor组件尚未完成渲染，目标DOM元素还未生成。

解决方案 #

1. 调整脚本加载顺序 #

修改_Layout.cshtml中的脚本顺序，确保jQuery先于main.js加载，Blazor脚本放在最后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <link href='./css/font_awesome/css/all.css' rel='stylesheet'>
    <link href="./css/style.css" rel="stylesheet">
</head>
<body>
    @RenderBody()

    <script src="./js/jquery-3.6.3.min.js"></script>
    <script src="./js/main.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

2. 修改main.js使用事件委托并封装初始化函数 #

将事件绑定改为事件委托，确保动态生成的元素也能触发事件，同时封装初始化函数方便Blazor调用：

// 封装侧边栏事件初始化函数
function initSidebarEvents() {
    // 侧边栏切换按钮点击事件
    $(document).off('click', '#sidebar-toggle-btn').on('click', '#sidebar-toggle-btn', function () {
        $('.sidebar').toggleClass('active');
        if ($('.sidebar').hasClass('active')) {
            $('.sidenav-bottom').css('visibility', 'visible');
        } else {
            $('.sidenav-bottom').css('visibility', 'hidden');
            $('.sidenav-bottom i').css('visibility', 'visible');
        }
    });

    // 导航项选中事件
    $(document).off('click', '.nav-list li a').on('click', '.nav-list li a', function () {
        $('.nav-list li a').removeClass('selected');
        $(this).addClass('selected');
    });

    // 侧边栏鼠标悬停/离开事件
    $(document).off('mouseenter', '.sidebar').on('mouseenter', '.sidebar', function () {
        if (!$('.sidebar').hasClass('active')) {
            $('.sidebar').toggleClass('active');
        }
    });

    $(document).off('mouseleave', '.sidebar').on('mouseleave', '.sidebar', function () {
        $('.sidebar').toggleClass('active');
    });
}

// 初始调用（兼容静态DOM场景）
$(document).ready(function () {
    initSidebarEvents();
});

3. 在Blazor组件中触发初始化 #

在包含侧边栏的Blazor组件（如MainLayout.razor）中，注入IJSRuntime并在组件渲染完成后调用初始化函数：

@inject IJSRuntime JSRuntime

<!-- 组件内容 -->

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用main.js中的初始化函数
            await JSRuntime.InvokeVoidAsync("initSidebarEvents");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

说明 #

• 事件委托通过监听父元素（document）的事件，利用事件冒泡机制触发目标元素的事件，不受DOM动态更新影响。
• OnAfterRenderAsync是Blazor组件生命周期方法，在组件渲染完成、DOM元素生成后执行，确保初始化函数能找到目标元素。

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