Call Blazor method from JS without button click

How do I initiate call to DotNet method from JS.

• My index.razor calls JS 'Create' function and passes json filename that need to be opened.
• index.js opens the file and parses its content. As you could see that only after the file is parsed (after satifysing (data[i].name === "something") condition), window.sendName can return value to blazor.
• So, I would like to know how JS(index.js) could initiate call to blazor by itself, rather than initiated from navbar.razor.
• Because when call initiated from navbar.razor as below, navbar is loaded before json is parsed, so cant return proper value.

My code:

Index.razor: protected override async Task OnAfterRenderAsync(bool firstRender) { await JSRuntime.InvokeVoidAsync("Create", fileName); } JS: function Create(fileName) { $.getJSON(fileName, function (data) { data.forEach((eachline, i) => { if (data[i].name === "something") { window.sendName= () => { var val = "Abc"; return val; } } } } } NavBar.Razor: <a href="" @onclick=getName>GetName</a> public string? Name { get; set; } [JSInvokable] private async Task getName() { Name= await JSRuntime.InvokeAsync<string>("sendName"); } 

I tried using example in below link. But doesn't seem to work as I expect.

1 Answer

First, you need to create a helper class. The class should have a JSInvokable method that raises an event when called.

SendNameHelper.cs:

public class SendNameHelper { public event Action<string>? OnNameSent; [JSInvokable] public Task SendNameAsync(string name) { OnNameSent?.Invoke(name); return Task.CompletedTask; } } 

Register this class as a service in Program.cs. Blazor components are now able to inject the service and subscribe to the event.

Program.cs:

// for blazor wasm builder.Services.AddSingleton<SendNameHelper>(); // if blazor server add as scoped builder.Services.AddScoped<SendNameHelper>(); 

Index.razor should use IJSRuntime to call the create JS function and pass to the function a reference to the SendNameHelper service.

Index.razor:

@inject IJSRuntime JS @inject SendNameHelper SendNameHelper ... @code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { var sendNameHelperReference = DotNetObjectReference.Create(SendNameHelper); await JS.InvokeVoidAsync("create", fileName, sendNameHelperReference); } } } 

NavBar.razor should simply inject the SendNameHelper service and subscribe to the OnNameSent event.

NavBar.razor:

@inject SendNameHelper SendNameHelper @implements IDisposable ... @code { protected override void OnInitialized() { SendNameHelper.OnNameSent += HandleNameSent; } private void HandleNameSent(string name) { // do stuff with name Console.WriteLine(name); } public void Dispose() { SendNameHelper.OnNameSent -= HandleNameSent; } } 

And finally create function should use the SendNameHelper reference to invoke the SendName method:

JS:

window.create = (fileName, dotNetHelper) => { $.getJSON(fileName, function (data) { data.forEach((eachline, i) => { if (data[i].name === 'something') { dotNetHelper.invokeMethodAsync('SendNameAsync', 'something'); } }); dotNetHelper.dispose(); }); };