Javascript not working when using Blazor WASM prerendering

Question

Javascript not working when using Blazor WASM prerendering

590 Views Asked by Tobias At 19 April 2025 at 08:16

I wanted to implement Prerendering with my Blazor WASM hosted application, but the application doesn't leave the "prerendering" mode. At least the method "onafterrender" doesn't get called in any component. In addition none of my javascript functions / scripts are working.

Ive followed the instructions on

Ive tried to play around with the order and removing of script in the cshtml file as well as in the programm.cs but nothing worked

Original Q&A

There are 1 best solutions below

**Vikram Reddy** · Answer 1

I followed the Prerendering Configuration. I don't see any issue. I'm able to call the javascript method on Index.razor -> OnAfterRenderAsync()

_Host.cshtml:

@page "/"
@using BlazorApp7HostedPrerenderingTest.Client
@using Microsoft.AspNetCore.Components.Web
@namespace BlazorApp7HostedPrerenderingTest.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorApp7HostedPrerenderingTest.Client.styles.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png"/>
    <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
</head>
<body>
    <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>

    <script src="_framework/blazor.webassembly.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

Index.razor:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

@code{
    [Inject] public IJSRuntime JS { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        await JS.InvokeVoidAsync("hello", "Vikram Reddy");
    }
}

Screenshot:

Sample GitHUb project created. Please check the link.

Javascript not working when using Blazor WASM prerendering

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in C#

Related Questions in SINGLE-PAGE-APPLICATION

Related Questions in BLAZOR-WEBASSEMBLY

Related Questions in PRE-RENDERING

Trending Questions

Popular # Hahtags

Popular Questions