i used to be able to do the following
start a blazor web server project
Add a JS Folder inside wwwroot and create my js file
Link the file using script src="JS/Mapbox_Menu.js
inject IJSRuntime into page
[Inject] public IJSRuntime JS { get; set; }
Call the function
protected override Task OnAfterRenderAsync(bool firstRender) { JS.InvokeAsync("Testing"); return base.OnAfterRenderAsync(firstRender); }
and it would work perfectly
now it does not. when i select Blazor Web App with the following settings;
8, Auth-None, Configure for HTTPS - True, Interactive Render Mode - Server, Interactivity Location - Per page/component, Include sample pages - false, Do not use top-level statements - true, Enlist in .Net aspire orchestration - false
the i do the same setup for my js files as stated above. it loads but nothing is being called from the js file. i'll list the steps below and file contents below.
i added the script tags for my js file in the app.razor body tag under the and under the on my page inside the code section im doing the following:
[Inject] public IJSRuntime JS { get; set; }
protected override Task OnAfterRenderAsync(bool firstRender)
{
JS.InvokeAsync<bool>("Testing");
return base.OnAfterRenderAsync(firstRender);
}
and this does not work (however, it works perfectly inside a 6 blazor web server project). does 8 Blazor no longer support JS??
i used to be able to do the following
start a blazor web server project
Add a JS Folder inside wwwroot and create my js file
Link the file using script src="JS/Mapbox_Menu.js
inject IJSRuntime into page
[Inject] public IJSRuntime JS { get; set; }
Call the function
protected override Task OnAfterRenderAsync(bool firstRender) { JS.InvokeAsync("Testing"); return base.OnAfterRenderAsync(firstRender); }
and it would work perfectly
now it does not. when i select Blazor Web App with the following settings;
8, Auth-None, Configure for HTTPS - True, Interactive Render Mode - Server, Interactivity Location - Per page/component, Include sample pages - false, Do not use top-level statements - true, Enlist in .Net aspire orchestration - false
the i do the same setup for my js files as stated above. it loads but nothing is being called from the js file. i'll list the steps below and file contents below.
i added the script tags for my js file in the app.razor body tag under the and under the on my page inside the code section im doing the following:
[Inject] public IJSRuntime JS { get; set; }
protected override Task OnAfterRenderAsync(bool firstRender)
{
JS.InvokeAsync<bool>("Testing");
return base.OnAfterRenderAsync(firstRender);
}
and this does not work (however, it works perfectly inside a 6 blazor web server project). does 8 Blazor no longer support JS??
Share Improve this question edited Jan 29 at 21:04 Xskode Media asked Jan 29 at 19:54 Xskode MediaXskode Media 11 bronze badge 2 |1 Answer
Reset to default 0According to your description, I suggest you could recheck your JS link to make sure it has been linked inside the App.razor like below:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="BlazorApp2.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<script src="JS/Mapbox_Menu.js"></script>
<HeadOutlet @rendermode="InteractiveServer" />
</head>
Then you should make sure the file inside the wwwroot's js folder like below:
Below is my testing example, it works well.
My JS:
function Testing() {
alert("fired");
console.log("Testing function called");
}
My testing component :
@page "/test"
<h3>Test</h3>
@rendermode InteractiveServer
@inject IJSRuntime JS
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("Testing");
}
await base.OnAfterRenderAsync(firstRender);
}
}
Result:
Interactivity Location - Per page/component
and by default the homePage of the template project is NOT interractive. Make sure you have@rendermode InteractiveServer
on top of your page – Bisjob Commented Jan 30 at 15:54