Blazor带我重玩前端(五)
概述
本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇。
我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的C#代码。
在此,先补充一下该页面的原始代码:
1: @page "/"
2: @layout MyLayout
3: <h1>Hello, world!</h1>
4:
5: Welcome to your new app.
6:
7: <SurveyPrompt Title="How is Blazor working for you?" />
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Index.razor页面在项目编译后会生成Index.razor.g.cs文件,其位置如图所示,在obj文件夹下面:
具体的源码如下:
1: [Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MyLayout))]
2: [Microsoft.AspNetCore.Components.RouteAttribute("/")]
3: public partial class Index : Microsoft.AspNetCore.Components.ComponentBase
4: {
5: #pragma warning disable 1998
6: protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
7: {
8: __builder.AddMarkupContent(0, "<h1>Hello, world!</h1>\r\n\r\nWelcome to your new app.\r\n\r\n");
9: __builder.OpenComponent<BlazorApp.Client.Shared.SurveyPrompt>(1);
10: __builder.AddAttribute(2, "Title", "How is Blazor working for you?");
11: __builder.CloseComponent();
12: }
13: #pragma warning restore 1998
14: }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
可以看到,以上代码并不难理解,同时它还有两个特性,一个是布局的标识,一个是路由的标识。紧接着就是该类重写了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<int>类型的组件参数,如下代码所示:
1: [Parameter]
2: public EventCallback<int> EventSample { get; set; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
(1)自定义组件修改
增加一个计数方法,可以参考Counter中代码。在IncrementCount方法中,采用await ClickCountCallback.InvokeAsync(currentCount*2)方式传值给Index.Razor页面,页面源码:
1: @*<h3>My Component</h3>*@
2:
3: 这里是自定义组件的区域,我点击了几次 <strong style="color: red">@currentCount</strong>
4: <br>
5: <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
6:
7: @code {
8: private int currentCount { get; set; }
9:
10: [Parameter]
11: public EventCallback<int> ClickCountCallback { get; set; }
12:
13: private async Task IncrementCount()
14: {
15: currentCount++;
16: await ClickCountCallback.InvokeAsync(currentCount*2);
17: }
18: }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
(2)Index.razor页面
1: @page "/"
2: @layout MyLayout
3: <h1> </h1>
4:
5: @*Welcome to your new app.*@
6:
7: @*<SurveyPrompt Title="How is Blazor working for you?" />*@
8:
9: <h2>Index页面的CurrentCount=<strong style="color: red">@currentCount</strong></h2>
10:
11: <br>
12: <MyComponent ClickCountCallback="IncrementCount1" />
13: <br />
14:
15: @code {
16: private int currentCount;
17:
18: private void IncrementCount1(int value)
19: {
20: currentCount = value;
21: }
22: }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
使用currentCount接收自定义组件中传来的值。
运行效果如下:
Index.razor页面生成的C#源码如下所示:
会往RenderTreeBuilder对象中添加AddAttribute,用于接收自定义组件回调过来的值。
最新文章
- AFN框架内部结构
- Dynamics AX 2012 R3 Demo 安装与配置 - 安装数据服务器、AOS和客户端 (Step 2)
- 重点关注之自定义序列化方式(Protobuf和Msgpack)
- C# 文件与目录的基本操作(System.IO)
- js中使用s(c)标签
- MallBuilder 多用户商城管理系统 v5.8.1.1
- Go support for Android
- 【蛙蛙推荐】Lucene.net试用
- ReSharper 8.0.2000.2660
- Linux shell 常用
- mybatis的$存在安全问题,为什么又不得不用?
- 实用的Android代码片段集合(精)
- java中途强制跳出递归
- JAXB 操作XML 与 Object
- git搜索--grep
- 抽象类 abstract 和 接口 interface 类的区别
- linux ubuntu生成pac文件,实现代理
- maven本地仓库中存在jar包,但编译不成功,显示jar包不存在
- Java_4 引用类型变量 Scanner与Random的使用
- 【转载】Spring @Async 源码解读。