Question

将一些现有的JS插件包装到强大的组件中。这样做时，我面临以下问题。我有一个回调方法，该方法已使用dotnet引用-> invokeMethodAsync

从JS触发了

this.dotnet.invokeMethodAsync（“ Trigger”，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映射时，不会从JS向C＃端触发SayHello方法？

Answer 1

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

我可以这样重述你的声明吗？

调用了JSinvokable方法，但是我无法向JS返回值方法。

对吗？

您可以遵循以下代码：

<button type="button" onclick="exampleJsFunctions.returnArrayAsyncJs()">
    Trigger .NET static method ReturnArrayAsync
</button>

@functions {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}


And this:




 window.exampleJsFunctions = {
  returnArrayAsyncJs: function () {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync').then(data => {
      data.push(4);
      console.log(data);
    })
  }
};

希望这对您有帮助...

Answer 2

找到了该问题的答案，以通过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中，使用了异步功能来解决此问题

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

2 个答案: