Blazor入门笔记（1）-从0构建一个组件

1.环境

VS2019 16.5.1

.NET Core SDK 3.1.200

Blazor WebAssembly Templates 3.2.0-preview2.20160.5

2.创建项目

首先创建一个简单的Blazor WebAssembly项目，这个项目没有不具备后端支持。目前blazorwasm 仍然处于预览之中，如果需要使用此模板，可以通过以下命令进行安装：

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代码。

<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组件中的代码应该如下：

<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所有样式放在其中：

public enum VBtnStyle
{
    Default,
    Primary,
    Secondary,
    Success,
    Info,
    Warning,
    Danger,
    Dark,
    Light,
    Link
}

然后为VButton组件添加一个BtnStyle的组件参数：

[Parameter]
public VBtnStyle BtnStyle { get; set; } = VBtnStyle.Default;

需要注意的是，由于我们之前在button元素上添加的class属性，为了方便操作，我们需要将其修改为class="@GetClassName()"，并为VButton组件添加一个函数GetClassName：

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组件中的所有的代码如下所示：

<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所示。

<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