如何在Blazor .NET 8 Server-Side（WebApp）中创建无布局Razor组件

在.NET 8的Blazor WebApp（Server-Side模式）里，无需依赖.cshtml页面，就能直接实现无布局的Razor组件，以下是几种实用方案：

方法一：组件内直接指定无布局 #

在目标Razor组件中，通过@layout指令直接设置布局为空：

@page "/no-layout-demo"
@layout null

<h1>无布局组件示例</h1>
<p>此内容不会被任何布局模板包裹</p>

访问/no-layout-demo路由时，组件会直接渲染内容，不应用默认或自定义布局。

方法二：路由映射时指定无布局 #

如果需要通过代码控制路由与无布局组件的绑定，可在Program.cs中针对特定路由设置：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddServerComponents();

var app = builder.Build();

app.MapRazorComponents<App>()
    .AddServerRenderMode();

// 单独映射无布局组件
app.MapRazorComponent<MyNoLayoutComponent>("/custom-no-layout")
    .AddServerRenderMode()
    .WithLayout(null);

这里的MyNoLayoutComponent是你的目标组件，无需在组件内额外设置@layout，通过.WithLayout(null)强制指定无布局。

方法三：创建空布局组件批量复用 #

若多个组件需要无布局，可先创建一个空布局组件EmptyLayout.razor：

@* EmptyLayout.razor *@
@Body

之后在需要无布局的组件中引用该布局：

@page "/batch-no-layout"
@layout EmptyLayout

<h2>复用空布局的组件</h2>

这种方式适合批量处理无布局需求，比逐个设置@layout null更易维护。

内容的提问来源于stack exchange，提问作者Oskar Fjeld