BlazorでのWebアプリケーション開発手法１【C#】B17_引数2個のURLも型指定に変更する

前回までのレクチャーで、URLパラメーターに型を指定する書き方——@page ディレクティブに :float や :datetime のような型を付ける方法——を見てきました。3つの値を渡す「引数3個」のURL（@page “/measure/{MeasureValue:float?}/{MeasureDate:datetime?}/{MeasureArea?}”）ではすでに型指定を行っていましたが、2つの値を渡す「引数2個」のURL（@page “/measure/{MeasureValue}/{MeasureArea}”）は型指定がされないまま残っていました。

図1　MeasurePage.razorの@pageディレクティブ。3行目「引数2個」用の記述だけ型指定（:float）が付いていない

この状態のまま「引数2個」の画面遷移を試すとエラーになります。原因は、計測値を保持するMeasureValueプロパティの型をfloatに変更したにもかかわらず、対応する@pageディレクティブ側には型指定がなく、URL上の値が文字列としてそのままfloat型のプロパティへセットされようとするためです。実際にHomeページの「引数2個」リンク（href=”measure/@Uri.EscapeDataString(“123.45 m/s”)/立川”）をクリックすると、「InvalidCastException: Unable to cast object of type ‘System.String’ to type ‘System.Single’.」というエラー画面が表示されます。

図2　型不一致により表示されるエラー画面（System.StringをSystem.Singleにキャストできない旨のInvalidCastException）

この問題を解消するため、MeasurePage.razorの3行目の@pageディレクティブを、4行目と同じ要領でMeasureValueに「:float」の型指定を追加する形に書き換えます。

図3　3行目のMeasureValueに:floatを追加した後の@pageディレクティブ

@* @page "/measure" *@
@page "/measure/{MeasureArea}"
@page "/measure/{MeasureValue:float}/{MeasureArea}"
@page "/measure/{MeasureValue:float?}/{MeasureDate:datetime?}/{MeasureArea?}"

続けて、呼び出し側であるHome.razorの「引数2個」用リンクも修正します。これまでは @Uri.EscapeDataString(“123.45 m/s”) のように単位付きの文字列をそのままfloat型のパラメーターへ渡そうとしていたため、このままではキャストできません。該当行にはコードエディタ上も型不一致を示す警告アイコンが表示されます。

図4　修正前のHome.razor。「引数2個」リンクが単位付き文字列”123.45 m/s”をそのまま渡している

図5　型不一致を示す警告アイコンが行番号の左に表示されている

修正方法としては、floatに変換可能な値を持つ既存の変数（@_value など）をそのまま渡す方法と、”23.456″ のようにfloatへ変換可能な数値の文字列に直接書き換える方法の2通りが考えられます。今回はシンプルに、リンクのURL部分を数値文字列 “23.456” に書き換えます。

図6　「引数2個」リンクのURL部分を23.456に書き換えているところ

<a href="measure/23.456/立川">計測画面を開く　引数2個</a>

実行してHomeページを開くと、これまでどおり「計測画面を開く　引数2個」のリンクが表示されます。

図7　Homeページ。「引数2個」リンクをクリックする

このリンクをクリックすると、今度はエラーにならずに計測画面（/measure/23.456/立川）へ正しく遷移し、URLで指定した23.456が計測値としてそのまま画面に表示されることが確認できました。これで「引数2個」のURLについても、「引数3個」のURLと同様に型指定が反映され、正しく動作するようになりました。

図8　「引数2個」のURL経由で計測画面に遷移し、計測値：23.456が正しく表示された