Blazor University (2)布局 — 创建 Blazor 布局
原文链接:https://blazor-university.com/layouts/
布局
Blazor 布局类似于 ASP Webforms 母版页的概念,与 ASP MVC 中的 Razor 布局相同。
几乎网络上的每个网站都有一个模板用于整个网站(页面顶部的品牌,底部的版权)或网站的特定子部分(例如站点管理页面上的特定菜单结构)。
这是通过创建一个视图来实现的,该视图充当当前页面内容的 HTML 包装器,模板包含一个占位符,指示包装页面的内容应该出现在哪里。
<h1>This is the start of my reusable layout</h1>
<div class="Content">-- Some kind of indicator to specify the page's content will go here --
</div>
<footer>This is the end of the layout
</footer>
然后,各个页面可以选择指定一个布局,希望将其内容包含在其中。
-- Some way of indicating which template to wrap this page's content in --
<h1>This is the content of your embedded page</h1>
生成的 HTML 看起来像这样
<h1>This is the start of my reusable layout</h1>
<div class="Content"><h1>This is the content of your embedded page</h1>
</div>
<footer>This is the end of the layout
</footer>
创建 Blazor 布局
源代码[1]
您打算用作页面布局模板的任何内容都必须来自 LayoutComponentBase
类。要指示您希望页面内容出现在哪里,您只需输出 Body
属性的内容。
@inherits LayoutComponentBase
<div class="main"><header><h1>This is the header</h1></header><div class="content">@Body</div><footer>This is the footer</footer>
</div>
请注意,这不是整个 HTML 页面。Blazor 布局仅适用于 Blazor 在 wwwroot\index.html
页面中定义的 HTML 部分,在默认的 Blazor 应用程序中,这是 <app>
元素中的所有内容。目前无法在此范围之外更改 HTML 元素的属性,除非使用 JavaScript 互操作。
使用布局
为应用程序指定默认布局
指定布局的最通用方法是编辑 /Pages/_Imports.razor 文件并编辑单行代码以标识不同的布局。
@layout MainLayout
布局的名称是强类型的。如果存在指定名称的布局,Blazor 会高亮正确语法的代码,如果标识符不正确,编译会失败。
注意:当然,如果您只想更改现有布局的外观,您可以更改 /Shared/MainLayout.razor 文件。
为应用程序的某个区域指定默认模板
源代码[2]
如果您的应用程序有单独的区域,例如“Admin”区域,则可以指定用于该区域内所有页面的默认布局,只需将它们分组到具有自己的 _Imports.razor 文件的子文件夹中。
创建一个新的 Blazor 客户端应用程序,然后更新导航菜单以包含指向我们将很快创建的新页面的链接。
打开 /Shared/NavMenu.razor 文件。
找到最后一个
<li>
元素,它应该包含一个<NavLink>
元素。复制
<li>
元素。将 NavLink 的
href
属性更改为admin/users
。将链接的文本更改为管理员用户。
接下来我们将创建一个非常基本的页面
在解决方案资源管理器中展开 /Pages 节点。
创建一个名为 Admin 的文件夹。
在文件夹中创建一个名为 AdminUsers.razor 的新文件。
@page "/admin/users"
<h2>Users</h2
注意: 页面的 URL 不必反映文件夹结构。
现在运行应用程序,该应用程序将具有一个名为“管理员用户”的新菜单项。当您单击该菜单项时,它将显示一个非常基本的页面,其中仅显示“Users”。接下来,我们将为所有管理页面创建一个默认布局。
在 Admin 文件夹中创建另一个名为 _Imports.razor 的新文件。
输入以下代码。
@layout AdminLayout
此时,应用程序中没有名为 AdminLayout 的文件,因此您应该在 Visual Studio 中看到名称下方有一条红线,表示找不到该文件。您可以通过在 /Shared 文件夹中创建 AdminLayout.razor 来解决此问题。
@inherits LayoutComponentBase
<h1>Admin</h1>
@Body
如果您现在运行该应用程序并单击管理员用户链接,您将看到仅由 <h1>
和 <h2>
组成的简陋页面。我们将在嵌套布局部分解决这个问题,但现在我们将使用它作为练习,了解如何从页面本身显式指定布局。
为单个页面显式指定布局
源代码[3]
到目前为止,我们已经看到可以在 /Pages/_Imports.razor 文件中指定默认布局。我们还看到,可以通过 Blazor 找到更接近其正在呈现的页面的更具体的 _Imports.razor 文件来覆盖此设置。指定要使用的模板的最后(也是最明确的)级别是使用 @layout
指令在页面本身中指定它。
@page "/admin/users"
@layout MainLayout
<h2>Users</h2>
再次运行应用程序并单击管理员用户链接现在将使用应用程序的标准布局显示基本页面。
嵌套布局
源代码[4]
指定 @layout
(显式或通过 _Imports.razor 文件)时,Blazor 将使用 LayoutAttribute
装饰生成的目标类。
[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MainLayout))]
public class AdminUsers : Microsoft.AspNetCore.Components.ComponentBase
{
}
注意: 生成的 .cs
文件可以在项目的 obj\Debug\netstandard2.0\Razor\ 文件夹中找到。
Blazor 将为任何 ComponentBase
的子类使用 LayoutAttribute
。不仅页面来自这个类,而且 LayoutComponentBase
也是如此!这意味着自定义布局也可以有自己的父布局。
接下来,我们将创建一个自定义布局
编辑 /Shared/AdminLayout.razor 文件。
通过添加
@layout MainLayout
明确声明它使用 MainLayout 作为其父级。
@inherits LayoutComponentBase
@layout MainLayout
<h1>Admin</h1>
@Body
首先,我们从 LayoutComponentBase
继承视图,然后告诉 Blazor 我们希望此布局包含在 MainLayout Razor 视图中,最后我们通过输出 Body 属性的内容来呈现使用者视图声明的任何内容。
为了确保 AdminUsers 页面使用 AdminLayout,请确保 AdminUsers.razor 文件顶部没有显式的 layout
。这将告诉 Blazor 使用 Pages/Admin/_Imports.razor 中指定的布局。
@page "/admin/users"<h2>Users</h2>
参考资料
[1]
源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Layouts/CreatingALayout
[2]
源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Layouts/UsingALayout
[3]
源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Layouts/SpecifyingALayoutExplicitly
[4]
源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Layouts/NestedLayouts
Blazor University (2)布局 — 创建 Blazor 布局相关推荐
- 【翻译】在Ext JS和Sencha Touch中创建自定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
- HarmonyOS 使用DevEcoStudio创建一个xml布局以及引用布局
文字描述创建 打开DevEco ,entry > src > main > resources > base",右键点击"layout"文件夹,选 ...
- 计算机设备布局图,针对不同设备类型创建仪表板布局
仪表板可以包括屏幕大小各异的不同类型的设备的布局.将这些布局发布到 Tableau Server 或 Tableau Online 时,查看仪表板的用户将体验到专门针对其手机.平板电脑或台式机优化的设 ...
- SharePoint 2013 入门教程之创建页面布局及页面
原文:SharePoint 2013 入门教程之创建页面布局及页面 在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoi ...
- 如何在 SAP 轻松访问屏幕上以不同的布局创建不同的启动板
目的 您将了解如何在 SAP 轻松访问屏幕上以不同的布局创建不同的启动板. 在脚本文件夹中创建此文件,用于自定义 SAP 轻松访问屏幕:SAPLSMTR_NAVIGATION.E0100.sjs // ...
- Android 开发 -- 开发第一个安卓程序、Android UI开发(布局的创建:相对布局和线性布局、控件单位:px pt dp sp、常用控件 、常见对话框、ListView)
文章目录 1. 开发第一个Hello World程序 1.1 开发程序 1.2 认识程序中的文件 1.3 Android程序结构 1.4 安卓程序打包 2. Android UI开发 2.1 布局的创 ...
- azure创建centos_如何使用Blazor和Azure计算机视觉创建光学字符读取器
azure创建centos 介绍 (Introduction) In this article, we will create an optical character recognition (OC ...
- SharePoint 创建页面布局
一.前言 文章成体系,如果有不明白的地方请查看前面的文章. 二.目录 1.创建页面布局 2.首次使用页面布局 3.修改页面布局 4.使用页面布局 5.最终效果 1.创建页面布局 (1)打开设计管理器, ...
- 研究区域制图 | 在 ArcGIS Pro中创建地图布局
研究区域制图 | 在 ArcGIS Pro中创建地图布局 数据准备 首先需要两个图层,一个是市区图层,一个是省行政区划图层,我这里以吉林省以及吉林省长春市为例 新建布局 选择横向A5即可 添加参考线 ...
最新文章
- 防水+四扬声器诺基亚X7细节
- 021_jdbc-mysql入门
- ActiveMQ的network connectors部署集群(七)
- (四)ElasticSearch之数据
- [Node.js] 模块化 -- fs文件读取模块
- 2020后半年iPhone取消附赠耳机?分析师上调AirPods出货量预估
- 什么是Tensor Flow和lite以及数据流图
- mybatis注解开发-动态SQL
- JavaCV入门教程目录(JavaCV从入门到实战,JavaCV指南手册,免费JavaCV教程)
- matlab K近邻均值平滑滤波,K近邻均值滤波
- ajax批量上传数据,Ajax上传数据和上传文件(三种方式)
- android怎么实现推送消息推送消息,Android实现系统消息推送
- UVA - 10066The Twin Towers(LIS)
- Java游戏项目之黄金矿工
- 四面体 matlab,matlab生成四面体单元
- python基础练习之【求三角形周长和面积】
- 两个自我的对话和博弈
- 日记侠:你想开始写文章吗?(可以赚钱的)
- JavaScript 网页禁用屏蔽常用操作
- TabLayout的属性介绍