今天介紹剩下的四種輸入元件,還有如何透過 InputBase
量身定做符合自己需要的元件
單選輸入,可以從多個選項中選取單一個選項,經過轉譯後變成<input type="radio">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| @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; }
}
}
|
![](https://i.imgur.com/1E9kgvN.png)
InputText#
這個應該是大家最熟悉的文字輸入,轉譯後就是一個 <input>
,當沒有指定 Type 時預設就是文字輸入
1
2
3
4
5
6
7
8
9
10
11
| @page "/InputSample"
<EditForm Model="@inputSampleModel">
<InputText @bind-Value="@inputSampleModel.Value"></InputText>
</EditForm>
@code {
private InputSampleModel inputSampleModel = new();
class InputSampleModel
{
public string Value{ get; set; }
}
}
|
![](https://i.imgur.com/ln8DA5o.png)
InputTextArea#
這個也是非常常見的,多行文字輸入轉譯後是 <textarea>
1
2
3
4
5
6
7
8
9
10
11
| @page "/InputSample"
<EditForm Model="@inputSampleModel">
<InputTextArea @bind-Value="@inputSampleModel.Value"></InputTextArea>
</EditForm>
@code {
private InputSampleModel inputSampleModel = new();
class InputSampleModel
{
public string Value{ get; set; }
}
}
|
![](https://i.imgur.com/vlR2u8R.png)
到這邊所有的內建輸入元件都介紹完了一共有 9 個,接著要講的是如何透過它們共同繼承的基底類別 InputBase
來客製化元件
![](https://i.imgur.com/vSfLNt3.png)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| @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
- 建立一個 Razor 元件命名為 `B-Input’
![](https://i.imgur.com/Bg0WZxf.png)
- 繼承
InputBase<string>
1
| @inherits InputBase<string>
|
將變化外移
尋找元件中需要變化得地方,使其從外部傳入
建立參數並完成元件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| @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>
指定的型別
- 比較一下
1
2
3
4
5
6
7
8
9
10
| <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>
|
1
2
3
| <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