Add JS interop example to sample app about blazor.docs HOT 2 CLOSED

Can you also add an example of using JSInterop with a Blazor Component as well?

from blazor.docs.

@danroth27 Having some success and some trouble getting JS interop into the sample. First, I'll explain the two bits that are working, then I'll explain the approach that isn't.

For all examples, the index.html includes:

<script src="exampleJsInterop.js"></script>

Call JS from .NET

<button type="button" onclick="@TriggerJsPrompt">
    Trigger JavaScript Prompt
</button>

<h3 id="welcome" style="color:green;font-style:italic"></h3>

@functions {
    public async void TriggerJsPrompt()
    {
        var name = await ExampleJsInterop.Prompt("What's your name?");
        await ExampleJsInterop.Display($"Hello {name}! Welcome to Blazor!");
    }
}

public static Task<string> Prompt(string text)
{
    // showPrompt is implemented in wwwroot/exampleJsInterop.js
    return JSRuntime.Current.InvokeAsync<string>(
        "exampleJsFunctions.showPrompt",
        text);
}

public static Task<string> Display(string welcomeMessage)
{
    // displayWelcome is implemented in wwwroot/exampleJsInterop.js
    return JSRuntime.Current.InvokeAsync<string>(
        "exampleJsFunctions.displayWelcome",
        welcomeMessage);
}

window.exampleJsFunctions = {
  showPrompt: function (text) {
    return prompt(text, 'Type your name here');
  },
  displayWelcome: function (welcomeMessage) {
    document.getElementById('welcome').innerText = welcomeMessage;
  }
}

That works.

Call .NET from JS

Static approach

<button type="button" onclick="exampleJsFunctions.returnArrayAsyncJs()">
    Trigger .NET static method ReturnArrayAsync
</button>

@functions {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

window.exampleJsFunctions = {
  returnArrayAsyncJs: function () {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync').then(data => {
      data.push(4);
      console.log(data);
    })
  }
};

That works.

Instance approach

This is where things break down. 💥 🚑

I don't understand from the content in the topic how it's supposed to work.

In the topic example, where is "Blazor" supplied for the output "Hello, Blazor!"?

https://blazor.net/docs/javascript-interop.html#invoke-net-methods-from-javascript-functions

For the example in the sample app, what I'd like to do is have the component call the JS directly from a button (onclick="exampleJsFunctions.sayHello('Blazor')"). Then, the JS creates the .NET class HelloHelper and ultimately calls the HelloHelper.SayHello method ... perhaps that method just shoots the "Hello, Blazor!" to the console.

from blazor.docs.