Blazor带我重玩前端(五)
概述
本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇。
我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的C#代码。在此,先补充一下该页面的原始代码:
@page "/"
@layout MyLayout
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
Index.razor页面在项目编译后会生成Index.razor.g.cs文件,其位置如图所示,在obj文件夹下面:
具体的源码如下:
[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MyLayout))]
[Microsoft.AspNetCore.Components.RouteAttribute("/")]
public partial class Index : Microsoft.AspNetCore.Components.ComponentBase
{
#pragma warning disable 1998
protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
{
__builder.AddMarkupContent(0, "<h1>Hello, world!</h1>rnrnWelcome to your new app.rnrn");
__builder.OpenComponent<BlazorApp.Client.Shared.SurveyPrompt>(1);
__builder.AddAttribute(2, "Title", "How is Blazor working for you?");
__builder.CloseComponent();
}
#pragma warning restore 1998
}
可以看到,以上代码并不难理解,同时它还有两个特性,一个是布局的标识,一个是路由的标识。紧接着就是该类重写了BuildRenderTree方法,这个以后会说。需要提醒的是,大家在写Blazor项目遇到问题时,可以多查看razor页面所生成的C#代码。
创建简单组件
需要注意的是,在Blazor项目中,包括razor页面,布局以及组件都隐式或显示的继承自ComponentBase的。在Blazor.Client项目的Shared文件夹中,我们创建一个Components文件夹用于存放我们自定义的组件。(1)创建页面,并暂且先使用下面的默认内容。
(2)然后在_Imports.razor文件中添加@using BlazorApp.Client.Shared.Components,以使得该组件可以全局使用,从这个引用的命名空间来看,我们新建的组件的命名空间默认就是文件所在的位置。
(3)在Index.razor页面使用
(4)运行后的结果如图所示:
单项绑定
如果读者接触了比较多的前端框架,可能会对理解单项绑定有很大的帮助,这实际上一种插值或者说是动态数据的占位(变量)。大部分情况下,我们都希望我们的组件是可以输出动态内容,那么我们应该如何实现呢?这个时候我们就需要在页面上写一写C#代码了。(1)在MyComponent组件中添加参数,并标记[Parameter]特性
(2)在Index页面上,添加按钮和事件功能,可以参考Counter页面的按钮。
这个页面的功能我们暂时只关注如何传值即可,也就是在调用MyComponent组件的时候,调用其属性Counter并赋值。(3)运行效果如下所示
组件事件
添加组件自定义事件,其实就是声明一个EventCallback类型的组件参数,如下代码所示:
[Parameter]
public EventCallback<int> EventSample { get; set; }
(1)自定义组件修改 增加一个计数方法,可以参考Counter中代码。在IncrementCount方法中,采用await ClickCountCallback.InvokeAsync(currentCount*2)方式传值给Index.Razor页面,页面源码:
@*<h3>My Component</h3>*@
这里是自定义组件的区域,我点击了几次 <strong style="color: red">@currentCount</strong>
<br>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount { get; set; }
[Parameter]
public EventCallback<int> ClickCountCallback { get; set; }
private async Task IncrementCount()
{
currentCount++;
await ClickCountCallback.InvokeAsync(currentCount*2);
}
}
(2)Index.razor页面
@page "/"
@layout MyLayout
<h1> </h1>
@*Welcome to your new app.*@
@*<SurveyPrompt Title="How is Blazor working for you?" />*@
<h2>Index页面的CurrentCount=<strong style="color: red">@currentCount</strong></h2>
<br>
<MyComponent ClickCountCallback="IncrementCount1" />
<br />
@code {
private int currentCount;
private void IncrementCount1(int value)
{
currentCount = value;
}
}
使用currentCount接收自定义组件中传来的值。运行效果如下:
- HDUOJ---------2255奔小康赚大钱
- HDUOJ------1711Number Sequence
- HDUOJ---1712 ACboy needs your help
- HDUOJ---1867 A + B for you again
- HDUOJ--------1420Prepared for New Acmer
- PowerVM虚拟化环境下 CPU 利用率的监控与探究
- 虚函数中构造函数的调用顺序
- HDUOJ-----4512吉哥系列故事——完美队形I(LCIS)
- go语言mongdb管道使用(二)
- HDUOJ--4565 So Easy!
- Go 语言Map(集合)
- 简单的java实验,涉及到 类继承以及接口问题,方法体的重写(区别于重载)
- java 快速求素数
- 狄斯奎诺(dijkstra 模板)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊一聊mycat数据库集群系列之双主双重实现
- Fast-SCNN的解释以及使用Tensorflow 2.0的实现
- 基于Spring Boot快速实现发送邮件功能
- 史上最全的vim快捷键文档/手册/大全/帮助/指南
- RPC详解
- 轻松学Pytorch – 行人检测Mask-RCNN模型训练与使用
- Linux的文本处理工具浅谈-awk sed grep
- 这样Review代码牛逼啦!
- FinDOM-XSS:一款针对DOM型XSS漏洞的快速扫描工具
- 使用Pycharm和跳板机 连接内网服务器
- CVE-2020-1313漏洞分析与利用PoC
- Linux用户登录日志查询 # 1 utmp、wtmp、btmp文件
- 浏览器同域名请求的最大并发数限制
- HTTP Strict Transport Security实战详解
- 深夜学算法之SkipList:让链表飞