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