OnAfterRenderAsync not triggered

user_2359073 0
Viewed 2780

I'm trying to figure out why I can't get the OnAfterRenderAsync method in the Blazor.

I can't seem to find a solution after trying multiple options and looking through Microsoft docs, I'm sure I'm missing something but I can't figure out what the issue is.

In the code below, the OnInit function is getting called, but the render ones aren't.


<h1>OnInit & OnInitAsync Demo</h1>

@foreach (var item in EventType)
{
    @item
    <hr />
}

@code{
    List<string> EventType = new List<string>();

    protected override void OnInitialized()
    {
        EventType.Add("Initilaized");
    }

    protected override void OnAfterRender(bool firstRender)
    {
        EventType.Add("OnAfterRender is called");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        EventType.Add("OnAfterRenderAsync is called");
        await Task.Delay(1000);
    }
}

This my .csproj file


<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

</Project>

And this is my _Host.cshtml


<app>
     <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

I've also tried it this way


@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))

Why aren't the events being triggered?

blazor
3 Answers

Try adding the following line to the end of body (not head) in _Host.cshtml:

<script src="_framework/blazor.server.js"></script>
user_139254830

if you used server mode, maybe you forgot MapBlazorHub in Startup.cs

app.UseEndpoints(endpoints =>
        {
            endpoints.MapDefaultControllerRoute();
            endpoints.MapBlazorHub();
            endpoints.MapControllers();
            endpoints.MapFallbackToPage("/_Host");
        });
user_161266370

As @user13925483 mentioned it is needed to add:

<script src="_framework/blazor.server.js"></script>

at the end of the _Host file.

But the question is why. From Microsoft doc:

OnAfterRender and OnAfterRenderAsync aren't called during the prerendering process on the server. The methods are called when the component is rendered interactively after prerendering. When the app prerenders:

  1. The component executes on the server to produce some static HTML markup in the HTTP response. During this phase, OnAfterRender and OnAfterRenderAsync aren't called.
  2. When the Blazor script (blazor.webassembly.js or blazor.server.js) start in the browser, the component is restarted in an interactive rendering mode. After a component is restarted, OnAfterRender and OnAfterRenderAsync are called because the app isn't in the prerendering phase any longer.

And even when you create empty Blazor server project, you can find in the Pages/_Host.cshtml this script line at the end of the HTML body:

@page "/"
@namespace WebApplication6Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebApplication6Server</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="WebApplication6Server.styles.css" rel="stylesheet" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <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.server.js"></script>  @* <-------- this line *@
</body>
</html>
user_61583410
Related