前言

本篇文章同步發表於 個人部落格 Jim's Blog

今天介紹剩下的四種輸入元件，還有如何透過 InputBase 量身定做符合自己需要的元件

InputRadio && InputRadioGroup

單選輸入，可以從多個選項中選取單一個選項，經過轉譯後變成<input type="radio">

@page "/InputSample"
<EditForm Model="@inputSampleModel">
    <InputRadioGroup @bind-Value="@inputSampleModel.Value">
        血型:
        <br>
        @foreach (var type in Bloods)
        {
            <InputRadio Value="type" />
            @type
            <br>
        }
    </InputRadioGroup>
</EditForm>
@code {
    private InputSampleModel inputSampleModel = new();
    private List<string> Bloods = new List<string> { "A", "B", "AB", "O" };
    class InputSampleModel
    {
        public string Value{ get; set; }
    }
}

InputText

這個應該是大家最熟悉的文字輸入，轉譯後就是一個 <input>，當沒有指定 Type 時預設就是文字輸入

@page "/InputSample"
<EditForm Model="@inputSampleModel">
    <InputText @bind-Value="@inputSampleModel.Value"></InputText>
</EditForm>
@code {
    private InputSampleModel inputSampleModel = new();
    class InputSampleModel
    {
        public string Value{ get; set; }
    }
}

InputTextArea

這個也是非常常見的，多行文字輸入轉譯後是 <textarea>

@page "/InputSample"
<EditForm Model="@inputSampleModel">
    <InputTextArea @bind-Value="@inputSampleModel.Value"></InputTextArea>
</EditForm>
@code {
    private InputSampleModel inputSampleModel = new();
    class InputSampleModel
    {
        public string Value{ get; set; }
    }
}

到這邊所有的內建輸入元件都介紹完了一共有 9 個，接著要講的是如何透過它們共同繼承的基底類別 InputBase 來客製化元件

使用 InputBase 自製輸入元件

@page "/InputSample"
<EditForm Model="@inputSampleModel">
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <InputText class="form-control" id="exampleInputEmail1" @bind-Value="inputSampleModel.Email"></InputText>
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <InputText type="password" class="form-control" id="exampleInputPassword1" @bind-Value="inputSampleModel.Password"></InputText>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>


@code {
    private InputSampleModel inputSampleModel = new();
    class InputSampleModel
    {
        public string Email { get; set; }
        public string Password { get; set; }
    }
}

這是一個使用 Bootstrap 的樣式製作的登入頁面，可以發現有很多重複的部分，我們可以透過自製組建來做到消弭重複的效果，我們依照上面的表單實作一個 B-Input

1. 建立一個 Razor 元件命名為 `B-Input'
   
2. 繼承 InputBase<string>

@inherits InputBase<string>

3. 將變化外移
   
   尋找元件中需要變化得地方，使其從外部傳入

4. 建立參數並完成元件

@inherits InputBase<string>

<div class="mb-3">
    <label for="@Id" class="form-label">@Label</label>
    <input class="form-control" id="@Id" @bind="@CurrentValue" type="@Type"></input>
</div>
@code {

    [Parameter]
    public string? Id { get; set; }

    [Parameter]
    public string? Label { get; set; }

    [Parameter]
    public string? Type { get; set; }

    protected override bool TryParseValueFromString(string? value, out string result, out string validationErrorMessage)
    {
        result = value;
        validationErrorMessage = null;
        return true;
    }
}

這邊忽略了一些細節，TryParseValueFromString 是用來將輸入的值處理成 InputBase<T>指定的型別

5. 比較一下

<div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <InputText class="form-control" id="exampleInputEmail1" @bind-Value="inputSampleModel.Email"></InputText>
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>

<div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <InputText type="password" class="form-control" id="exampleInputPassword1" @bind-Value="inputSampleModel.Password"></InputText>
</div>

<B_Input Id="exampleInputEmail1" Label="Email address" @bind-Value="@inputSampleModel.Email"></B_Input>

<B_Input Id="exampleInputPassword1" Label="Password" @bind-Value="@inputSampleModel.Password" Type="password"></B_Input>

善用 InputBase 可以增加 Blazor 的可維護性，現在我使用 Bootstrap 的樣式，若我想換成別的 UI Framework 只需要修改建立的 B-Input 即可

小結

在這邊我們把所有的內建輸入元件都介紹完畢，以及展示使用 InputBase 來增加程式的可維護性的做法，在實務上這是非常常用的小技巧，當然目前也有了滿多的 UI Component 可以使用，明天會分享一些 UI Framework