How to call C# function from javascript in the new Blazor .NET 8 Web App Template Auto (Server and WebAssembly)

Question

This is my JavaScript function in app.js that when window is resizing it call c# function that log a message in console

window.addEventListener('resize', function () {
    DotNet.invokeMethodAsync("BlazorTest.Client", "SeyHello")
});

and this is my C# function

[JSInvokable]
public static void SeyHello()
{
    Console.WriteLine("Hello form js");
}

and this is my project template and the Interactive render mode is Auto (Server and WebAssembly)

Question1: where should I put app.js because we have two wwwroot in this project

Question2: if I put app.js in BlazorTest.Client how to reference it to App.razor in BlazorTest

Question3: where should I put my c# function in BlazorTest or BlazorTest.Client

Question4: in razor file that I placed my c# function what is the @rendermode should it be

Finally: I need the code that work in the new Blazor .NET 8 Web App Template

Answer 1

Question1: in this case just put the app.js in one of wwwroot folder, it's not important which one

Question2: you need to define a component in BlazorTest.Client with the name HeadContent.razor and reference the app.js by HeadContent tag and use the component inside App.razor in BlazorTest

@rendermode InteractiveWebAssembly 

<HeadContent>
    <script src="/app.js"></script>
</HeadContent>

Question3: you can put it in BlazorTest.Client or BlazorTest both works fine

Question4: it should be client side render which is

@rendermode InteractiveWebAssembly 

Finally:

create app.js file inside wwwroot of BlazorTest and add these codes inside it

var GLOBAL = {};
GLOBAL.DotNetReference = null;
function setDotnetReference(pDotNetReference) {
    GLOBAL.DotNetReference = pDotNetReference;
}

window.addEventListener('resize', function () {
    
    GLOBAL.DotNetReference.invokeMethodAsync( 'OnWindowResized');
});

create ResizeHello.razor component and placed inside BlazorTest.Client and use it inside App.razor in BlazorTest and add these codes to it

@rendermode InteractiveWebAssembly 


@code
{
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {

        if (firstRender)
        {
            var lDotNetReference = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync("setDotnetReference", lDotNetReference);
        }
       

        await base.OnAfterRenderAsync(firstRender);
    }

    [JSInvokable]
    public void OnWindowResized()
    {
        Console.WriteLine("Hello message");
    }

}

Every time you resize the window, it logs Hello message