无法从 blazor 组件调用 javascript 函数答案

【问题标题】：Unable to invoke javascript function from blazor component无法从 blazor 组件调用 javascript 函数
【发布时间】：2020-11-23 14:14:30
【问题描述】：

我正在尝试检查我的 blazor Web 程序集应用程序是否已在移动设备上打开。为此，

我创建了一个 wwwroot/script.js 文件并添加了代码：

function isDevice() {
   return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i.test(navigator.userAgent);
}

在 index.html 中添加了引用

然后在我的组件中：

@inject IJSRuntime JSRunTime
@code {
private string isDevice { get; set; }
private static bool mobile { get; set; }

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        mobile = await JSRuntime.InvokeAsync<bool>("isDevice");
        isDevice = mobile ? "Mobile" : "Desktop";
    }
    await base.OnAfterRenderAsync(firstRender);
}
}

我在编译时遇到错误：

方法 'InvokeAsync' 没有重载需要 1 个参数

查看文档后：https://docs.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.jsruntime.invokeasync?view=aspnetcore-5.0#Microsoft_JSInterop_JSRuntime_InvokeAsync__1_System_String_System_Object___

我将代码更改为具有这样的第二个参数：

mobile = await JSRuntime.InvokeAsync<bool>("isDevice", new object[] { });

现在错误是：

非静态字段、方法或属性 'JSRuntime.InvokeAsync(string, object[])'

【问题讨论】：

是的，它需要两个参数...查看文档：docs.microsoft.com/en-us/dotnet/api/…
尝试 JSRuntime.InvokeAsync("isDevice", new []{});
@Milney 我将其更改为JSRuntime.InvokeAsync<bool>("isDevice", new object[] { }); 但现在错误是：非静态字段、方法或属性需要对象引用 'JSRuntime.InvokeAsync(string, object [])'
你必须删除你的@inject IJSRuntime JSRunTime 行...你应该在改变之前就已经得到这个错误，否则
啊它的大小写 - 你的注入有 JSRunTime 而你的代码有 JSRuntime - 注意时间/时间的小写与大写 T

标签： c# asp.net-core blazor blazor-client-side blazor-webassembly

【解决方案1】：

@inject IJSRuntime JSRunTime

问题与上述行有关。如果使用上面的注入名称（JSRunTime），在代码块中，如果我们将 JSRunTime 悬停，我们可以看到它是 Microsoft.JSInterop.JSRuntime 的一个实例，而不是注入的对象。

要解决这个问题，请尝试更改注入的对象名称，如下所示：

 @inject IJSRuntime JS

然后，你可以像下面这样使用注入的对象：

        @inject IJSRuntime JS
        <p>
            <button @onclick=ShowConfirm>Confirm popup</button>
        </p>
        <p>
            <button @onclick=ShowPrompt>Prompt popup</button>
        </p>

        @code { 
            private string Result;
            private async Task ShowConfirm()
            {
                bool confirmed = await JS.InvokeAsync<bool>("confirm", "Are you sure?");
                Result = confirmed ? "You clicked OK" : "You clicked Cancel";
                Console.WriteLine(Result);
            }

            private async Task ShowPrompt()
            {
                string name = await JS.InvokeAsync<string>("prompt", "What is your name?");
                Result = "Your name is: " + name;
                Console.WriteLine(Result);
            }

        }

结果如下：

参考：

Call JavaScript functions from .NET methods in ASP.NET Core Blazor

【讨论】：