为什么 @rendermode InteractiveAuto 在 .NET 8.0 Blazor 中不起作用？

Question

我使用以下设置创建了一个 Blazor Web 应用程序项目。

当我启动时，尽管

Counter.razor

组件包含

@rendermode InteractiveAuto

，但 Counter 页面不会下载 WASM 并从服务器切换。在浏览器的“网络”选项卡中，Websocket 保持活动状态。

此外，我将以下代码放入

NavMenu.razor

组件中。文本永远不会切换到 WASM。

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

根据这个视频，应该下载WASM并切换。

为了解决这个问题，我尝试使用不同的浏览器并使用 InteractiveAuto 渲染模式制作自己的组件。

这里有什么问题？

客户项目中的

Counter.razor

文件：

@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

文件：

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

await builder.Build().RunAsync();

服务器项目中的

Program.cs

文件：

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

文件。

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

Answer 1

由于您的 NavMenu 组件仍处于 Static（默认）状态，因此使用

@rendermode InteractiveAuto

将渲染模式应用于每个页面只会影响当前组件，不会影响父组件中的其他子组件

如果您在 Counter 组件中添加这一行，您将看到：

您可以查看此文档了解更多详细信息：具有不同渲染模式的子组件

为什么 @rendermode InteractiveAuto 在 .NET 8.0 Blazor 中不起作用？

问题描述投票：0回答：1

1个回答

最新问题

为什么 @rendermode InteractiveAuto 在 .NET 8.0 Blazor 中不起作用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1