1.环境
VS2019 16.5.1
.NET Core SDK 3.1.200
Blazor WebAssembly Templates 3.2.0-preview2.20160.5
2.创建项目
首先创建一个简单的Blazor WebAssembly项目，这个项目没有不具备后端支持。目前blazorwasm 仍然处于预览之中，如果需要使用此模板，可以通过以下命令进行安装：
1 | `dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5` |
之所以介绍这个步骤，是为了说明本文所使用时Blazor Wasm而不是Blazor Server。
图 1
3.编写组件
Blazor中的组件是使用 C# 和HTML组合在Razor组件文件(.razor)中实现的，因此Blazor中的组件实则为Razor组件。由于Blazor默认使用bootstrap的UI，因此接下来将按照Bootstrap样式编写一个按钮组件。
3.1.新建组件
在项目下新建一个文件夹“MyComponents”，然后在“MyComponents”中添加一个新的Razor组件：VButton.razor
图 2
新建的Razor组件文件中，默认包含一个一个h3标记和一个@code块。@code块是用于定义组件类的成员的，在@code 块中，可以用C#编写组件的属性、字段、方法等（组件参数需要使用[Parameter]在public的属性上进行标注）。Razor组件中允许定义多个@code块，同时也可以使用“@”标记为页面的呈现进行相关的逻辑处理，这点是与MVC中是相同的。
既然要编写button组件，那么首先将默认的h3标记删除，更换为以下HTML代码。
1 | `<button type="button" class="btn"></button>` |
这样，一个bootstrap样式的button组件已经创建成功了，我们已经可以在其他组件中使用
3.2.捕捉组件子内容
通常，我们希望将
1 | `<button type="button" class="btn">@ChildContent</button> @code { [Parameter] public RenderFragment ChildContent { get; set; } }` |
3.3.样式控制
Bootstrap的button样式包括默认、primary、secondary、success、info、warning、danger、dark、light、link等10种样式。首先创建一个枚举，将button所有样式放在其中：
1 | `public enum VBtnStyle { Default, Primary, Secondary, Success, Info, Warning, Danger, Dark, Light, Link }` |
然后为VButton组件添加一个BtnStyle的组件参数：
1 | `[Parameter] public VBtnStyle BtnStyle { get; set; } = VBtnStyle.Default;` |
需要注意的是，由于我们之前在button元素上添加的class属性，为了方便操作，我们需要将其修改为class=”@GetClassName()”，并为VButton组件添加一个函数GetClassName：
1 | `string GetClassName() { var builder = new System.Text.StringBuilder(); builder.Append("btn"); if(BtnStyle != VBtnStyle.Default) { builder.Append($" btn-{BtnStyle.ToString().ToLower()}"); } return builder.ToString(); }` |
现在，VButton组件中的所有的代码如下所示：
1 | `<button type="button" class="@GetClassName()">@ChildContent</button> @code { [Parameter] public RenderFragment ChildContent { get; set; } [Parameter] public VBtnStyle BtnStyle { get; set; } = VBtnStyle.Default; string GetClassName() { var builder = new System.Text.StringBuilder(); builder.Append("btn"); if(BtnStyle != VBtnStyle.Default) { builder.Append($" btn-{BtnStyle.ToString().ToLower()}"); } return builder.ToString(); } }` |
3.4.大小控制
BootStrap中按钮的大小分为默认、lg、sm 3种，按照2.3.中添加样式控制的思路，先添加一个VBtnSize的枚举，再为VButton组件添加一个类型为VBtnSize、默认值为VBtnSize.Default的组件参数BtnSize，最后在GetClassName函数中对其进行判断并放置到button的属性class中。
4.使用
打开，Pages目录下的Index.razor页面，在@page “/“路由下面添加以下代码，然后运行，即可看到效果如图 3所示。
1 | `<div class="jumbotron bg-white border border-primary"> <h5>VButton 组件</h5> <div> <VButton>Default</VButton> <VButton BtnStyle="VBtnStyle.Primary">Primary</VButton> <VButton BtnStyle="VBtnStyle.Secondary" BtnSize="VBtnSize.Sm">Secondary sm</VButton> <VButton BtnStyle="VBtnStyle.Danger" BtnSize="VBtnSize.Lg">Danger lg</VButton> <VButton BtnStyle="VBtnStyle.Warning"> <span class="spinner-border spinner-border-sm"></span> Warning Loading.. </VButton> </div> </div> ` |
图 3
注意：在使用VButton组件前，最好先将其所在的命名空间引用“@using BlazorComponent.MyComponents”添加到“_Imports.razor”文件中，这样便不用每次使用该组件时都使用组件的完全命名了。
本文参考：创建和使用 ASP.NET Core Razor 组件
代码：https://github.com/zxyao145/LearningBlazor/tree/master/BlazorComponent
封面图来自：https://www.hanselman.com/blog/WhatIsBlazorAndWhatIsRazorComponents.aspx