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组件已经创建成功了,我们已经可以在其他组件中使用<VButton />或者<VButton></VButton>来进行使用了,渲染后的Button不具备任何内容(innerHTML),也无法修改样式、大小。
3.2.捕捉组件子内容
通常,我们希望将<VButton>Button Text</VButton>标记中的Button Text作为渲染后的html元素button的innerHTML,因此需要为VButton组件添加一个RenderFragment类型的属性ChildContent,并将@ChildContent放到组件VButton组件的button标记中。注意,ChildContent并不仅仅是文字,也可以是Html。 现在VButton组件中的代码应该如下:
1 <button type="button" class="btn">@ChildContent</button> 2 3 @code { 4 [Parameter] 5 public RenderFragment ChildContent { get; set; } 6 }
3.3.样式控制
Bootstrap的button样式包括默认、primary、secondary、success、info、warning、danger、dark、light、link等10种样式。首先创建一个枚举,将button所有样式放在其中:
1 public enum VBtnStyle 2 { 3 Default, 4 Primary, 5 Secondary, 6 Success, 7 Info, 8 Warning, 9 Danger, 10 Dark, 11 Light, 12 Link 13 }
然后为VButton组件添加一个BtnStyle的组件参数:
1 [Parameter] 2 public VBtnStyle BtnStyle { get; set; } = VBtnStyle.Default;
需要注意的是,由于我们之前在button元素上添加的class属性,为了方便操作,我们需要将其修改为class="@GetClassName()",并为VButton组件添加一个函数GetClassName:
1 string GetClassName() 2 { 3 var builder = new System.Text.StringBuilder(); 4 builder.Append("btn"); 5 if(BtnStyle != VBtnStyle.Default) 6 { 7 builder.Append($" btn-{BtnStyle.ToString().ToLower()}"); 8 } 9 return builder.ToString(); 10 }
现在,VButton组件中的所有的代码如下所示:
1 <button type="button" class="@GetClassName()">@ChildContent</button> 2 3 @code { 4 [Parameter] 5 public RenderFragment ChildContent { get; set; } 6 7 [Parameter] 8 public VBtnStyle BtnStyle { get; set; } = VBtnStyle.Default; 9 10 string GetClassName() 11 { 12 var builder = new System.Text.StringBuilder(); 13 builder.Append("btn"); 14 if(BtnStyle != VBtnStyle.Default) 15 { 16 builder.Append($" btn-{BtnStyle.ToString().ToLower()}"); 17 } 18 return builder.ToString(); 19 } 20 }
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"> 2 <h5>VButton 组件</h5> 3 <div> 4 <VButton>Default</VButton> 5 <VButton BtnStyle="VBtnStyle.Primary">Primary</VButton> 6 <VButton BtnStyle="VBtnStyle.Secondary" BtnSize="VBtnSize.Sm">Secondary sm</VButton> 7 <VButton BtnStyle="VBtnStyle.Danger" BtnSize="VBtnSize.Lg">Danger lg</VButton> 8 9 <VButton BtnStyle="VBtnStyle.Warning"> 10 <span class="spinner-border spinner-border-sm"></span> 11 Warning Loading.. 12 </VButton> 13 </div> 14 </div>
图 3
注意:在使用VButton组件前,最好先将其所在的命名空间引用“@using BlazorComponent.MyComponents”添加到“_Imports.razor”文件中,这样便不用每次使用该组件时都使用组件的完全命名了。
本文参考:创建和使用 ASP.NET Core Razor 组件
代码:https://github.com/zxyao145/LearningBlazor/tree/master/BlazorComponent