Blazor 共享布局 MasterPage 设置方法

Blazor 使用 Layout 组件替代 ASP.NET Web Forms 的 MasterPage，功能一致且更灵活；通过继承 LayoutComponentBase、定义 @Body 占位符、支持依赖注入与嵌套布局实现解耦式 UI 结构。

Blazor 没有传统 ASP.NET Web Forms 的 MasterPage，但它的 Layout 组件 就是等效替代方案——功能一致、更灵活，且原生支持数据绑定、依赖注入和嵌套。

创建 Layout 组件（相当于 MasterPage）

布局组件本质是一个继承 LayoutComponentBase 的 Razor 组件，必须包含 @Body 占位符：

• 在 Shared/ 文件夹下新建 MainLayout.razor
• 顶部写 @inherits LayoutComponentBase
• 在需要显示页面内容的位置插入 @Body
• 可直接使用 @inject、@code、<navlink></navlink> 等所有 Blazor 功能

示例：

@inherits LayoutComponentBase
<header><h1>My App</h1></header>
<nav><NavLink href="/">Home</NavLink></nav>
@Body
<footer>&copy; @DateTime.Now.Year</footer>

登录后复制

在页面中应用 Layout

两种方式任选其一：

• 单页指定：在某个 .razor 页面顶部加 @layout MainLayout
• 全局默认：在 App.razor 中的 <router></router> 内设置 DefaultLayout，所有未显式指定 layout 的页面自动使用它

注意：登录页、错误页等无需通用导航的页面，可通过 <routeview></routeview> 的条件逻辑跳过默认布局。

标签： css html go 编码 app ai .net red