本文介绍如何为 Blazor 应用创建可重用布局组件。
有些应用元素（例如菜单、版权消息和公司徽标）通常是应用整体布局的一部分。 将这些元素的标记副本放入应用的所有组件是一种效率较低的做法。 每次更新其中一个元素时，都必须同时更新使用该元素的每个组件。 这种方法的维护成本很高，并且如果缺少更新，还可能会导致内容不一致。 “布局”可以解决这些问题。
Blazor 布局是一个 Razor 组件，它与引用它的组件共享标记。 布局可以使用数据绑定、依赖关系注入和组件的其他功能。
要创建布局组件：
- 创建由 Razor 模板或 C# 代码定义的 Razor 组件。 基于 Razor 模板的布局组件像普通 Razor 组件一样使用 文件扩展名。 由于布局组件是在应用组件间共享的，因此它们通常放置在应用的 或 文件夹中。 但是，布局可以放置在使用它的组件可访问的任何位置。 例如，可以将布局放在使用它的组件所在的同一文件夹中。
- 组件继承自 。 为布局内呈现的内容定义 属性（ 类型）。
- 使用 Razor 语法 在布局标记中指定呈现内容的位置。
以下 组件显示布局组件的 Razor 模板。 布局继承 并在导航栏 () 和页脚 () 之间设置 。
？
在从 Blazor 项目模板创建的应用中， 组件就是应用的默认布局。 Blazor 的布局采用 Flexbox layout model (MDN documentation)（W3C 规范）。
Blazor 的 CSS 隔离功能将独立 CSS 样式应用于 组件。 按照惯例，样式由相同名称的随附样式表 提供。 ASP.NET Core 框架的样式表实现可以在 ASP.NET Core 参考源（ GitHub 存储库）中查阅：
- Blazor Web App
- Blazor WebAssembly
Blazor 的 CSS 隔离功能将独立 CSS 样式应用于 组件。 按照惯例，样式由相同名称的随附样式表 提供。
Blazor 框架的布局文件位置和命名空间随时间而变。 根据 Blazor 的版本和你要构建的 Blazor 应用的类型，你可能需要在使用它时指明布局的命名空间。 在引用布局实现时，如果没有指明布局的命名空间就找不到布局，请采用以下任一方法：
- 向 文件添加 指令，用于指定布局的位置。 在以下示例中，名称为 的布局文件夹位于 文件夹中，应用的命名空间为 ：
- 在使用此布局的组件定义顶部添加 指令：
- 完全限定使用布局的命名空间：
使用 Razor 指令将布局应用于具有 指令的可路由 Razor 组件。 编译器将 转换为 ，并将特性应用于组件类。
以下 组件的内容插入到 中的 位置：
？
以下呈现的 HTML 标记由前面的 和 组件生成。 此处不会出现无关标记，以使读者能够专注于这两个相关组件提供的内容：
- 标头（）中的 H1“数据库”标题（）、导航栏（），以及页脚（）中的商标信息来自 组件。
- H2“剧集”标题（）和剧集列表（）来自 组件。
直接在组件中指定布局会覆盖默认布局：
- 由从 文件导入的 指令设置，如下文向组件文件夹应用布局部分所述。
- 设置为应用的默认布局，详见本文后面的将默认布局应用于应用部分所述。
应用的每个文件夹都可以选择包含名为 的模板文件。 编译器将导入文件中指定的指令包括在同一文件夹中的所有 Razor 模板内，并在其所有子文件夹中以递归方式包括。 因此，包含 的 文件可确保文件夹中的所有组件都使用 组件。 无需将 重复添加到文件夹和子文件夹内的所有 Razor 组件 ()。
？
文件类似于 Razor 视图和页面的 _ViewImports.cshtml 文件，但专门应用于 Razor 组件文件。
在 中指定布局会覆盖指定为路由器的默认应用布局的布局，如下一部分所述。
在 组件的 组件中指定默认应用布局。 使用 参数设置布局类型：
在前面的示例中， 占位符是布局（例如，如果布局文件名为 ，则它为 ）。 可能需要根据 .NET 版本和 Blazor 应用的类型来确定布局的命名空间。 有关详细信息，请参阅使布局命名空间可用部分。
在 组件的 中将布局指定为默认布局是一种实用的做法，因为你可以为每个组件或每个文件夹替代布局，如本文前面几个部分所述。 建议使用 组件设置应用的默认布局，因为它是使用布局的最通用且灵活的方法。
若要为任意 Razor 模板内容设置布局，请使用 组件指定布局。 您可以在任何 Razor 组件中使用 。 下面的示例为 组件的 模板 () 设置了一个名为 的布局组件。
可能需要根据 .NET 版本和 Blazor 应用的类型来 identity 布局的命名空间。 有关详细信息，请参阅使布局命名空间可用部分。
组件可以引用一个布局，该布局又可以引用另一个布局。 例如，嵌套布局可用于创建多级菜单结构。
以下示例演示如何使用嵌套布局。 向组件应用布局部分中显示的 组件是要显示的组件。 该组件引用 组件。
以下 组件是前文所示示例的修改版本。 标头和页脚元素已经删除，并且布局引用了另一个布局 。 在 中出现 的位置，呈现 组件。
？
组件包含顶级布局元素，其中包含有标头 () 和页脚 () 元素。 具有 组件的 会在出现 的位置呈现。
？
以下呈现的 HTML 标记由前面的嵌套布局生成。 此处不会出现无关标记，以使读者能够专注于这三个相关组件提供的嵌套内容：
- 标头 ()、生产导航栏 () 和页脚 () 元素以及它们的内容来自于 组件。
- H1“数据库”标题（）、剧集导航栏（）和商标信息（）来自 组件。
- H2“剧集”标题（）和剧集列表（）来自 组件。
当可路由组件集成到 Razor Pages 应用中时，该应用的共享布局可与这些组件配合使用。 有关详细信息，请参阅将 ASP.NET Core Razor 组件集成到 ASP.NET Core 应用中。
当可路由组件集成到 Razor Pages 应用中时，该应用的共享布局可与这些组件配合使用。 有关详细信息，请参阅预呈现和集成 ASP.NET Core Razor 组件。
若要从 Razor 子组件控制布局内容，请参阅 ASP.NET Core Blazor 部分。
- ASP.NET Core 中的布局
- Blazor 示例 GitHub 存储库 ()（下载方法）
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/54214.html