Blazor JS互调报错：无法找到带[JSInvokable]的目标方法

核心排查与修复步骤 #

• 确保方法为公共访问级别：SetDraggingState和UpdateElementPositionAsync必须标记为public，Blazor JS互操作要求可调用方法必须是公共成员。
• 验证[JSInvokable]特性的正确使用：
  特性需直接标注在目标方法上，拼写不能出错，示例正确写法：

  [JSInvokable]
  public void SetDraggingState(bool isDragging)
  {
      // 业务逻辑
  }
  
  [JSInvokable]
  public async Task UpdateElementPositionAsync(int elementId, int x, int y)
  {
      // 业务逻辑
  }
  

• 实例方法的JS调用需传入组件引用：若这两个方法是组件实例方法，JS端必须通过组件引用调用，而非直接查找程序集静态方法：
  • 组件端获取引用：

    <div @ref="componentRef">...</div>
    
    @code {
        private ElementReference componentRef;
    
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await JS.InvokeVoidAsync("initializeDrag", componentRef);
            }
        }
    }
    

  • JS端调用示例：

    function initializeDrag(componentRef) {
        // 拖拽过程中调用组件方法
        componentRef.invokeMethodAsync('SetDraggingState', true);
        componentRef.invokeMethodAsync('UpdateElementPositionAsync', elementId, x, y);
    }
    

• 清理重建项目：执行dotnet clean清理缓存，再用dotnet build重新构建，避免程序集缓存导致的方法识别异常。
• 核对方法签名一致性：JS传递的参数类型必须与C#方法参数类型完全匹配（比如JS数字对应C# int，布尔值对应bool），类型不匹配也会触发找不到方法的报错。

额外提示 #

• .NET 6+版本需注意WebAssembly隔离模式的影响，确保组件互操作环境配置正确。
• JS调用的方法名必须与C#中标注[JSInvokable]的方法名完全一致（大小写敏感）。

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