BlazorでのWebアプリケーション開発手法１【C#】B11_画面間のパラメータの受け渡し方法

今回は、Blazorの画面（コンポーネント）間でパラメータを受け渡す方法を解説します。具体的には、Home画面のリンクから計測画面（MeasurePage）を開く際に、計測場所の値をURL経由で計測画面側に渡し、そのまま画面に表示させてみます。

現在の計測画面は、計測場所が「神戸」に固定された状態で表示されています。これをHome画面側から任意の値を送り込んで、計測画面に反映できるようにするのが今回のゴールです。

図1　Home画面。「計測画面を開く」リンクから計測画面へ遷移する

図2　計測画面。計測場所が「神戸」固定で表示されている

パラメータ用のプロパティを作成する

MeasurePage.razorを開くと、@codeブロックの中に計測場所を保持するフィールド _measureArea が “神戸” で初期化されているのが確認できます。

図3　変更前のMeasurePage.razor。_measureAreaフィールドが”神戸”で固定されている

外部（URL）からこの値を受け取れるようにするには、フィールドではなく public な プロパティ を用意する必要があります。そこで、次のようにMeasureAreaという名前のプロパティを作成します。

図4　public string MeasureArea { get; set; } プロパティを作成中

作成しただけでは、まだ単なる通常のプロパティです。ここに [Parameter] 属性を付けることで、このプロパティが「外部からURL経由でパラメータとして値を受け取れるプロパティ」として扱われるようになります。

図5　プロパティに [Parameter] 属性を付与する

[Parameter]
public string MeasureArea { get; set; } = "--";

あわせて、初期値も “神戸” ではなく “–” に変更しておきます（パラメータが渡されなかった場合の初期表示用の値です）。

図6　MeasureAreaプロパティの初期値を”–“に変更

@pageディレクティブにパラメータを追加する

プロパティを作っただけでは、まだURLからは値を受け取れません。ファイル先頭の @page ディレクティブでも、パラメータを受け取ることを宣言する必要があります。@page ディレクティブは複数記述できるため、既存の @page “/measure” はそのまま残し、新しい行を追加します。

追加する行では、URLの末尾にスラッシュを付けたあと、中括弧 { } で先ほど作成したプロパティ名（MeasureArea）を囲みます。こうすることで、/measure/○○○ のようにアクセスされたとき、○○○の部分がMeasureAreaプロパティに渡されるようになります。

図7　@page ディレクティブに {MeasureArea} パラメータを追加

@page "/measure"
@page "/measure/{MeasureArea}"

画面表示側のバインド先を変更する

最後に、画面（HTML側）で計測場所を表示している部分を、これまでのフィールド _measureArea ではなく、新しく作ったプロパティ MeasureArea を参照するように書き換えます。

図8　計測場所の表示を @MeasureArea に書き換える

<p>計測場所：@MeasureArea</p>

これでパラメータを受け取る準備が整いました。なお、元の _measureArea フィールドは今回のレクチャーでは削除せずそのまま残していますが、表示には使われなくなります。

動作確認

まずはブラウザーのアドレスバーに直接URLを入力して確認します。/measure の後ろにスラッシュを付けて「立川」と入力し、Enterキーを押します。

図9　アドレスバーに /measure/立川 と入力する

図10　計測場所に「立川」が表示された

URLの末尾に付けた「立川」という文字列が、そのままMeasureAreaプロパティに渡り、計測場所として画面に表示されていることが確認できます。

続けて、Home画面側のリンク（aタグ）からも同様にパラメータを渡せることを確認します。Home.razorを開くと、aタグの href属性が “measure” になっています。

図11　変更前のHome.razor。href=”measure” となっている

この href の値を “measure/宇都宮” のように書き換えます。

図12　href=”measure/宇都宮” に書き換えたHome.razor

<a href="measure/宇都宮">計測画面を開く</a>

実行してHome画面のリンクをクリックすると、計測画面に遷移し、計測場所に「宇都宮」と表示されます。

図13　リンクから遷移し、計測場所に「宇都宮」が表示された

まとめ

画面間でパラメータを受け渡す手順は、次の3ステップです。

この仕組みを使うと、リンク元の画面から遷移先の画面へ、URL経由で値を直接渡すことができます。今回はaタグのhref属性から渡しましたが、同じ考え方でボタンのクリック時に動的なURLへ遷移させることもできます。ぜひ実際に手を動かして試してみてください。