.NET6 Blazor selectタグ multiple @bind

なんか、呪文みたいなタイトルになってしまったが、言いたいことは、Blazorが.NET6から、複数指定(multiple)selectのbindをサポートしたというお話。

どういうことかというと、以下の例を見て頂ければわかると思う。

@page "/"

<h2>Multiple Select Bind</h2>

<select style="width:200px" multiple size="6" @bind="SelectedColors">
	<option value="red">赤</option>
	<option value="blue">青</option>
	<option value="green">緑</option>
	<option value="magenta">紫</option>
	<option value="yellow">黄</option>
	<option value="orange">橙</option>
</select>
<br/>
@foreach(var c in SelectedColors) {
	<div style="width:100px;height:30px;background-color:@c"></div>
}

@code {
	protected string[] SelectedColors = new string[] {};
}
実行結果

なお、配列のサイズは動的に変更される。つまり、上記の例では、SelectedColors.Length=3だが、下記の実行例では、SelectedColors.Length=2となる。

実行例2

検索とかで、複数カテゴリなどを選択するときなどに結構便利。

takezou について

ソフトウェア開発会社(ITと言う言葉は大嫌い)で働く、元技術者。 未だに、社内システム位は作ってますが・・・ プログラミング言語はC#が好き。
カテゴリー: .NET, asp.net core, Blazor, C#, 技術系 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください