Unable to invoke javascript function from blazor component

Question

I'm trying to check if my blazor web assembly app is opened on mobile or not. For that,

I created a wwwroot/script.js file and added code:

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

Added reference in index.html

And then in my component:

@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);
}
}

I'm getting an error on compile time that:

No overload for method 'InvokeAsync' takes 1 arguments

After checking the docs: https://learn.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.jsruntime.invokeasync?view=aspnetcore-5.0#Microsoft_JSInterop_JSRuntime_InvokeAsync__1_System_String_System_Object___

I changed the code to have second parameter like this:

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

Now the error is:

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

Yeah it takes two arguments... look at docs: learn.microsoft.com/en-us/dotnet/api/… — Milney
– Milney, Commented Nov 23, 2020 at 14:48
@Milney I changed it to JSRuntime.InvokeAsync<bool>("isDevice", new object[] { }); but now the error is: An object reference is required for the non-static field, method, or property 'JSRuntime.InvokeAsync<bool>(string, object[])' — SU7
– SU7, Commented Nov 23, 2020 at 15:02
You must have removed your @inject IJSRuntime JSRunTime line... You should have got this error even before the change otherwise — Milney
– Milney, Commented Nov 23, 2020 at 15:18
Ah its casing - your inject has JSRunTime while your code has JSRuntime - Notice the lowercase vs capital T for Time/time — Milney
– Milney, Commented Nov 23, 2020 at 15:20

Zhi Lv · Accepted Answer · 2020-11-24 06:14:57Z

@inject IJSRuntime JSRunTime

The issue is related to the above line. If using the above injected name (JSRunTime), in the code block, if we hover the JSRunTime, we can see it is an instance of Microsoft.JSInterop.JSRuntime, instead of the injected object.

To solve this issue, try to change the injected object name, like this:

 @inject IJSRuntime JS

Then, you could use the injected object as below:

        @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);
            }

        }

The result like this:

Reference:

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

Im Im · Accepted Answer · 2024-02-28 11:09:32Z

-3

C# Code:

[Inject]
IJSRuntime JS { get; set; }

 private async Task Delete()
 {
     if (!await JS.InvokeAsync<bool>("confirm", $"Are you sure you want to delete?"))
     {
         return;
     }
 }

edited Feb 28, 2024 at 11:09

answered Feb 26, 2024 at 14:52

Im Im

11 bronze badge

1 Comment

AztecCodes Over a year ago

Please elaborate how your code fixes the issue from the question.

Collectives™ on Stack Overflow

Unable to invoke javascript function from blazor component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related