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>&nbsp;</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，用于接收自定义组件回调过来的值。