admin管理员组

文章数量:1316408

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??

  • blazor
  • blazor-server-side
  • -8.0
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
  • You are probably statically rendering the page - see learn.microsoft/en-us/aspnet/core/blazor/components/… – MrC aka Shaun Curtis Commented Jan 29 at 23:26
  • you are using the setting 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
Add a comment  | 

1 Answer 1

Reset to default 0

According 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:

本文标签： Blazor Web App doesnt seem to let JavaScript work in projectwhyStack Overflow

版权声明：本文标题：Blazor Web App doesnt seem to let JavaScript work in project, why? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741999952a2410808.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。