.NET 6 Blazor Server应用中如何注入jQuery？

步骤1：引入jQuery库 #

Blazor Server的入口页面是Pages/_Host.cshtml，你需要在这里引入jQuery，必须放在Blazor核心脚本_framework/blazor.server.js之前，确保jQuery在Blazor初始化前加载完成：

<!-- 在_Host.cshtml的<head>或<body>末尾添加 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 或者用本地文件：把jQuery文件放到wwwroot/js下，然后引入 -->
<!-- <script src="~/js/jquery-3.7.1.min.js"></script> -->

<!-- 确保Blazor脚本在jQuery之后 -->
<script src="_framework/blazor.server.js"></script>

步骤2：封装jQuery操作（推荐） #

为了避免直接在Blazor中写零散的JS代码，建议在wwwroot/js下创建一个隔离的JS文件（比如jqueryInterop.js），封装常用的jQuery操作：

window.jQueryInterop = {
    // 示例：设置元素文本
    setElementText: function(selector, textContent) {
        $(selector).text(textContent);
    },
    // 示例：切换元素显示/隐藏
    toggleElement: function(selector) {
        $(selector).toggle();
    },
    // 示例：绑定事件委托（处理动态生成元素）
    bindClickDelegate: function(parentSelector, targetSelector, callback) {
        $(parentSelector).on('click', targetSelector, function() {
            callback();
        });
    }
};

然后在_Host.cshtml中引入这个文件，放在jQuery之后：

<script src="~/js/jqueryInterop.js"></script>

步骤3：通过IJSRuntime调用jQuery #

在你的Blazor组件中，先注入IJSRuntime，然后调用封装好的jQuery方法：

@inject IJSRuntime JS

<div id="demoDiv">初始文本</div>
<button @onclick="UpdateDivText">用jQuery更新文本</button>
<button @onclick="ToggleDiv">切换显示状态</button>

@code {
    private async Task UpdateDivText()
    {
        // 调用封装的JS方法，传入选择器和文本
        await JS.InvokeVoidAsync("jQueryInterop.setElementText", "#demoDiv", "Blazor + jQuery 协作完成！");
    }

    private async Task ToggleDiv()
    {
        await JS.InvokeVoidAsync("jQueryInterop.toggleElement", "#demoDiv");
    }
}

关键注意事项 #

• DOM更新冲突：Blazor是数据驱动UI，直接用jQuery修改DOM可能和Blazor的DOM diff机制冲突，只在必要场景使用（比如第三方jQuery插件集成）。
• 动态元素事件：如果操作动态生成的元素，必须用事件委托（如上面封装的bindClickDelegate），否则直接绑定的事件会失效。
• 加载顺序：一定要保证jQuery在Blazor脚本之前加载，否则调用$时会提示未定义。

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