【Blazor】 URLパラメータを使い方
- パラメータを受け取るページを作成
- 実行
目次
パラメータを受け取るページを作成

URLからパラメータを受け取るページを作成していきましょう。 以下にサンプルコードを示します。
"@page "/parameterurl/{Param1}/{Param2}"
"<h3>ParameterUrl</h3>"
<div>Param1 : @Param1</div>
<div>Param2 : @Param2</div>
@code {
[Parameter]
public string Param1 { get; set; }
[Parameter]
public string Param2 { get; set; }
}
@codeに受け取りたいパラメータ(Param1,Param2)を宣言します。 宣言したら、@pageに宣言した変数名を{ }で囲って追記します。 @pageのパラメーター名は、大文字と小文字は区別されませんので、Param1でもparam1でも問題ありません。 これでパラメータを受け取ることができるようになりました。
実行

URLに直接[パラメータ1][パラメータ2]という文字列を指定して、ページ遷移してみます。 URLで指定した文字列が表示されることを確認してください。
URLでパラメータを渡すときの注意点ですが、文字列でしか渡すことができません。 数値を渡したい場合は、文字列で受け取った後に初期化処理等でキャストしてください。
@* URLから数値を受け取るページ *@
@page "/parameterurlnumber/{Param1}/{Param2}"
<h3>ParameterUrl</h3>
<div>Param1をキャストした値 : @paramNumber1</div>
<div>Param2をキャストした値 : @paramNumber2</div>
@code {
[Parameter]
public string Param1 { get; set; }
[Parameter]
public string Param2 { get; set; }
private int paramNumber1;
private int paramNumber2;
protected override void OnInitialized()
{
int.TryParse(Param1, out paramNumber1);
int.TryParse(Param2, out paramNumber2);
}
}
この本では、Blazorの基本から高度なテクニックまで、実際のプロジェクトに役立つ知識を網羅しています。 初心者から経験者まで、Blazorを扱うすべての開発者にとっての必読書です。 この記事の執筆者も参考にした「Blazor入門」で、あなたのBlazorスキルを飛躍的に向上させませんか?
合わせて読みたい

動的なコンポーネントの使い方
Blazorでの動的コンポーネントの使用方法を紹介。条件分岐でのコンポーネント切り替えをシンプルに実現し、ドロップダウンメニューで果物を選ぶと対応する果物のコンポーネントが表示される仕組みを示す。また、パラメータ渡しで果物の感想も表示可能。
更新日:2023/08/30

gzip形式でデータを圧縮する方法
Blazorでのgzip形式によるデータ圧縮方法を解説。データの圧縮により通信速度の向上や読み込み時間の短縮が期待でき、SEOやUX向上にも寄与。Blazorアプリ側とサーバー側の設定が必要で、特に通信速度や圧縮サイズを優先するか選択可能。Webサーバー設定も取り上げ、Nginxの例を示す。
更新日:2023/09/03