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

【问题标题】：Blazor JS interop unable to pass arguments to C# methodBlazor JS 互操作无法将参数传递给 C# 方法
【发布时间】：2021-03-31 01:26:04
【问题描述】：

我正在尝试从 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);
}

问题发生在 Blazor 组件的 CalculateMultiplication 方法未被调用。

我还注意到，如果我没有将任何参数传递给 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# 方法？

【问题讨论】：

标签： javascript c# blazor asp.net-core-5.0

【解决方案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);
});

【讨论】：