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

前回のレクチャーでは、計測値（MeasureValue）をfloat型でパラメータ渡しする方法を学びました。今回はその応用として、計測日時（MeasureDate）をDateTime型でパラメータ渡しする方法を解説します。基本的なやり方は前回のfloat型のときと同じですが、DateTime型ならではの注意点があります。

1. MeasureDateプロパティをDateTime型に変更する

まずは開始時点のコードを確認します。MeasurePage.razorの@pageディレクティブにはすでにMeasureValueのfloat型指定（:float?）が入っており、MeasureDateはまだ型指定なしの状態です。

図1　変更前の@pageディレクティブ（MeasureDateはまだ型指定なし）

@codeブロック内のプロパティも、この時点ではMeasureDateはstring型のままです。

図2　変更前のMeasureDateプロパティ（string型）

MeasureDateプロパティの型をDateTimeに変更します。string型のときの初期値”–“はDateTime型にはそのまま使えないため、エラー（赤い波線）が表示されます。

図3　型をDateTimeに変更した直後。初期値がstringのままなのでエラーになる

初期値は DateTime.MinValue を入れておきます。IntelliSenseの候補からMinValueを選択します。

図4　DateTime.MinValueの入力（IntelliSense候補表示）

[Parameter]
public DateTime MeasureDate { get; set; } = DateTime.MinValue;

2. 呼び出し側（Home.razor）にDateTime型のフィールドを追加する

続けて呼び出し側です。float型のときと同様に、private フィールドとしてDateTime型の _datetime を用意し、DateTime.Now を初期値として入れておきます。これをパラメータとして渡す形にします。

図5　Home.razorに private DateTime _datetime = DateTime.Now; を追加

private float _value = 12.8f;
private DateTime _datetime = DateTime.Now;

3. 「引数3つ」のリンクを書き換えて実行してみる

「引数3つ」のリンクの2つ目（計測日時の部分）を、ハードコーディングされた文字列から @_datetime に書き換えます。

図6　書き換え前のhref（日時部分はUri.EscapeDataStringで囲んだ固定文字列）

図7　@_datetime に置き換えた直後のhref

この状態でアプリを実行すると、Homeページには3つのリンクが表示されます。

図8　Homeページの実行画面。「引数３個」のリンクをクリックする

しかし「引数３個」のリンクをクリックすると、エラー（404）になってしまいます。

図9　「引数３個」リンククリック時のエラー（404）

エラーの原因

パラメータの型はDateTime型として指定しているものの、URL上では内部的に文字列に変換されてから渡されます。その際、DateTime型を既定のToString()で文字列化すると yyyy/MM/dd のようにスラッシュ（/）が含まれる書式になり、このスラッシュがURLのルーティングにおける区切り文字と衝突してしまうため、正しくルーティングされずエラーになります。

4. Uri.EscapeDataStringとToStringの書式指定で対応する

結局この場合も、float型のときと同じやり方で対応します。@Uri.EscapeDataString() で全体を囲み、その中で _datetime を ToString() してスラッシュを含まない書式に変換します。

まずは yyyy-MM-dd のように、区切り文字をスラッシュからハイフンに変えた書式を指定します。

図10　_datetime.ToString(“yyyy-MM-dd”) と入力していく途中経過

日付部分だけでなく、時刻部分（HH:mm:ss）まで含めた書式にし、Uri.EscapeDataString() の丸カッコを閉じます。

図11　完成形：Uri.EscapeDataString(_datetime.ToString(“yyyy-MM-dd HH:mm:ss”))

<a href="measure/@_value/@Uri.EscapeDataString(_datetime.ToString("yyyy-MM-dd HH:mm:ss"))/立川">計測画面を開く　引数３個</a>

あわせて、@pageディレクティブのURLパラメータ側にもfloat型のときと同じ要領でコロン区切りの型指定を追加し、MeasureDateにも :datetime? を付けておきます。

図12　@pageディレクティブにMeasureDate:datetime?を追加した状態

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

最終的な@codeブロック側のプロパティ定義は次のとおりです。

図13　最終的なMeasureValue／MeasureDateプロパティ

[Parameter]
public float MeasureValue { get; set; } = 0f;
[Parameter]
public DateTime MeasureDate { get; set; } = DateTime.MinValue;
[Parameter]
public string MeasureArea { get; set; } = "--";

5. 動作確認

この状態で改めて「引数３個」のリンクから遷移すると、URLはハイフン区切りの日時文字列がエスケープされた形になり、エラーなく計測画面に遷移します。計測日時にも正しく値（2024/12/02 23:12:41など）が表示されることを確認できます。

図14　実行結果。計測日時が正しく表示される

まとめ

パラメータを型指定して受け渡しすることはできますが、内部的に渡す際はURL上では文字列になっているため、今回のDateTime型のスラッシュのように、そのままではうまくいかないケースが出てきます。そのようなときは、今回のようにUri.EscapeDataString()とToString()の書式指定を組み合わせて対応します。多少手間はかかりますが、エラーなく受け取れた時点で、そのプロパティに指定した型（今回であればDateTime型）の値が入っていることが保証されます。型を指定して安全に値を受け取りたい場合は、このような形で対応するとよいでしょう。