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、 等所有 Blazor 功能
示例：
@inherits LayoutComponentBase@Body My App
在页面中应用 Layout
两种方式任选其一：
单页指定：在某个 .razor 页面顶部加 @layout MainLayout 全局默认：在 App.razor 中的 内设置 DefaultLayout，所有未显式指定 layout 的页面自动使用它
注意：登录页、错误页等无需通用导航的页面，可通过 的条件逻辑跳过默认布局。
嵌套布局（多级 MasterPage 场景）
当不同模块（如用户管理、订单中心）需要各自侧边栏+全局页眉页脚时，就用嵌套：
子布局（如 UserLayout.razor）也 @inherits LayoutComponentBase，并声明 @layout MainLayout 子页面引用 UserLayout，它会先套用 MainLayout，再把内容渲染进 @Body 位置 层级清晰：全局布局 → 模块布局 → 页面内容
样式隔离与维护建议
Blazor 支持 CSS 隔离，推荐为每个 Layout 单独配 MainLayout.razor.css：
样式只作用于该 Layout 及其子内容，不污染全局 避免在 _Host.cshtml 中硬编码导航或页脚——这些应全部移入 Layout 公共资源（如 logo、版权信息）可提取成 @code 属性或服务注入，便于统一管理
基本上就这些。不是换个名字，而是用组件化思路真正解耦 UI 结构。
以上就是Blazor 共享布局 MasterPage 设置方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1443262.html
微信扫一扫 
支付宝扫一扫 
