Aspnetcore.docs: Problem when trying to call function on javascript - No instance of JSRuntime

[Ricardoaraujo00]

When thrying to use the ejected JSRuntime:

Error CS0120 An object reference is required for the non-static field, method, or property 'TicketEmiter.jsRuntime'

Injecting:
@inject IJSRuntime jsRuntime

In function:
public static void DismissRemoveTicketModal(int status)
{
if (status == 0)
{

        jsRuntime.InvokeVoidAsync("fadeModal");
    }
}

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: aada0049-99a8-2f91-5d60-6970474e2371
• Version Independent ID: c29fb1a8-028f-6efd-f1bc-e889fb362311
• Content: Call JavaScript functions from .NET methods in ASP.NET Core Blazor
• Content Source: aspnetcore/blazor/call-javascript-from-dotnet.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Hello @Ricardoaraujo00 ... We don't have the staffing to handle general product support questions. We recommend the following support channels ...

• Stack Overflow
• ASP.NET Core Slack
• ASP.NET Gitter

[Ricardoaraujo00]

Sorry, but this is not a support request. I'm making you a favor telling you(staff) that there is something wrong with the info this page is providing for developers. If there is a issue of this nature, i think that, even not existing a problem with the code, exists a problem with the clarity of the info here. If that is not something you like to improve then i'm sorry for taking your time.
I think you should be more concerned in improving the documentation about your products for people don't need to go to stack overflow for clearer instructions... I think that should be also a goal of yours...
If a information page doesn't serves it's propose is like it doesn't exists.

Just for showing that this maybe not be a problem of my interpretation i did:
@inject IJSRuntime jsRuntime

And then copied the code as it is on this page:
JSRuntime.InvokeAsync("convertArray", tk); -> Argument 2: cannot convert from 'uint[]' to 'object[]'

JSRuntime.InvokeVoidAsync("setElementText", divElement, "Text after render"); -> 'JSRuntime' does not contain a definition for 'InvokeVoidAsync'

jsRuntime.InvokeVoidAsync("exampleJsFunctions.focusElement", elementRef); -> An object reference is required for the non-static field, method, or property 'TicketEmiter.jsRuntime'

@page "/call-js-example"
@inject IJSRuntime JSRuntime;

<h1>Call JavaScript Function Example</h1>

<button type="button" class="btn btn-primary" @onclick="ConvertArray">
    Convert Array
</button>

<p class="mt-2" style="font-size:1.6em">
    <span class="badge badge-success">
        @convertedText
    </span>
</p>

@code {
    // Quote (c)2005 Universal Pictures: Serenity
    // https://www.uphe.com/movies/serenity
    // David Krumholtz on IMDB: https://www.imdb.com/name/nm0472710/

    private MarkupString convertedText =
        new MarkupString("Select the <b>Convert Array</b> button.");

    private uint[] quoteArray = new uint[]
        {
            60, 101, 109, 62, 67, 97, 110, 39, 116, 32, 115, 116, 111, 112, 32,
            116, 104, 101, 32, 115, 105, 103, 110, 97, 108, 44, 32, 77, 97,
            108, 46, 60, 47, 101, 109, 62, 32, 45, 32, 77, 114, 46, 32, 85, 110,
            105, 118, 101, 114, 115, 101, 10, 10,
        };

    private async Task ConvertArray()
    {
        var text =
            await JSRuntime.InvokeAsync<string>("convertArray", quoteArray);

        convertedText = new MarkupString(text);
    }
}

[guardrex]

there is something wrong with the info this page is providing for developers

You didn't show code from the topic or refer to a specific example or section. If there's a specific problem with text or example code, then _of course we want to take a look_. :+1:

I'll take a look as soon as I can. I'll try to get back to you by the end of day tomorrow (Friday), but it might be Monday before I can get to this.

[Ricardoaraujo00]

Instead of using JSInterop i'll be forced to change a value in a html tag with Blazor, and also need to be constantly checking for that change in javascript. Really nice....

[Ricardoaraujo00]

I was checking about what would be the problem until now and haven't found what the problem really is. I made a completely new project where i replicated the examples in this page and everything worked fine. Even in non async methods.
But by some reason, in my project, i can only get the JSRuntime injected object recognized in async methods, and not in the other ones. And the error "An object reference is required for the non-static field, method, or property 'TicketEmiter.JSRuntime'" is not very clear because it is referenced in the @inject action and is recognized in async methods. I must check this better... Maybe this error i mentioned should be changed...

[guardrex]

public static void DismissRemoveTicketModal(int status)

Static is only used in the extension method examples. That signature isn't for an extension method. Are you trying to create an extension method?

[Ricardoaraujo00]

No, i was not trying to create an extension method(a static method inside an instantiated class, as i understand in microsoft explanation about extension methods). Now i know that the JSRuntime object can be recognized in those static methods, but the way i inject it into a class is like this "public JsInteropClasses(IJSRuntime jsRuntime)" and not like this "@inject IJSRuntime JSRuntime;" as i exemplified in the first post. I think that error i got should be changed because the JSRuntime is recognized inside a normal method, which has not a object reference. Error feedback in Blazor is still no very well done yet. I've came across other errors that where not very clear and when clicking them in the error list i was taken to other part of the code that had nothing to do with the error, like the top parent html tag.

I also think that a way to improve understandability of the ways JS can be used, aiding that way more people adopt Microsoft technology, is to have a repository example for all the use cases, and well commented. I think that would facilitate de adoption of Microsoft technology, specially for new comers and somehow newbies like me. I think Microsoft technology is very good but i also think Microsoft fails a bit in providing a smooth entry for developers. Seems like there is a way of thinking like this "We are very big, who wants to learn our technology will have to have a very big background in .net or things will not be easy and we don't care much". I'm not saying it is really like that but that's the feeling i got in this few months. But i also think it's changing a bit. A technology can be very good, but at the end, wins the one that the owner provides a better adoption for programmers. And those separated examples having something better than code snippets, like repositories, would aid just in that.
This are just my 5 cents of opinion.
Thank you for listening to my "complain".
Thanks

[guardrex]

Thanks @Ricardoaraujo00 ...

The problem wasn't clear from your first post. You didn't show the full class (or say that you were injecting into a class in your remarks). What you showed could've been snippets of component code ... and that's what I thought you were trying to do, where using the @inject directive would be correct.

The IJSRuntime section (second bullet point) shows the exact approach you were seeking to implement. The first bullet in that section shows Razor component code and the way IJSRuntime is injected with the @inject directive. I've looked at that text, and I don't think we need changes there, but let me know if you think otherwise. I'm open to improving it.

I understand what you're saying about the error. I agree with you that misleading or cryptic errors can be very frustrating. You can make suggestions about the errors that were misleading directly to the product unit by opening an issue on their repo ...

https://github.com/dotnet/aspnetcore/issues

Show them the code example and the error message. They might be able to detect the problem precisely and produce a more meaningful error message.

a repository example for all the use cases

This topic, like many others here, is the first edition. I have a plan to overhaul these topics after .NET 5 releases. I'll work on their overall layout, the text in each section, and _yes!_ the example code. No doubt, I'll find many ways to improve the examples and place more examples into the common sample app. The work is tracked by ...

• Blazor project tracking #19286
• Blazor common sample enhancements #14216