无法从 Blazor 组件调用 javascript 函数

Question

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

我创建了一个 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);
}
}

我在编译时遇到错误：

No overload for method 'InvokeAsync' takes 1 arguments

查看文档后：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[] { });

现在的错误是：

An object reference is required for the non-static field, method, or property 'JSRuntime.InvokeAsync(string, object[])'

Answer 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

无法从 Blazor 组件调用 javascript 函数

Unable to invoke javascript function from blazor component

c#

asp.net-core

blazor

blazor-client-side

blazor-webassembly