BlazorでのWebアプリケーション開発手法１【C#】B15_string以外の型をパラメータで使う方法

今回は、URLパラメータをstring以外の型で受け取る方法を解説します。前回までの計測画面（MeasurePage）では、計測場所などのパラメータをすべてstring型のプロパティで受け取っていましたが、これをfloat型など別の型で受け取りたい場合にどう書けばよいかを見ていきます。

図1　変更前のMeasurePage.razor。public string MeasureValueとして定義されており、System.Stringであることがツールチップで確認できる

プロパティの型をfloatに変更する

まず、MeasureValueプロパティの型をstringからfloatに書き換えます。あわせて、デフォルト値もstring用の”–“からfloat用の0fに変更します。

図2　プロパティの型をfloatに書き換えたところ

図3　デフォルト値を0fに変更したところ

この時点でのMeasureValueプロパティの定義は次のようになります。

[Parameter]
public float MeasureValue { get; set; } = 0f;

呼び出し側の引数を差し替える

続いて、呼び出し元であるHome.razorを確認します。「引数3個」のリンクでは、1つ目の引数として計測値の文字列 @Uri.EscapeDataString(“123.45 m/s”) をそのまま渡していました。これをfloat型の変数から渡すように書き換えます。

図4　変更前のHome.razor。「引数3個」のリンクの1つ目の引数がstringの文字列になっている

まず@codeブロックに、float型のフィールド _value を追加し、初期値として12.8fを設定します。

図5　@codeブロックにprivate float _valueフィールドを追加しているところ

図6　_valueの初期値を12.8fに設定したところ

private float _value = 12.8f;

次に、1つ目の引数の部分を、この _value を@付きで参照する形に書き換えます。

図7　hrefの1つ目の引数を@_valueに書き換えたところ

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

そのまま実行するとエラーになる

この状態で実行すると、URLは /measure/12.8/… のようになりますが、画面はエラーになってしまいます。エラー内容を確認すると、InvalidCastException: Unable to cast object of type ‘System.String’ to type ‘System.Single’ と表示されています。

図8　実行時エラー画面。System.StringをSystem.Singleにキャストできない旨のInvalidCastExceptionが発生している

エラーメッセージにあるSingleは、C#のfloat型を表す型名（System.Single）です。URLから渡ってきた値はstringとして扱われるため、float型のプロパティにそのまま代入しようとしてキャストエラーになっている、という状況です。

図9　エラーメッセージ中のSingleの部分。floatの正式な型名であることを示している

@pageのURLにコロンで型を指定する

このエラーを解消するには、@pageディレクティブのURLパラメータ部分に、コロンに続けて型名を指定します。string型の場合はこれまで通り {MeasureValue} のように書くだけでよいのですが、string以外の型で受け取りたい場合は {MeasureValue:float} のように、パラメータ名の後ろにコロンと型名を書き足します。

図10　MeasurePage.razorの@pageディレクティブ一覧。まだ型指定を追加する前の状態

MeasureValueの後ろに :float を追加すると、次のようになります。

図11　@pageのURLにMeasureValue:floatと型指定を追加しているところ

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

これで、MeasureValueパラメータはfloat型として受け取ることが定義できました。この状態で再度実行すると、今度はエラーにならず、計測値として12.8が正しく画面に表示されます。

図12　再実行後の画面。計測値：12.8と正しくfloat型の値が表示されている

このように、パラメータのURLの部分にコロンで型を指定するというルールを覚えておいてください。

型名の後ろの?について

ちなみに、{MeasureValue:float?} のように型名の後ろに付いている ? は、そのパラメータが任意（省略可能）かどうかを表す記号です。任意にしたい場合は ? を付け、必須にしたい場合は ? を外す、というだけの違いになります。

図13　?マークは「任意かどうか」を表す記号であることを示す注釈

float自体をnull許容にしたい場合

型としてfloatのnull許容（float?）にしたい場合は、URL側ではなく、プロパティ側のfloatに ? を付けます。実際にMeasureValueプロパティのfloatをfloat?に書き換えると、ツールチップで float? MeasurePage.MeasureValue { get; set; } となり、null許容型に変わったことが確認できます。

図14　プロパティの型をfloat?に書き換え、null許容型になったことをツールチップで確認しているところ

URL側の指定はnull許容かどうかに関わらず同じで、任意にしたければURL側の ? を付け、必須にしたければ外す、という判断をするだけです。型自体をnull許容にするかどうかは、あくまでプロパティ側のfloatに ? を付けるかどうかで決まります。今回はプロパティ側の変更は確認のためのものなので、floatに戻しておきます。

図15　確認後、プロパティの型をfloatに戻したところ

以上のように、string以外の型でパラメータを受け取りたい場合は、@pageのURLのパラメータ名の後ろにコロンで型を指定してみてください。