如何从事件回调返回数据到 Blazor 中的 JS 互操作方法

Question

我正在将一些现有的 JS 插件包装到 blazor 组件中。这样做时，我遇到了以下问题。我有一个回调方法，它使用 dotnet 引用从 JS 触发到 blazor ->invokeMethodAsync

this.dotnet.invokeMethodAsync("触发器", this.eventName, '');

它完美地触发了 JSinvokable 方法。但在这里，我需要将数据从 blazor 源返回到引发该数据的 JS 函数处理程序。

相反，invokeMethodAsync，尝试invokeMethod，得到以下错误

https://github.com/aspnet/Extensions/blob/master/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts#L65

是否可以将事件回调中的数据返回到作为同步操作引发的 JS 函数？

编辑：

C# 边代码

public class ExampleJsInterop
{
    private readonly IJSRuntime _jsRuntime;

    public ExampleJsInterop(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public object CallHelloHelperSayHello(string name)
    {
        // sayHello is implemented in wwwroot/exampleJsInterop.js
        return _jsRuntime.InvokeAsync<object>(
            "exampleJsFunctions.sayHello",
            new DotNetObjectRef(new HelloHelper(name)));
    }
}

public class HelloHelper
{
    public HelloHelper(string name)
    {
        Name = name;
    }

    public string Name { get; set; }

    [JSInvokable]
    public string SayHello()
    {
        return $"Hello, {Name}!";
    }
}

JS代码：

window.exampleJsFunctions = {
showPrompt: function (text) {
    return prompt(text, 'Type your name here');
},
displayWelcome: function (welcomeMessage) {
    document.getElementById('welcome').innerText = welcomeMessage;
},
returnArrayAsyncJs: function () {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
        .then(data => {
            data.push(4);
            console.log(data);
        });
},
sayHello: function (dotnetHelper) {
    debugger;
    dotnetHelper.invokeMethod('SayHello')
        .then(r => {
            debugger;
            console.log(r);
        });

    console.log('function outside');
}

};

剃须刀代码：

@inject IJSRuntime JSRuntime

<button type="button" class="btn btn-primary" onclick="@TriggerNetInstanceMethod">
    Trigger .NET instance method HelloHelper.SayHello
</button>

@functions {


public void TriggerNetInstanceMethod()
{

    var exampleJsInterop = new ExampleJsInterop(JSRuntime);
    exampleJsInterop.CallHelloHelperSayHello("Blazor");
}
}

这里HelloHelper类->当我特别通过invokeMethod而不是invokeMethodAsync映射时，SayHello方法不会从JS触发到C#端？

Answer 1

找到了这个问题的答案，通过 aync 操作收集数据。

JS代码：

sayHello: async function (dotnetHelper) {

    var promise = dotnetHelper.invokeMethodAsync('SayHello')
        .then(r => {
            debugger;
            console.log(r + "inside");
        });

    var result = await promise; // wait till the promise resolves (*)

    console.log('function outside');
}

在Js中，使用async函数解决了这个问题