BlazorでのWebアプリケーション開発手法１【C#】B12_EscapeDataStringでエスケープする

前回までで、URLのパラメータとして計測画面に値を渡す方法を扱いました。今回はその応用として、複数のパラメータを同時に渡す方法と、URLに使えない特殊文字を含む値を渡すときの注意点を扱います。

なお、前回のコードでは行末にセミコロン（;）が付いていましたが、Razor構文では不要なので削除しておきます。

図1　書き換え前のMeasurePage.razor。@pageディレクティブは「/measure」と「/measure/{MeasureArea}」の2つのみで、パラメータは計測場所（MeasureArea）だけを受け取る状態

複数パラメータを受け取る

これまでは計測場所（MeasureArea）のみをURL経由で受け取っていましたが、今回は計測値（MeasureValue）も合わせて2つのパラメータを受け取れるようにします。

複数のパラメータをURLで受け取るには、@pageディレクティブに「/」で区切って中カッコ（{ }）で囲んだパラメータ名を必要な数だけ並べます。

図2　@page “/measure/{MeasureValue}/{MeasureArea}” のように、スラッシュでつないで中カッコのパラメータ名を並べて記述する

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

あわせて、受け取ったMeasureValueの値を保持するためのプロパティを、MeasureAreaのときと同様に[Parameter]属性を付けて追加します。

図3　[Parameter]属性を付けたMeasureValueプロパティを追加する

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

最後に、画面表示側の計測値の行を、これまでのフィールド参照から、追加したMeasureValueプロパティの参照に書き換えます。

図4　計測値の表示を @MeasureValue にバインドし直す

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

これで、アドレスバーに「/measure/123/宇都宮」のように入力すると、1番目の値がMeasureValueに、2番目の値がMeasureAreaに、それぞれ渡って表示されるようになります。

図5　/measure/123/宇都宮 にアクセスすると、計測値：123、計測場所：宇都宮 が表示される

Home画面側のリンクも、2つの引数を渡す形に書き換えて動作を確認します。1番目がMeasureValue、2番目がMeasureAreaに対応するので、href=”measure/123/立川”のように書けば、計測値が123、計測場所が立川として渡ります。

図6　Home.razorのリンクを href=”measure/123/立川” に書き換えて実行すると、計測値：123、計測場所：立川 が表示される

URLに使えない文字を渡すとエラーになる

ここまでは整数の計測値でしたが、実際には「123.45 m/s」のように単位や記号を含む値を渡したい場合があります。試しにそのままhref属性の中に書いてみます。

図7　href=”measure/123.45 m/s/立川” のように、単位付きの文字列をそのままURLに埋め込む

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

この状態で実行すると、画面がError: 404となり、正しく計測画面に遷移できません。

図8　実行するとError: 404となり、計測画面が表示されない

原因は、値の中に含まれる「/」（スラッシュ）です。ブラウザはURL中の「/」を区切り文字として解釈するため、「123.45 m/s」に含まれる「/」がURLの区切りだと誤認識されてしまいます。実際に、この「/」を取り除くと問題なく動作することからも、「/」が原因であることが確認できます。

そこで、「ここからここまでは1つの文字列であり、URLの区切りではない」ということをブラウザに伝える書き方（エスケープ）が必要になります。C#では、Uri.EscapeDataStringメソッドを使うことで、文字列中のURLに影響する特殊文字をエスケープできます。値の部分を@Uri.EscapeDataString(“…”)で囲むように書き換えます。

図9　href=”measure/@Uri.EscapeDataString(“123.45 m/s”)/立川” のように、値の部分をUri.EscapeDataStringで囲む

<a href="measure/@Uri.EscapeDataString("123.45 m/s")/立川">計測画面を開く　引数2個</a>

これで再度実行すると、アドレスバー上では「123.45 m/s」の空白やスラッシュが「%20」「%2F」のようにエスケープされた状態でURLに渡り、区切り文字と誤認識されることなく正しく計測画面に反映されます。

図10　実行すると、アドレスバーには123.45%20m%2Fsのようにエスケープされた文字列が表示され、計測値：123.45 m/s、計測場所：立川 が正しく表示される

このように、URLに影響を与えるような空白やスラッシュなどの特殊文字を含む値をパラメータとして渡す場合は、Uri.EscapeDataStringを使ってエスケープするようにしてください。