从 JavaScript 调用 Blazor 方法答案

【问题标题】：Calling a Blazor method From JavaScript从 JavaScript 调用 Blazor 方法
【发布时间】：2019-01-13 14:41:53
【问题描述】：

我正在 Visual Studio 中试验 Blazor，特别是从 JavaScript 调用 Blazor 代码。我有理由相信我已经拥有了所有正确的库。但是，当我尝试使用 invokeMethodAsync 调用我的 Blazor 方法时，我收到消息“未设置 .net 调用调度程序”。在我的 Index.Html 文件中，我有这个：

<script> DotNet.invokeMethodAsync("BlazorFour.App", "HelloYou").then(data => alert(data), reason => alert(reason)); </script>

（这是产生错误信息的警报（原因））

我已向我的 Blazor 项目添加了一个类文件，其中包含以下内容：

using Microsoft.JSInterop;
using System.Threading.Tasks;
public class HelloWorld
{
[JSInvokable]
public static Task<string> HelloYou()
{
    return Task.FromResult("Hello, ");
}
}

我已使用 Visual Studio 中的所有模板和 dotnet -new blazor 命令行实用程序来创建我的起点，但在所有项目中都获得了相同的消息。在我看来，我似乎遗漏了一些基本的东西。

【问题讨论】：

请删除对警报功能的两个调用，并告诉我们是否调用了 HelloYou...
试过了，似乎没什么区别：如果 HelloYou 被称为是完全不可见的。

标签： javascript visual-studio blazor

【解决方案1】：

彼得·沃格尔：如果您可以从 JavaScript 代码中调用 Blazor C# 方法，那就太好了。目前，这不太可能：仅从 JavaScript 调用 Blazor C# 是行不通的（您会收到有关呼叫调度程序不可用的消息）。

但是，您可以在 Blazor 代码运行后从 C# 代码调用 JavaScript 代码。完成此操作后，您的 JavaScript 代码可以反过来调用 Blazor 代码。

希望这能解决问题...

【讨论】：

确实如此。但是你也给了我一个傻笑，因为你引用了我写的一篇关于我（最终）发现的文章。很高兴发现有人真正阅读了这些文章！谢谢！（我也从不关注谁写了这些文章。我也会做同样的事情 - 希望你也能从中获得笑声）。

【解决方案2】：

我正在使用服务器端 blazor

我遇到了 js 错误 未设置 .NET 调用调度程序

所以是的 .. 看起来 Blazor 没有初始化..

不喜欢超时 .. 看起来很 hacky 并且 UI 很滞后

不喜欢从你的 C# 代码调用 JavaScript 代码。完成此操作后，您的 JavaScript 代码可以反过来调用 Blazor 代码。' .. 再次看起来很 hacky

这对我有用..

async function myBlazoryFunctionThing() {
    // see https://sourcegraph.com/github.com/aspnet/AspNetCore@bd65275148abc9b07a3b59797a88d485341152bf/-/blob/src/Components/Web.JS/src/Boot.Server.ts#L41:9
   await window.Blazor.reconnect();
   
   ..now it's safe to do my stuff
}

“似乎”Blazor.reconnect() 将重新使用现有连接（如果有的话）

...所以它实际上不是“重新-连接”（所以“似乎”没有太多开销;-)）

【讨论】：

【解决方案3】：

我尝试了 setTimeout（5000 毫秒延迟），它对我有用。（当然不需要每次都使用 setTimeout，只需第一次使用）。

例如setTimeout(DotNet.invokeMethod(...), 5000);

【讨论】：

【解决方案4】：

我猜这是时间问题，并非所有内容都已加载/初始化。

您是否尝试过将 js 代码放入按钮 onclick 事件中？

【讨论】：

你可能有一些东西——无论如何我都会收到不同的错误信息。如果这是问题所在，那么我将不得不在我的 Blazor 组件中调用我的 JavaScript 函数，以便它可以在加载所有内容后调用我的 C# 代码。

【解决方案5】：

使用 Microsoft.JSInterop；

[注入] 受保护的 IJSRuntime JSRuntime { get;放; }

从您的 blazor 函数调用此方法中的此函数

await JSRuntime.InvokeAsync<object>("fnToJavascriptCall", DotNetObjectReference.Create(this));

在 blazor 文件中创建此函数

[JSInvokable]
        public async Task fnToCallFromJavascript(int param1, int param2)
        {
            //Do some stuff
            StateHasChanged();
        }

在您的 javascript 文件中

var fnToJavascriptCall = function (param1,currentInstance)
{
    //Do your stuff
    currentInstance.invokeMethodAsync("fnToCallFromJavascript", param1, param2);
}

【讨论】：

【解决方案6】：

如果在错误的时间使用 JavaScript 互操作，可能会收到 No .NET call dispatcher has been set 错误。看看this StackOverflow question。

【讨论】：