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 互操作。

705a39b2d216f600e1b8f908e3182950.png

使用布局

为应用程序指定默认布局

指定布局的最通用方法是编辑 /Pages/_Imports.razor 文件并编辑单行代码以标识不同的布局。

@layout MainLayout

布局的名称是强类型的。如果存在指定名称的布局,Blazor 会高亮正确语法的代码,如果标识符不正确,编译会失败。

注意:当然,如果您只想更改现有布局的外观,您可以更改 /Shared/MainLayout.razor 文件。

为应用程序的某个区域指定默认模板

源代码[2]

如果您的应用程序有单独的区域,例如“Admin”区域,则可以指定用于该区域内所有页面的默认布局,只需将它们分组到具有自己的 _Imports.razor 文件的子文件夹中。

创建一个新的 Blazor 客户端应用程序,然后更新导航菜单以包含指向我们将很快创建的新页面的链接。

  • 打开 /Shared/NavMenu.razor 文件。

  • 找到最后一个 <li> 元素,它应该包含一个 <NavLink> 元素。

  • 复制 <li> 元素。

  • 将 NavLink 的 href 属性更改为 admin/users

  • 将链接的文本更改为管理员用户

接下来我们将创建一个非常基本的页面

  1. 在解决方案资源管理器中展开 /Pages 节点。

  2. 创建一个名为 Admin 的文件夹。

  3. 在文件夹中创建一个名为 AdminUsers.razor 的新文件。

@page "/admin/users"
<h2>Users</h2

注意: 页面的 URL 不必反映文件夹结构。

现在运行应用程序,该应用程序将具有一个名为“管理员用户”的新菜单项。当您单击该菜单项时,它将显示一个非常基本的页面,其中仅显示“Users”。接下来,我们将为所有管理页面创建一个默认布局。

  1. Admin 文件夹中创建另一个名为 _Imports.razor 的新文件。

  2. 输入以下代码。

@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 也是如此!这意味着自定义布局也可以有自己的父布局。

接下来,我们将创建一个自定义布局

  1. 编辑 /Shared/AdminLayout.razor 文件。

  2. 通过添加 @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>

b48b5bf613e6b1fe0d9fc9f3dcf418ca.png

参考资料

[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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/290115.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一、plist文件和项目结构图 说明&#xff1a;这是一个嵌套模型的示例 二、代码示例&#xff1a; YYcarsgroup.h文件代码&#xff1a; 1 //2 // YYcarsgroup.h3 // 07-汽车展示&#xff08;高级&#xff09;4 //5 //…

递归和非递归实现规律函数

1、问题 A(n) n / (2 * n 1)B1 2 A1;B2 2 A1 * (2 A2);B3 2 A1 * (2 A2 * (2 A3));....以此类推&#xff0c;求B(n)2、代码实现 #include <stdio.h>/** A(n) n / (2 * n 1) B1 2 A1; B2 2 A1 * (2 A2); B3 2 A1 * (2 A2 * (2 A3)); ....以此类推&…

程序员永远的痛之字符编码的奥秘

字符编码相信是每个程序员的噩梦&#xff0c;只要是有中文的地方&#xff0c;总是会遇到各种编码的问题&#xff0c;并且这种问题还非常难缠&#xff0c;尤其在linux上&#xff0c;因为上面很多软件都是针对 英语国家开发的&#xff0c;是不会考虑其他语种编码问题。在遇到编码…

awb数据怎么计算_白平衡自己主动(AWB)算法---2,颜色计算

本文说明了白平衡算法估计当前场景的色温过程.色温计算的原理并不复杂,但要做到,还是一道&#xff0c;认真做好每一步,这需要大量的测试,和算法一直完好.关于该过程首先简要:1, 取的图像数据,并划分MxN块,如果是25x25,并统计每一块的基本信息(,白色像素的数量及R/G/B通道的分量…

svn强制要求提交注释

2019独角兽企业重金招聘Python工程师标准>>> 看了N多资料&#xff0c;不知道为什么我总是不成功。现在终于测试成功了&#xff0c;下面是实际操作过程~~ 使用bitnami一键安装了subversion&#xff0c;在使用中&#xff0c;希望开发人员提交时必须输入日志内容&#…

Xamarin效果第五篇之ScrollView动态滚动效果

前面基于Xamarin做了一点效果;这不过年从老家回来一直成沉迷工作无法自拔,没时间来更新文章了;今天赶紧抽点时间再来更新一下效果;直接看看最终实现的效果:前台RadioButton的事件绑定选中状态绑定:后台对ScrollView的滚动处理:ScrollView的滚动对当前选中状态的修改&#xff1a…

How to change the text color in the terminal

You can open the file ~/.bashrc and then choose the force_color_promptyes otherwise, you can change the color in PSI. 注意&#xff1a;使用方法&#xff1a;# PS1自定义内容注意两边的单引号示例&#xff1a; PS1(\u\H \d \t)\$-------------------------------------…

9 个使用前必须再三小心的 Linux 命令

Linux shell/terminal 命令非常强大即使一个简单的命令就可能导致文件夹、文件或者路径文件夹等被删除。 在一些情况下Linux 甚至不会询问你而直接执行命令导致你丢失各种数据信息。 一般来说在 Web 上推荐新的 Linux 用户执行这些命令当然也有人哪些写过这代码的人不这么想因为…

C/C++之内存对齐

1、什么是内存对齐 计算机系统对基本类型数据在内存中放的位置做了限制,它们会要求这些数的首地址是一个数(一般为4和8)的整数倍,我们看下结构体的大小 #include <stdio.h> struct A {char a;int b; };int main() {printf("size of struct A is %d\n", sizeo…

生存下去

这个世界就是这么的无情&#xff0c;你改不了现势&#xff0c;现势就会改变你&#xff0c;毫无疑问。加油吧&#xff0c;只为一个目的&#xff1a;生存下去。

池化层在全连接层之间吗,了解最大池化层之后的全连接层的尺寸

In the diagram (architecture) below, how was the (fully-connected) dense layer of 4096 units derived from last max-pool layer (on the right) of dimensions 256x13x13? Instead of 4096, shouldnt it be 256*13*1343264 ?解决方案If Im correct, youre asking why …

Blazor University (3)组件 — 创建组件

原文链接&#xff1a;https://blazor-university.com/components组件所有呈现的 Blazor 视图都来自 ComponentBase 类&#xff0c;这包括布局、页面和组件。Blazor 页面本质上是一个带有 page 指令的组件&#xff0c;该指令指定浏览器必须导航到的 URL 才能呈现它。事实上&…

View controller-based status bar

info.plist文件中&#xff0c;View controller-based status bar appearance项设为YES&#xff0c;则View controller对status bar的设置优先级高于application的设置。为NO则以application的设置为准&#xff0c;view controller的prefersStatusBarHidden方法无效&#xff0c;…

C和指针之IO总结

1、流 io操作就是简单的从程序移进或移出字节的事情,这种字节流便称为流 2、流的两种类型,文本流和二进制流 1)、文本流:文本流是指在流中流动的数据是以字符形式出现 2)、二进制流:二进制流是指流动的是二进制数字序列,若流只有字符,则用一个字节的二进制ASCII码表示…

Codeigniter中创建LeanCloud云函数实现微信支付

2019独角兽企业重金招聘Python工程师标准>>> 经过摸索&#xff0c;与官方提供的slim无异&#xff0c;同样使用__invoke魔法函数即可&#xff0c;步骤如下&#xff1a; 1.config.php打开hook&#xff0c;即设置$config[enable_hooks] TRUE; 详情文档参见&#xff1a…

用蒙特卡洛方法计算派-python和R语言

用蒙特卡洛方法算pi&#xff0d;基于python和R语言 最近follow了MOOC上一门python课&#xff0c;开始学Python。同时&#xff0c;买来了概率论与数理统计&#xff0c;准备自学一下统计。&#xff08;因为被鄙视过不是统计专业却想搞数据分析&#xff09; 有趣的是书里面有一块讲…

51单片机智能小车循迹完整程序_电气与信息工程学院双创协会开展循迹小车培训...

为培养青年学子创新意识和创新能力&#xff0c;激发勇于创新的主动性和积极性&#xff0c;营造良好科技创新氛围&#xff0c;10月29日至30日&#xff0c;电气与信息工程学院双创协会于一教609、三教102和三教202开展循迹小车培训&#xff0c;该培训由电子1841班游碧文和电子184…

关闭C#主窗体弹出是否关闭对话框

在开发系统时,常常有这样一个问题,就是当关闭主窗体,也即退出系统时,如果想提示是否关闭,以免误操作,可以在主窗体的Main_FormClosing事件中添加一个对话框,代码如下: private void Main_FormClosing(object sender, FormClosingEventArgs e) { DialogResu…

AdonisUI - 用于 WPF 应用程序的轻量级 UI 工具包,提供经典但增强的 Windows 视觉效果...

介绍用于 WPF 应用程序的轻量级 UI 工具包&#xff0c;提供经典和增强的 Windows 视觉效果几乎所有 WPF 控件的默认样式和模板可根据需要使用的其他样式以方便使用两种配色方案&#xff08;浅色和深色&#xff09;也可用于自定义样式支持在运行时更改配色方案支持其他自定义配色…

Internet概念与TCP/ IP分层模型

Internet是世界上规模最大、用户最多、影响最大的计算机互联网络。本模块介绍Internet的概念及TCP/ IP分层模型。 一、Internet的概念 Internet的概念&#xff08;也可认为是Internet的结构&#xff09;可以从以下几个方面理解&#xff1a; 从网络通信的观点来看&#xff0c;In…