Calling a Blazor method From JavaScript

Question

I'm experimenting with Blazor in Visual Studio, specifically with calling Blazor code from JavaScript. I'm reasonably confident that I've got all the right libraries in place. However, when I attempt to call my Blazor method with invokeMethodAsync, I get the message "no .net call dispatcher has been set". In my Index.Html file, I have this:

<script> DotNet.invokeMethodAsync("BlazorFour.App", "HelloYou").then(data => alert(data), reason => alert(reason)); </script>

(It's the alert(reason) that generates the error message)

I've added a class file to my Blazor project and it contains this:

using Microsoft.JSInterop;
using System.Threading.Tasks;
public class HelloWorld
{
[JSInvokable]
public static Task<string> HelloYou()
{
    return Task.FromResult("Hello, ");
}
}

I've used all the templates in Visual Studio and the dotnet -new blazor commandline utility to create my start points but get the same message in all of the projects. It's seems likely to me that I'm missing something fundamental here.

Answer 1

Peter Vogel: It would be great if you could call Blazor C# methods from your JavaScript code. Right now, that's not quite possible: Simply calling Blazor C# from JavaScript won't work (you'll get a message about a call dispatcher not being available).

What you can do, however, is once your Blazor code is running, call JavaScript code from your C# code. Once you've done that, your JavaScript code can, in turn, call Blazor code.

Hope this solves the problem...

Answer 2

I'm using server-side-blazor

I was getting js errors No .NET call dispatcher has been set

So yep .. looks like Blazor wasn't initialized..

Not keen on a timeout .. seems hacky and gives a laggy UI

Not keen on 'call JavaScript code from your C# code. Once you've done that, your JavaScript code can, in turn, call Blazor code.' .. again seems hacky

This works for me ..

async function myBlazoryFunctionThing() {
    // see https://sourcegraph.com/github.com/aspnet/AspNetCore@bd65275148abc9b07a3b59797a88d485341152bf/-/blob/src/Components/Web.JS/src/Boot.Server.ts#L41:9
   await window.Blazor.reconnect();
   
   ..now it's safe to do my stuff
}

it 'seems' that Blazor.reconnect() will re-use the existing connection (if there is one)

...so it's not actually 're-connecting' (so 'seems' not much overhead ;-))

Answer 3

I tried a setTimeout (5000 ms delay) and it worked for me.(of course it is not needed to use the setTimeout every time, just the first time).

e.g. setTimeout( DotNet.invokeMethod(...), 5000);

Answer 4

I guess this is a timing issue, not everything is loaded/initialized.

Have you tried putting the js code in a button onclick event?

Answer 5

using Microsoft.JSInterop;

[Inject] protected IJSRuntime JSRuntime { get; set; }

From your blazor function call this function from this method

await JSRuntime.InvokeAsync<object>("fnToJavascriptCall", DotNetObjectReference.Create(this));

Create this function in blazor file

[JSInvokable]
        public async Task fnToCallFromJavascript(int param1, int param2)
        {
            //Do some stuff
            StateHasChanged();
        }

In your javascript file

var fnToJavascriptCall = function (param1,currentInstance)
{
    //Do your stuff
    currentInstance.invokeMethodAsync("fnToCallFromJavascript", param1, param2);
}

Answer 6

The No .NET call dispatcher has been set error can be received when the JavaScript interop is used at the wrong time. Have a look at this StackOverflow question.