今回は、MudBlazorの中でも特に強力で手軽な MudSnackbar(スナックバー/通知) と MudDialog(ダイアログ/確認画面) の2つをご紹介します。
これらを使うための前提として、一番外側のレイアウトファイル(通常は MainLayout.razor など)に <MudSnackbarProvider /> と <MudDialogProvider /> という「表示用の透明な土台」をあらかじめ置いておく必要があります。(※テーマを設定した MudThemeProvider と同じ場所に並べて書くのが一般的です)
それぞれの使い方を見ていきましょう!
1. 画面の隅にフワッと通知を出す(MudSnackbar)
「保存が完了しました」「エラーが発生しました」といったメッセージを、画面の右下などに数秒間だけ表示して自動で消える機能です。
この機能を使うには、C#のコードから「通知サービス」を呼び出します。Blazorでは、便利な裏方機能を使うときに @inject(注入)というキーワードを使います。
@inject ISnackbar Snackbar
<MudButton Variant="Variant.Filled" Color="Color.Success" OnClick="ShowNotification">
保存ボタン
</MudButton>
@code {
private void ShowNotification()
{
// 2. Snackbar.Add でメッセージと種類(色)を指定して表示!
Snackbar.Add("データを正常に保存しました!", Severity.Success);
}
}
Severity.Success: ここをSeverity.Error(赤色でエラー通知)やSeverity.Warning(黄色で警告通知)に変えるだけで、メッセージのアイコンと色が自動的に切り替わります。とてもお手軽ですね。
2. ユーザーに「はい/いいえ」を確認する(MudDialog)
「本当にこのデータを削除してもよろしいですか?」など、ユーザーに確実な操作を求めたいときに、画面の中央にポップアップ画面(モーダルウィンドウ)を出します。
本格的な入力フォームを持つダイアログを別ファイルで作ることもできますが、一番簡単な「メッセージボックス(確認ダイアログ)」の出し方を見てみましょう。
@inject IDialogService DialogService
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="DeleteData">
データを削除する
</MudButton>
@code {
// ※ダイアログの返事を「待つ」ため、async/await という非同期処理を使います
private async Task DeleteData()
{
// 2. ShowMessageBox でタイトル、本文、ボタンの文字を設定して表示!
bool? result = await DialogService.ShowMessageBox(
"削除の確認",
"本当に削除してもよろしいですか?この操作は取り消せません。",
yesText: "削除する", cancelText: "やめる");
// 3. ユーザーがどのボタンを押したかによって処理を分岐
if (result == true)
{
// 「削除する」が押されたときの処理
Snackbar.Add("削除しました", Severity.Error);
}
else
{
// 「やめる」が押された、または枠外がクリックされたときの処理
Snackbar.Add("キャンセルしました", Severity.Normal);
}
}
}
await DialogService.ShowMessageBox(...): これを実行すると、画面にポップアップが出現し、ユーザーがボタンを押すまでC#のプログラムがそこで一旦「一時停止」して待ってくれます。- 返ってくる結果(
result)は「True(はい)」「False(いいえ)」「Null(枠外をクリックして閉じた等)」のいずれかになるため、それに合わせて次の処理を書くだけです。

コメント