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

原文链接:https://blazor-university.com/components

组件

所有呈现的 Blazor 视图都来自 ComponentBase 类,这包括布局、页面和组件。

Blazor 页面本质上是一个带有 @page 指令的组件,该指令指定浏览器必须导航到的 URL 才能呈现它。事实上,如果我们比较生成的组件代码和页面代码,差别很小。可以在文件夹 obj\Debug\netcoreapp3.0\Razor\Pages 中的 Counter.razor.g.cs 中找到以下生成的源代码。

namespace MyFirstBlazorApp.Client.Pages
{[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MainLayout))][Microsoft.AspNetCore.Components.RouteAttribute("/counter")]public class Counter : Microsoft.AspNetCore.Components.ComponentBase{protected override void BuildRenderTree(Microsoft.AspNetCore.Components.RenderTree.RenderTreeBuilder builder){// Code omitted for brevity}private int counter = 42;private void IncrementCounter(){counter++;}}
}

[Microsoft.AspNetCore.Components.RouteAttribute("/counter")] 标识页面的 URL。

[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MainLayout))] 标识要使用的布局。

事实上,由于页面只是装饰有附加属性的组件,因此如果您更改默认 Blazor 应用程序的 Pages/Index.razor 文件,则可以将 Counter 页面嵌入为组件。

@page "/"<h1>Hello, world!</h1>
Welcome to your new app.
<Counter/>

9a785bbf5fcf79e3cd6852e5a275f1a1.png

在另一个页面中嵌入页面时,Blazor 将其视为一个组件。嵌入页面上的 LayoutAttribute 将被忽略,因为 Blazor 已经有一个显式容器 - 包含它的父组件。

创建组件

源代码[1]

在客户端应用程序中创建一个名为 Components 的新文件夹。这不是一个特殊的名称,我们可以选择任何我们想要的名称。

创建新的 Components 文件夹后,在其中创建一个名为 MyFirstComponent.razor 的文件并输入以下标记。

<div><h2>This is my first component</h2>
</div>

现在编辑 Index.razor 文件。此时,我们可以使用完全限定名称引用组件:

<CreatingAComponent.Client.Components.MyFirstComponent/>

或者编辑 /_Imports.razor 并添加 @using CreatingAComponent.Client.Components。这里的 using 语句级联到所有 Razor 视图中——这意味着使用 /Pages/Index.razor 中的新组件的标记不再需要命名空间。

@page "/"<h1>Hello, world!</h1>
<MyFirstComponent/>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" />

现在运行应用程序,我们将看到以下内容。

15f2c5fc596379c1b87069d73ff253fd.png

参考资料

[1]

源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Components/CreatingAComponent

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

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

相关文章

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…

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…

数据结构关键路径_数据结构与算法之关键路径_一点课堂(多岸学院)

关键路径梳理活动的顺序仅仅是拓扑排序可以完成的功能之一&#xff0c;更有价值的是估量完成整个事件的最短时间。比如生产一辆汽车&#xff0c;虽然安排员工、准备原始材料是先行条件&#xff0c;但是组装各种零部件是可以同时进行的&#xff0c;例如制造轮子和发动机、外壳等…

ARP-Address Resolution Protocol-地址解析协议

主要内容摘自&#xff1a;图解TCP/IP ARP是一种解决地址问题的协议。以目标IP地址为线索&#xff0c;用来定位下一个应该接受数据分包的网络设备的mac地址。 如果目标主机不在同一个链路上时&#xff0c;可以通过ARP查找下一跳路由器的MAC地址。 不过ARP只适用于IPv4&#xff0…

WPF 实现音频播放动画控件

WPF开发者QQ群此群已满340500857 &#xff0c;请加新群458041663由于微信群人数太多入群请添加小编微信号yanjinhuawechat 或 W_Feng_aiQ 邀请入群需备注WPF开发者 01—代码如下一、创建AnimationAudio.xaml代码如下。<ResourceDictionary xmlns"http://schemas.micros…

#51CTO学院四周年# 还好没放弃,终于等到你~

作为一个小白&#xff0c;恩&#xff0c;白的不能再白的样子~游走于大佬身旁~每每看见大佬功成名就的样子~我就只能画饼充饥~望梅止渴~还好没放弃~在这里发现了小白变大佬的隧道~这里的人呐~都非常友善~这里的知识啊~性价比都超高~如果有来生&#xff0c;我希望早点遇见你~我们…

开始ubuntu 14.04 的装X模式---终端模式下中文输入,听歌,上irc 开启framebuffer看电影 截图...

先上图吧 卡卡的全是在tty1 下的操作&#xff0c;看电影&#xff0c;听歌&#xff0c;截图 &#xff0c;看图 &#xff0c;上irc 等等&#xff0c;相当适合在小白面前装屁&#xff01; 需要安装的软件&#xff1a; 为了能正常显示中文&#xff1a;安装fbterm sudo apt-get ins…

.NET6中关于Minimal API的简单使用

微信公众号&#xff1a;趣编程ACE收集并分享日常的.NET实战开发技巧,源码获取关注后回复 源码;**如果觉得本公众号对您有帮助&#xff0c;欢迎关注本文来自社区群粉丝投稿.NET6中关于Minimal API的简单使用详细文档参考官网 https://docs.microsoft.com/en-us/aspnet/core/fund…

DVR分布式路由

1. 背景 没有使用DVR的场景&#xff1a; 从图中可以明显看到东西向和南北向的流量会集中到网络节点&#xff0c;这会使网络节点成为瓶颈。 如果启用DVR&#xff0c;如下图&#xff1a; 对于东西向的流量&#xff0c; 流量会直接在计算节点之间传递。 对于南北向的流量&#xff…

求斐波那契数列的特征方程和通项公式

1、斐波那契数列 f(1) 1; f(2) 1; f(3) f(1) f(2);以此内推1 x 1f(x) 1 x 2f(x - 1) f(x - 2) x > 32、特征方程 解释&#xff1a;特征方程是为研究相应的数学对象而引入的一些等式&#xff0c;它因数学对象不同而不…

php实现pdf文件的生成与下载

2019独角兽企业重金招聘Python工程师标准>>> 这个有点复杂的&#xff0c;我们一步一步来说明。 受先我们要下载pdf需要的文件&#xff0c;搜索‘php生成pdf’找到相关进行下载&#xff0c;这里不做介绍 //pdf下载$name $_SESSION[ex_uname];$name_pdf$name..pdf;$u…

window 效率神器:Wox

官方网站 http://www.getwox.com/ 下载后以管理员身份运行&#xff0c;右下角可以看到Wox的图标。点击setting可以进入主界面 如果看不懂可以将语言设置为中文 默认快捷键是Alt space 热键呼出。你理应习惯这个风格。这是你高效率的开始 进入主题&#xff08;Theme&#xff09…

scala入门-01-IDEA安装scala插件

2019独角兽企业重金招聘Python工程师标准>>> 由于本人一直使用IDEA开发Java项目&#xff0c;目前scala也可以使用IDEA开发&#xff0c;下载地址&#xff1a;http://www.jetbrains.com/idea/ Community Edition FREE 和 Ultimate Edition Free 30-day trial都支撑s…

GeneralUpdate20220323里程碑版本发布

大家好我是juster&#xff0c;GeneralUpdate的开源项目作者。这次将发布GeneralUpdate里程碑版本&#xff0c;该版本发生了巨大改变历时4个月的时间终于要和大家见面了。开源不易希望大家能多多支持。可能或多或少会有些bug希望大家多多反馈&#xff0c;这里也有一个小小的心愿…

FFmpeg的HEVC解码器源码简单分析:解码器主干部分

HEVC源码分析文章列表&#xff1a;【解码 -libavcodec HEVC 解码器】FFmpeg的HEVC解码器源码简单分析&#xff1a;概述FFmpeg的HEVC解码器源码简单分析&#xff1a;解析器&#xff08;Parser&#xff09;部分FFmpeg的HEVC解码器源码简单分析&#xff1a;解码器主干部分FFmpeg的…

.NET 产品组问卷调查|和我们分享你的 .NET 使用情况

作为一名 .NET 开发者&#xff0c;是什么让你开始学习 .NET&#xff1f;在你看来 .NET 在哪些场景下最有效&#xff1f;在平时的工作或学习中&#xff0c;你都在哪里学习 .NET 资源&#xff1f;你更希望在哪里看到更多 .NET 本地化内容&#xff1f;你觉得 .NET 的社区推动力如何…

C#+SQL Server数据库系统操作日志的实现完整案例

在开发数据库系统时,通常需要添加系统日志功能。系统日志是用来记录用户、管理员等对系统的操作记录,系统操作日志的实现方式有很多,本文基于C#和SQL Server数据库,通过设计日志记录表、编写操作记录存储过程、前端调用与展示结果等过程,实现操作日志功能完整程序设计流程…