如何在Blazor中设置Layout=null实现@page页自定义完整HTML结构

一、全局/单页置空布局实现全自定义HTML #

如果需要在单个@page页面自行编写从<html>到</html>的完整代码，直接在页面顶部声明@layout null即可，该属性会强制当前页面不继承任何预设布局，示例代码如下：

@page "/custom-full-page"
@layout null
@* 以下可以直接写完整HTML结构 *@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义全页面</title>
    <link rel="stylesheet" href="~/css/adminlte.min.css">
</head>
<body>
    @* 自定义页面内容 *@
    <script src="~/js/adminlte.min.js"></script>
</body>
</html>

如果有多个页面需要使用空布局，也可以单独创建空布局组件EmptyLayout.razor，内容仅保留@Body占位符，后续需要的页面统一指定@layout EmptyLayout即可。

二、Blazor多层布局实现逻辑 #

Blazor支持布局嵌套，完全可以实现你之前MVC模式下的分层布局效果，操作步骤如下：

• 第一层根布局：通常为App.razor（.NET 8+ Blazor Web App）或MainLayout.razor，存放全局通用的样式引入、公共脚本、基础DOM结构，预留@Body占位符
• 第二层业务布局：例如创建AdminLayout.razor，顶部指定@layout MainLayout继承根布局，在该组件内编写AdminLTE的侧边栏、顶部导航栏代码，仅将内容区域留为@Body
• 内容页：后台相关的页面顶部指定@layout AdminLayout，即可自动继承两层布局的公共结构，仅需要编写业务内容代码即可

三、布局动态数据渲染方案 #

对应你之前MVC中继承Layout ViewModel实现动态菜单、用户信息渲染的需求，Blazor有两种常用实现方案：

1. 注入全局状态服务：创建UserPermissionService类，注册为Scoped作用域，内部存储当前登录用户的用户名、头像、权限列表等信息，在布局组件中直接注入该服务即可读取数据，动态渲染菜单、控制导航项显隐
2. 级联参数传递：在根布局中通过<CascadingValue>将用户信息、权限列表向下传递，所有子布局、内容页都可以通过[CascadingParameter]属性接收对应值，无需重复注入

内容的提问来源于stack exchange，提问作者Rikudou En Sof