Lightning Blog
Blazor記事イメージ画像

【Blazor】 URLパラメータを使い方

更新日:2023/07/18
ページを表示する際に、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);
    }
}

ブログ内の記事で書かれているサンプルコードは、GitHubから確認する事ができます。 是非参考にしてみてください。

この本では、Blazorの基本から高度なテクニックまで、実際のプロジェクトに役立つ知識を網羅しています。 初心者から経験者まで、Blazorを扱うすべての開発者にとっての必読書です。 この記事の執筆者も参考にした「Blazor入門」で、あなたのBlazorスキルを飛躍的に向上させませんか?

合わせて読みたい

カード画像
コンポーネントについて

Blazorは.NET CoreベースのSPA作成フレームワークで、C#とHTMLを使用。この記事はBlazorとRazorコンポーネントの基本を紹介。Blazorアプリは[コンポーネント駆動]で、再利用可能な部品(.razor拡張子)から構成。コンポーネント名は大文字始まりが必要。また、HTMLとC#を組み合わせて、イベントハンドリングやデータバインディングが行える。

更新日:2023/09/06

カード画像
SignalRのまとめ

Blazor ServerアプリケーションにおけるSignalRの基本と、切断および再接続のシナリオを解説します。接続オプションのカスタマイズ手順について詳しく説明しています。

更新日:2024/08/06

An error has occurred. This application may no longer respond until reloaded. Reload 🗙