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/"

可変のURLを定義する方法

それでは、「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などで標準出力するなどいろいろな方法があります。

URLから変数(パラメタ)を取得する

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);

おすすめ本 c#コードレシピ集

c#コードレシピ集は、「文字列を大文字あるいは小文字に変換したい」や「Taskをキャンセルしたい」など逆引き的にコードの書き方を調べられるレシピ集です。

2021年8月に発売された本で、全部で385個のレシピが収録されています。

ジャンルは日付処理やLINQ、並列処理と非同期処理など幅広く記載されています。

Kindle対応ですので、まずはサンプルをダウンロードして何が書かれているか確認してはいかがでしょうか。

カテゴリー: C#

コメントを残す

メールアドレスが公開されることはありません。