CODEWITHSUNDEEP
c#asp.net-coreblazor
Lukas
Lukas

Reputation: 2243

Why is @rendermode InteractiveAuto not working in .NET 8.0 Blazor?

I created a Blazor Web App project with the following settings.

enter image description here

When I launch, despite the Counter.razor component containing @rendermode InteractiveAuto, the Counter page does not download WASM and switch over from server. In the browser's Network tab the websocket remains active.

Additionally, I put the following code into the NavMenu.razor component. The text never switches over to WASM.

<h1 class="text-muted">Render @(OperatingSystem.IsBrowser() ? "Wasm" : "Server")</h1>

According to this video, it should download WASM and switch over.

To solve it, I tried using different browsers and making my own component with the InteractiveAuto render mode.

What is the issue here?

Counter.razor file in the client project:

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Program.cs file in the client project:

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

await builder.Build().RunAsync();

Program.cs file in the server project:

using TestBlazorProj.Client.Pages;
using TestBlazorProj.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

app.Run();

App.razor file in the server project.

 <!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="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="TestBlazorProj.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Upvotes: 4

Views: 6821

Answers (1)

Ruikai Feng
Ruikai Feng

Reputation: 11826

Beacuse your NavMenu component is still in Static(by default), applying a render mode per page with @rendermode InteractiveAuto would only affect the current component; it won't affect other child components in the parent component.

If you add this line

<h1 class="text-muted">Render @(OperatingSystem.IsBrowser() ? "Wasm" : "Server")</h1>

in your Counter component, you would see:

enter image description here

You could check this document for more details: Child components with different render modes

Upvotes: 4

Related Questions