Blazor JS 互操作无法将参数传递给 C# 方法

Question

我正在尝试从 Blazor 中的 JS 调用 C# 方法，但无法向其传递参数。

代码如下：

<button class="m-2 btn btn-secondary" @onclick="FindMultiplication">Show Sum</button>
public async Task FindMultiplication()
{
    await JSRuntime.InvokeVoidAsync("CallCalculateMultiplication", DotNetObjectReference.Create(this), 1, 2);
}

[JSInvokable]
public int CalculateMultiplication(int no1, int no2)
{
    int multiplication = no1 * no2;
    return multiplication;
}

JS:

function CallCalculateMultiplication(obj, no1, no2) 
{
    var valueR = obj.invokeMethodAsync("CalculateMultiplication", no1, no2);
}

问题的发生是因为 CalculateMultiplication Blazor 组件的方法没有被调用。

我还注意到，如果我不向 CalculateMultiplication 方法传递任何参数，它就会被调用。以下更改后的代码有效：

[JSInvokable]
public int CalculateMultiplication()
{
    //int multiplication = no1 * no2;
    return 2;
}

function CallCalculateMultiplication(obj, no1, no2) 
{
    var valueR = obj.invokeMethodAsync("CalculateMultiplication");
}

为什么会这样？我已经看到这曾经在 Blazor 3.1 中工作，因为 this Youtube Video 实现了同样的事情（在 10:00 时间后检查），但现在没有。所以我的问题是我应该如何发送参数来实例化剃刀组件 C# 方法？

Answer 1

我发现在使用 JavaScript 调用 C# 方法时需要将参数值解析为 int。更新后的JS函数代码如下：

function CallCalculateMultiplication(obj, no1, no2) 
{
    var valueR = obj.invokeMethodAsync("CalculateMultiplication", parseInt(no1), parseInt(no2));
    valueR.then(function (result) {
            // Print the result of the promise
            alert(result.toString());
        });
}

此外，结果是一个 JavaScript 承诺，需要按如下所示处理：

valueR.then(function (result) {
    // Print the result of the promise
    alert(result);
});

Blazor JS 互操作无法将参数传递给 C# 方法

Blazor JS interop unable to pass arguments to C# method

javascript

c#

blazor

asp.net-core-5.0