Blazor – selectでonchangeを使う方法
デザイナーさんがselectで以下のようにしていました。onchangeで色を変えているんですよね。(大分脚色しています）
コードはこんな感じです。
<select id="colorSelect" onchange="Color()">
<option value="">選択してください</option>
<option value="青">青です</option>
<option value="赤">赤です</option>
<option value="黄">黄色です</option>
</select></p>
<script type="text/javascript">
function Color() {
var colorSelect = document.getElementById("colorSelect");
if (colorSelect.value == '赤'){
colorSelect.style.color = '#ff0000';
}
else if (colorSelect.value == '青'){
colorSelect.style.color = '#0000ff';
}
else if (colorSelect.value == '黄'){
colorSelect.style.color = '#ffff00';
}
else{
colorSelect.style.color = '';
}
}
</script>
ここで、blazorの@bindを使って値を取得したいのですが、これがハマった。最大級にはまりました。というのも@bindがjavascriptのonchangeを使っている為、併用出来ないんですよね。色々、試した結果@bindにメンバー変数を直接していするのではなく、set、getをかませるやりかたです。以下のようになります。
<select id="colorSelect" @bind=selectColor>
<option value="">選択してください</option>
<option value="青">青です</option>
<option value="赤">赤です</option>
<option value="黄">黄色です</option>
</select>
@code {
private string _selectColorStr = string.Empty;
private string selectColor
{
get
{
return _selectColorStr;
}
set
{
_selectColorStr = value;
CallJS();
}
}
private async Task CallJS()
{
await JSRuntime.InvokeVoidAsync("Color");
}
}
JSRuntime.InvokeVoidAsyncでJavaScriptを呼び出す事が出来ます。これでも出来たんですが、CallJSにawaitを入れないとスレッドが走ってしまいますという旨の警告がでます。しかし、ここにawaitをいれるとエラーになるので、JavaScriptではなく、関数を作りました。以下のようになります。
<div class="row mx-5">
<select id="colorSelect" @bind=selectColor style=@_style>
<option value="">選択してください</option>
<option value="青">青です</option>
<option value="赤">赤です</option>
<option value="黄">黄色です</option>
</select>
</div>
@if(_selectColorStr.Length > 0)
{
<div class="row"><div class="col"><p> </p></div></div>
<div class="row mx-5" data-aos="fade-left">
<p>@_selectColorStr が選択されました。</p>
</div>
}
@code {
private string _selectColorStr = string.Empty;
private string _style = string.Empty;
private string selectColor
{
get
{
return _selectColorStr;
}
set
{
_selectColorStr = value;
//CallJS();
OnSelectColor(value, out _style);
}
}
private async Task CallJS()
{
await JSRuntime.InvokeVoidAsync("Color");
}
public void OnSelectColor(string value, out string style)
{
if (value == "赤")
{
style = "color:#ff0000";
}
else if (value == "青")
{
style = "color:#0000ff";
}
else if (value == "黄")
{
style = "color:#ffff00";
}
else
{
style = string.Empty;
}
}
}
これで何とか出来ました。
Follow me!
