blazorでの画面遷移方法など

最近、Blazor(Server Side)でアプリを作っていて、チョットばかり調べたものがあるので、備忘録として。

まず、リンクを使用せずに、ボタンイベント等でコードを使用して、他ページに画面遷移させる方法。

これには、NavigationManagerクラスを使用する。NavigationManagerクラスはデフォルトで、サービス登録されているので、injectして使用する。

@page "/"
・・・
@inject NavigationManager Navi
・・・
<button class="btn btn-primary" @onclick="GotoNext">次ページ</button>
@code {
	・・・
	protected void GotoNext() {
		// Nextページへ遷移
		Navi.NavigateTo("./Next");
	}
	・・・
}

お次は、BlazorコンポーネントへURLベースでパラメータを渡す方法。

URLの一部をパラメータとして渡すには、pageディレクティブを以下のように定義し、コード部でパラメータとして定義する。

@page "/Edit/{UserID?}"
・・・
@code {
	・・・
	[Parameter]
	public string? UserID { get; set; }
	・・・
}

./Edit/User001のような感じで呼び出すと、UserIDに”User001″がセットされる。

クエリパラメータをコンポーネントに渡す場合は以下のような感じ。

@page "/Edit"
・・・
@code {
	[Parameter]
	[SupplyParameterFromQuery]
	public string? UserID {get; set;}
}

./Edit?UserID=User001のような感じで呼び出す。

意外と忘れそうなので、メモしとく。