BlazorでのSelect（ドロップダウン）の連動

C#

Selectコンポーネント（ドロップダウン）同士の連動の実装方法を試していきます。

前提

以下の環境で実行しています。

oswindows11
dotnet8.0.304
UIBlazor（WebAssembly standalone）
IDEVisual Studio 2022 Community

本記事に記載しているソースコードは説明に必要な個所のみ抜粋していること、ご了承ください。

実装

InputSelectコンポーネント

Blazorでは、「InputSelect」というコンポーネントが用意されています。これを使用することでドロップダウンを簡単に作成できます。都道府県を選択するドロップダウンを作成してみましょう。

<InputSelect id="searchLeftprefecture" class="form-select" 
             @bind-Value="SearchModel.Prefecture.PrefectureID">
	<option value="0">都道府県</option>
	@if (prefectures is not null)
	{
		@foreach (var p in prefectures)
		{
			<option value="@p.PrefectureID">@p.PrefectureName</option>
		}
	}
</InputSelect>

@code {
	[SupplyParameterFromForm]
	private UserInfo SearchModel { get; set; } = new();

	private List<Prefecture> prefectures = new()
	{
		new Prefecture(){PrefectureID=100,PrefectureName="神奈川"},
		new Prefecture(){PrefectureID=200,PrefectureName="宮城"},
		new Prefecture(){PrefectureID=300,PrefectureName="京都"},
		new Prefecture(){PrefectureID=400,PrefectureName="兵庫"},
		new Prefecture(){PrefectureID=500,PrefectureName="鹿児島"}
	};
}

「@bind-Value」で選択されたValueの値をバインドするプロパティを指定します。UserInfo型（SearchModel）の詳細は割愛しますが、都道府県や市町村のIDとNameを保持するプロパティを用意しています。

後は、都道府県のリスト分だけループして選択肢を作成しています。以下が実際のイメージになります。

使い方は簡単ですね。では次に、新しく市町村を選択するドロップダウンを作成します。

市町村のドロップダウン

基本的には都道府県と同じように作成すればよいので、詳細は割愛します。

<InputSelect id="searchLeftCity" class="form-select" @bind-Value="SearchModel.City.CityID">
	<option value="0">市町村</option>
	@if (ShowedCities is not null)
	{
		@foreach (var c in ShowedCities)
		{
			<option value="@c.CityID">@c.CityName</option>
		}
	}
</InputSelect>

ただし、このままでは問題があります。都道府県の選択状況により市町村の選択候補を変更する必要がありますが、今はそれぞれのドロップダウンが独立しています。そのため都道府県に宮城県を選択しながら、市町村に札幌を選択できてしまいます。

そこで、都道府県のドロップダウンが変更されたら市町村のドロップダウンの内容を変更する仕組みを追加します。

@bind-Value:after

まずは以下をご覧ください。

<InputSelect id="searchLeftprefecture" class="form-select" 
             @bind-Value="SearchModel.Prefecture.PrefectureID"
             @bind-Value:after="UpdateCityAsync">

都道府県のドロップダウンに「@bind-Value:after」を追加しました。

「@bind-Value:after」は.NET 7で追加されたもので、値のバインドが行われた（都道府県を選択した）後に実行するメソッドを指定します。

「bind-Value:after」で指定できるメソッドは、ActionもしくはTaskを返す必要があります。EventCallbackは指定できないようです。

「UpdateCityAsync」メソッドの中身は以下になります。

	private Task UpdateCityAsync()
	{
		ShowedCities  = Cities.Where(c => c.PrefectureID == SearchModel.Prefecture.PrefectureID);
		//会社を変えるたびに市町村を初期値に戻す
		SearchModel.City.CityID = 0;

		return Task.CompletedTask;
	}

「SearchModel.Prefecture.PrefectureID」に都道府県のドロップダウンで選択された都道府県IDがバインドされているので、そのIDと合致する市町村だけを抽出して市町村ドロップダウンのリストを更新します。

こうすると、以下のように選択した都道府県の応じた市町村が選べるようになります。

コメント