Blazor中从JavaScript调用后台方法报错，如何排查？

1. 方法名称不匹配 #

你在JS里传入的方法名是MyAssembly.Components.Orders.Checkout.PlaceOrderAsync，但C#代码里通过[JSInvokable("PlaceOrderAsync")]给方法指定了调用名称为PlaceOrderAsync，两者对不上，这是报错的直接原因。

2. 实例方法调用的核心问题 #

你的PlaceOrderAsync是组件的实例方法，不是静态方法。直接用DotNet.invokeMethodAsync调用实例方法行不通，因为JS不知道要调用哪个组件实例，必须先让JS拿到组件的引用。

完整修正步骤： #

第一步：修改Blazor组件，注册组件引用

在Checkout组件里添加引用字段，初始化时把组件实例传给JS保存：

namespace MyAssembly.Components.Orders
{
    public partial class Checkout : CustomOrderingComponentBase, IDisposable
    {
        private DotNetObjectReference<Checkout>? _componentRef;
        [Inject] private IJSRuntime JS { get; set; } = null!;

        protected override void OnInitialized()
        {
            base.OnInitialized();
            // 创建组件的DotNet引用
            _componentRef = DotNetObjectReference.Create(this);
            // 把引用传给JS保存
            JS.InvokeVoidAsync("storeCheckoutComponentRef", _componentRef);
        }

        [JSInvokable("PlaceOrderAsync")]
        public async Task PlaceOrderAsync(string versapayToken)
        {
            // 你的业务逻辑代码
        }

        public void Dispose()
        {
            _componentRef?.Dispose();
        }
    }
}

第二步：修改JS代码，用保存的组件引用调用方法

先把组件引用存起来，再调用实例方法：

// 保存Blazor组件的引用
let checkoutComponent;

function storeCheckoutComponentRef(ref) {
    checkoutComponent = ref;
}

// 调用下单方法
function triggerPlaceOrder(paymentToken) {
    checkoutComponent.invokeMethodAsync('PlaceOrderAsync', paymentToken)
        .then(() => {
            console.log('PlaceOrderAsync调用成功');
        })
        .catch(err => {
            console.error('调用PlaceOrderAsync出错:', err);
        });
}

备选方案：改为静态方法（如果业务允许） #

如果PlaceOrderAsync不需要访问组件实例的状态，可以改成静态方法，这样只需要修正JS里的方法名就行：

[JSInvokable("PlaceOrderAsync")]
public static async Task PlaceOrderAsync(string versapayToken)
{
    // 静态方法的业务逻辑
}

对应的JS代码：

DotNet.invokeMethodAsync('MyAssembly', 'PlaceOrderAsync', paymentToken)
    .then(() => {
        console.log('PlaceOrderAsync调用成功');
    })
    .catch(err => {
        console.error('调用PlaceOrderAsync出错:', err);
    });

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