Blazor Web App (.NET 8)：如何在 WebAssembly 渲染的页面上使用服务器渲染的组件？

Question

假设我在 Blazor Web 应用程序 (.NET 8) 中有一个 WebAssembly 渲染的页面：

@page "/counter"
@rendermode InteractiveWebAssembly

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

<ServerSideComponent></ServerSideComponent>

@code {
    private int currentCount = 0;

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

我有一个带有服务器端渲染的 Razor 组件：

@rendermode InteractiveServer

<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++;
    }
}

有没有办法在 WebAssembly 渲染的页面上拥有服务器端渲染的 blazor 组件？我希望页面在 WebAssembly 中呈现，组件在服务器上呈现。

当我尝试这样做时，我得到了这个异常：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常渲染组件：无法创建“BlazorApp4.Client.ServerSideComponent”类型的组件，因为其 渲染模式 'Microsoft.AspNetCore.Components.Web.InteractiveServerRenderMode' 是 WebAssembly 渲染不支持。系统不支持异常： 无法创建类型的组件 'BlazorApp4.Client.ServerSideComponent' 因为它的渲染模式 'Microsoft.AspNetCore.Components.Web.InteractiveServerRenderMode' 是 WebAssembly 渲染不支持。

Answer 1

如果您使用

@rendermode

InteractiveWebAssembly

，则无法使用服务器上定义的组件。最好的方法是拥有一个具有默认行为的页面（未指定渲染模式，因此它将使用服务器端渲染），然后从该页面调用这两个组件。

然后你可以定义组件的渲染模式，如下所示：

@page "/counter"

<PageTitle>Counter</PageTitle>

<ClientSideComponent @rendermode=WebAssemblyInteractive />
<ServerSideComponent @rendermode=ServerInteractive />

@code {
   // ...
}

请考虑到您的

ServerSideCompoenent

也必须位于客户端项目中，并且无法访问任何服务器资源（例如数据库）。如果您需要访问服务器资源，您必须在服务器端项目中创建一个控制器，并从客户端组件作为 Web API 请求调用它。