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?" />
Index.razor页面在项目编译后会生成Index.razor.g.cs文件,其位置如图所示,在obj文件夹下面:
![1 1](https://img2020.cnblogs.com/blog/533598/202008/533598-20200830211401765-1697650758.png)
具体的源码如下:
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: }
可以看到,以上代码并不难理解,同时它还有两个特性,一个是布局的标识,一个是路由的标识。紧接着就是该类重写了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)运行效果如下所示
![1 1](https://img2020.cnblogs.com/blog/533598/202008/533598-20200830211406741-1037927318.gif)
组件事件
添加组件自定义事件,其实就是声明一个EventCallback<int>类型的组件参数,如下代码所示:
1: [Parameter]
2: public EventCallback<int> EventSample { get; set; }
(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: }
(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: }
使用currentCount接收自定义组件中传来的值。
运行效果如下:
Index.razor页面生成的C#源码如下所示:
会往RenderTreeBuilder对象中添加AddAttribute,用于接收自定义组件回调过来的值。
以上为本篇文章的主要内容,希望大家多提意见,如果喜欢记得点个推荐哦
作者: 艾心
出处: https://www.cnblogs.com/edison0621/
本文版权归作者和博客园共有,欢迎转载,转载时保留原作者和文章地址即可。