如何在Blazor Server应用中添加jQuery并解决JSInterop报错

初始方案自动补全失效原因 #

• 脚本放在<head>中执行时，CreateNote.razor内id为companyName的InputText组件尚未渲染到DOM树，jQuery选择器无法匹配到目标元素，自然无法绑定自动补全事件。alert可正常执行仅代表脚本本身加载运行成功，与目标元素是否存在无关。
• Blazor采用差异渲染机制，页面初始加载阶段全局执行的DOM绑定操作，后续会被组件渲染逻辑覆盖，导致绑定事件丢失。

JSInterop抛出Could not find 'CompleteFormControls'异常的核心原因 #

按出现概率排序：

1. 函数未暴露到全局window作用域：Blazor JSInterop默认仅在全局window对象下查找目标函数，若init.js中直接声明函数、且脚本以ES模块形式加载或被闭包包裹，函数不会挂载到window上，Interop调用时自然无法找到。
2. 脚本加载顺序/位置错误：
   • 若脚本引用放在<head>中、或位于blazor.server.js之前，会出现C#侧触发调用时脚本尚未加载完成的问题；
   • Blazor默认会忽略组件内编写的<script>标签，若直接在razor组件中引用init.js，脚本根本不会被浏览器加载。
3. 脚本路径配置错误：若init.js存放路径与src属性配置不匹配，浏览器返回404加载失败，函数自然不存在。
4. 依赖加载顺序错误：若init.js在jQuery、jQuery-UI之前加载，脚本执行时会因为$对象不存在直接报错，函数定义逻辑根本不会执行。

1. 调整init.js写法，明确挂载全局函数 #

将函数明确绑定到window对象，增加元素存在性校验避免运行时报错，示例：

// 建议将自定义js统一放在wwwroot/js目录下，路径更规范
window.CompleteFormControls = function () {
    const $target = $('#companyName');
    // 校验元素存在、jQuery UI自动补全方法已加载
    if (!$target.length || typeof $target.autocomplete !== 'function') {
        console.warn('自动补全初始化条件不满足，已跳过');
        return;
    }
    // 替换为实际的自动补全数据源与逻辑
    const companySource = ["示例公司1", "示例公司2", "示例公司3"];
    $target.autocomplete({
        source: companySource,
        minLength: 1
    });
}

2. 统一配置脚本引用，保证加载顺序 #

所有脚本全部移动到_Layout.cshtml/_Host.cshtml的</body>闭合标签之前，严格按依赖顺序排列，禁止在razor组件内部直接写script标签：

<!-- 先加载jQuery -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- 再加载jQuery UI -->
<script src="~/lib/jquery-ui/jquery-ui.min.js"></script>
<!-- 加载自定义初始化脚本，路径与实际存放位置一致 -->
<script src="~/js/init.js"></script>
<!-- Blazor服务端脚本放在最后 -->
<script src="_framework/blazor.server.js"></script>

注意：删除之前在<head>中添加的重复脚本引用，避免多实例jQuery覆盖已绑定的事件。

3. 修正JSInterop调用逻辑，保证执行时机 #

• 封装Interop调用层，不要做多余包装：

// 注册为Scoped生命周期服务即可
public class FormControlInterop
{
    private readonly IJSRuntime _jsRuntime;
    public FormControlInterop(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public ValueTask InitAutoCompleteAsync()
    {
        return _jsRuntime.InvokeVoidAsync("CompleteFormControls");
    }
}

• 在组件内仅在首次渲染完成后执行初始化，避免重复绑定：

@inject FormControlInterop FormInterop
<!-- 明确给InputText指定固定id，避免Blazor动态渲染修改id属性 -->
<InputText id="companyName" @bind-Value="CurrentNote.CompanyName" />

@code {
    private bool _isInitialized = false;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !_isInitialized)
        {
            _isInitialized = true;
            // 加短延迟等待Blazor完成DOM更新，避免元素还未挂载
            await Task.Delay(100);
            await FormInterop.InitAutoCompleteAsync();
        }
    }
}

• 调试时可打开浏览器F12控制台，直接输入window.CompleteFormControls，若返回undefined，优先去Network面板检查init.js是否加载成功、Console面板是否有JS报错阻断脚本执行。
• Blazor重渲染可能覆盖jQuery绑定的事件，若使用中出现自动补全偶发失效的问题，可在jQuery UI的select回调中手动将选中值同步给Blazor绑定的模型字段，保证DOM状态与组件状态一致。
• 不要使用$(document).ready执行Blazor相关的DOM初始化，该事件触发时Blazor尚未完成组件渲染，依然会出现找不到元素的问题。

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