BlazorでのWebアプリケーション開発手法１【C#】B13_複数のパラメータを渡す

前回のレクチャーまでで、計測画面（MeasurePage.razor）へはURL経由で「計測値」と「計測場所」の2つのパラメータを渡せるようになりました。@pageディレクティブに {MeasureValue} と {MeasureArea} という2つのプレースホルダーを指定し、対応する [Parameter] 属性付きプロパティで受け取るという形です。

今回はこの仕組みをもう一歩進めて、パラメータを3つに増やします。新しく追加するのは「計測日時」（MeasureDate）です。@pageディレクティブとプロパティを追加し、Home画面側のリンクも合わせて修正することで、値・日時・場所の3つをURL経由で渡せるようにしていきます。

1. @pageディレクティブに3つ目のパラメータを追加する

MeasurePage.razorを開くと、@pageディレクティブがすでに3行並んでいます。1行目がパラメータなしの “/measure”、2行目が計測場所のみを受け取る “/measure/{MeasureArea}”、3行目が計測値と計測場所の2つを受け取る “/measure/{MeasureValue}/{MeasureArea}” です。

図1　既存の@pageディレクティブ（パラメータ2個までの状態）

3行目をコピーして4行目に貼り付け、これを3パラメータ版のベースにします。

図2　3行目をコピーして4行目に貼り付けたところ

貼り付けた行の {MeasureValue} と {MeasureArea} の間に、スラッシュで区切って {MeasureDate} を追加します。@pageディレクティブは複数記述でき、URLのスラッシュで区切った位置に中カッコでプロパティ名を指定すると、その位置の値がそのプロパティに渡される、という仕組みは2パラメータのときと同じです。

図3　{MeasureDate} を追加した4行目

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

2. MeasureDateプロパティを追加する

続いて、URLから受け取った値を保持するプロパティを追加します。@codeブロックにすでにある [Parameter] 付きの MeasureValue プロパティをコピーし、その下に貼り付けます。

図4　MeasureValueプロパティをコピーして貼り付けたところ

貼り付けたプロパティ名を MeasureDate に書き換えます。これで MeasureValue・MeasureDate・MeasureArea の3つの [Parameter] 付きプロパティが揃いました。

図5　プロパティ名をMeasureDateに書き換えたところ

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

3. HTML側のデータバインドを書き換える

画面表示側では、計測日時の行がまだ従来のフィールド @_measureDate をバインドしたままになっています。これを、新しく追加した @MeasureDate に書き換えます。

図6　計測日時の表示を@MeasureDateに書き換えたところ

<p>計測値：@MeasureValue</p>
<p>計測日時：@MeasureDate</p>
<p>計測場所：@MeasureArea</p>

4. Home画面側のリンクを修正する

Home.razorには、パラメータの数ごとにリンクが用意されています。「引数2個」のリンクは、計測値を Uri.EscapeDataString で URL エンコードしてから計測場所（”立川”）と一緒に渡す形になっていました。これをコピーして「引数3個」のリンクを作ります。

図7　既存の「引数2個」リンク（コピー元）

図8　コピーしたリンクのラベルを「引数３個」に変更したところ

計測値と計測場所の間に、計測日時を挿入します。日時の文字列にもスラッシュ（/）が含まれるため、計測値のときと同様に Uri.EscapeDataString でエスケープしてから埋め込みます。

図9　Uri.EscapeDataStringで計測日時を追加している途中

図10　計測日時の埋め込みが完了したところ

3つのリンクが縦に並ぶと見づらくなるため、リンクの前に <br /> を追加して改行を入れておきます。

図11　<br />を追加して整形した最終形

<a href="measure/@Uri.EscapeDataString("123.45 m/s")/@Uri.EscapeDataString("2024/01/01 12:34:56")/立川">計測画面を開く　引数３個</a>

5. 実行して確認する

実行し、Home画面の「引数３個」のリンクをクリックすると、計測画面に「計測値：123.45 m/s」「計測日時：2024/01/01 12:34:56」「計測場所：立川」の3つがすべて正しく表示されることを確認できます。アドレスバーを見ると、Uri.EscapeDataStringでエスケープされた値がURLに含まれていることも分かります。

図12　3つのパラメータがすべて渡り、正しく表示された実行結果

まとめ

@pageディレクティブは複数行書けるため、パラメータの数だけバリエーションを用意しておけば、URLの区切り方に応じて柔軟にルーティングできます。パラメータを増やす手順自体は、①@pageディレクティブにプレースホルダーを追加する、②対応する [Parameter] 付きプロパティを追加する、③HTML側のバインド先をそのプロパティに書き換える、④リンク側でスラッシュ区切りの値を渡す、という2パラメータのときと同じ流れの繰り返しです。値にスラッシュなど区切り文字と衝突する可能性がある場合は、Uri.EscapeDataStringでエスケープしておくと安全です。同じ要領で、必要な数だけパラメータを増やして試してみてください。