
【Blazor】 URLパラメータを使い方
- パラメータを受け取るページを作成
- 実行
目次
パラメータを受け取るページを作成

URLからパラメータを受け取るページを作成していきましょう。 以下にサンプルコードを示します。
"@page "/parameterurl/{Param1}/{Param2}" "<h3>ParameterUrl</h3>" <div>Param1 : @Param1</div> <div>Param2 : @Param2</div> @code { [Parameter] public string Param1 { get; set; } [Parameter] public string Param2 { get; set; } }
@codeに受け取りたいパラメータ(Param1,Param2)を宣言します。 宣言したら、@pageに宣言した変数名を{ }で囲って追記します。 @pageのパラメーター名は、大文字と小文字は区別されませんので、Param1でもparam1でも問題ありません。 これでパラメータを受け取ることができるようになりました。
実行

URLに直接[パラメータ1][パラメータ2]という文字列を指定して、ページ遷移してみます。 URLで指定した文字列が表示されることを確認してください。

URLでパラメータを渡すときの注意点ですが、文字列でしか渡すことができません。 数値を渡したい場合は、文字列で受け取った後に初期化処理等でキャストしてください。
@* URLから数値を受け取るページ *@ @page "/parameterurlnumber/{Param1}/{Param2}" <h3>ParameterUrl</h3> <div>Param1をキャストした値 : @paramNumber1</div> <div>Param2をキャストした値 : @paramNumber2</div> @code { [Parameter] public string Param1 { get; set; } [Parameter] public string Param2 { get; set; } private int paramNumber1; private int paramNumber2; protected override void OnInitialized() { int.TryParse(Param1, out paramNumber1); int.TryParse(Param2, out paramNumber2); } }
この本では、Blazorの基本から高度なテクニックまで、実際のプロジェクトに役立つ知識を網羅しています。 初心者から経験者まで、Blazorを扱うすべての開発者にとっての必読書です。 この記事の執筆者も参考にした「Blazor入門」で、あなたのBlazorスキルを飛躍的に向上させませんか?
合わせて読みたい

属性スプラッティングの使い方
Blazorの属性スプラッティング機能は、コンポーネントに複数の属性を一括で適用し、コードの再利用性を向上させるための手段です。基本的には、@attributesを使用し、属性と値のペアを格納したIDictionary<string, object>型を渡します。非文字列型の属性値もサポートしており、コンポーネントでも属性スプラッティングが利用可能です。ただし、属性の優先度に注意が必要です。これにより、Blazorアプリケーションの開発効率と柔軟性が向上します。
更新日:2023/07/19

コンポーネント間のイベント受け渡し方
Blazorでの部品コンポーネントからのイベント取得方法を解説。イベントの返却にはEventCallbackを使用し、<>内に変数を指定。多変数の場合はクラスを作成。今回はMouseEventArgsを返却。作成した部品コンポーネントはページ内で利用し、イベント発生時にShowMessageが呼ばれ、メッセージが表示されることを確認。
更新日:2023/07/19