BlazorページのURLの定義方法いろいろ（URL文字列・パラメタ取得など）

Blazorは.NETのウェブUIフレームワークです。SPAのように高速な画面遷移ができます。

Blazorを使うことでウェブサーバを使用したウェブアプリも、ウェブサーバが不要なSPAも開発することができます。

この記事では、どちらのBlazorでも使えるURLパラメタを取得・判定する方法を紹介します。

固定のURLを定義する方法

各ページのURLを定義するには、Pageディレクティブに記述します。

以下のように記述すると、「https://usefuledge.com/」のように、トップのインデックスページの指定になります。

@page "/"

以下のように記述すると、「https://usefuledge.com/details/」のように、「details」ページの指定になります。

@page "/details/"

それでは、「https://usefuledge.com/details/A」や「https://usefuledge.com/details/B」のように、URLの一部を可変にするには、どうすればいいでしょうか。

まずは、Pageディレクティブを以下のように定義します。

@page "/details/{CodeID?}"

次に、codeディレクティブ内に以下のように変数を定義します。

    [Parameter]
    public string codeID {get; set;}

このようにすることで、URLに指定された文字列をcodeIDという文字列に格納して処理することができます。

codeIDの中身を確認したい場合は、デバッグしたり、HTML部分に@codeIDなどと入力したり、OnAfterRenderAsyncなどで標準出力するなどいろいろな方法があります。

https://pacode.net/?languageID=8のように、URLパラメタを取得したい場合を考えてみます。

まずはPageディレクティブで以下のようにページURLを定義します。今回はルートページに対して設定していきますので、以下のようになります。

@page "/"

次に、codeディレクティブで以下のようにパラメタを定義します。

String?とすることで、Nullを許容した文字列型になります。

Nullを許容することで、URLにlanguageIDパラメタが指定されていなくてもエラーにならず処理が可能になります。

[Parameter]
[SupplyParameterFromQuery]
public String? languageID {get; set;}

languageIDの値は変数に格納されますので、デバッグしたり、HTML部分に@languageIDなどと入力したり、OnAfterRenderAsyncなどで標準出力するなどいろいろな方法があります。

System.Console.WriteLine(languageID);