Blazor非静态JSInvokable函数调用报错问题求助

当你尝试调用非静态的[JSInvokable]方法时，不能再用DotNet.invokeMethodAsync传入程序集名称的方式——因为非静态方法属于组件实例，必须通过组件的DotNet对象引用来调用。具体解决步骤如下：

1. 组件端代码调整 #

• 注入IJSRuntime，在组件首次渲染完成后，创建当前组件实例的DotNet对象引用并传递给JavaScript保存。
• 非静态方法保持[JSInvokable]标记（可指定名称，也可省略默认用方法名）。
• 组件销毁时释放对象引用，避免内存泄漏。

@inject IJSRuntime JS
@implements IAsyncDisposable

<!-- 你的组件UI内容 -->

@code {
    private DotNetObjectReference<YourComponentName>? _componentRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 创建当前组件实例的引用
            _componentRef = DotNetObjectReference.Create(this);
            // 将引用传递给JS保存
            await JS.InvokeVoidAsync("saveComponentRef", _componentRef);
        }
    }

    [JSInvokable("ChangeTab")]
    public async Task ChangeTab(string val)
    {
        // 直接调用组件内方法或修改组件变量
        ActivatePage(val);
        StateHasChanged(); // 若修改了绑定变量，调用此方法触发UI更新
    }

    private void ActivatePage(string val)
    {
        // 你的业务逻辑，比如修改组件绑定的标签值
        // 示例: CurrentActiveTab = val;
    }

    // 释放对象引用
    public async ValueTask DisposeAsync()
    {
        _componentRef?.Dispose();
    }
}

2. JavaScript代码修改 #

• 先保存组件传递过来的DotNet对象引用。
• 点击事件触发时，通过保存的引用调用非静态方法。

// 保存组件的DotNet对象引用
let componentRef = null;

function saveComponentRef(ref) {
    componentRef = ref;
}

// 点击标签触发的方法
function handleTabClick(tabText) {
    if (componentRef) {
        // 通过组件引用调用非静态JSInvokable方法
        componentRef.invokeMethodAsync('ChangeTab', tabText)
            .catch(err => console.error('调用Blazor方法失败:', err));
    }
}

报错原因说明 #

你之前遇到的错误，是因为DotNet.invokeMethodAsync('myComponent', 'ChangeTab')是调用静态方法的逻辑——它会在指定程序集（PSC.Blazor.Components.ScrollTabs）中查找静态的ChangeTab方法。而非静态方法属于组件实例，必须通过组件的DotNet对象引用来调用，无法直接通过程序集名称定位。

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