BlazorアプリケーションでURLパラメーターを取得する

BlazorアプリケーションでURLのパラメーターを取得するコードを紹介します。

概要

BlazorアプリケーションでURLに付加されたパラメーターを取得するためのコードを紹介します。
CGIなどのアプリケーションでは下記を一例とするURL形式でパラメーターを与えています。下記の書式ではパラメータのキーとその値をセットにして複数のパラメーターをCGIに与えています。

一方で最近のWebアプリケーションではファイルの拡張子は見せず、ディレクトリを指定したURLでルーティングにより画面を切り替えることが多いです。この場合、パラメーターは拡張パラメーターとしてディレクトリの書式で付与されます。
この記事では、BlazorアプリケーションでURLのパラメーターを取得する方法を紹介します。

プログラム

事前準備

Blazorアプリケーションを作成し、メイン画面のRazorコンポーネントを作成します。作成手順の詳細はこちらの記事を参照してください。ルーティングコンポーネント、フォールバックページ、メインページのRazorコンポーネントを作成します。メインページのRazorコンポーネントはIndex.razorの名称で作成します。

ページのBlazorコンポーネントの実装

URLごとに、ページのBlazorコンポーネントが呼び出されるため、URLに追加されたパラメーターは呼び出されるBlazorコンポーネントで取得します。メインページのBlazorコンポーネントを実装します。

@page "/Index"
@page "/Index/{paramstr}"

<h3>Index</h3>
<p>パラメーター:@pstr  です</p>
@code {
  [Parameter]
  public string paramstr { get; set; }

  public string pstr;

  protected override void OnInitialized()
  {
      if (paramstr == null) {
          pstr = "(なし)";
      }
      else {
          pstr = paramstr;
      }
  }
}

解説

下記の@pageディレクティブでルーティングにより表示されるぺージを指定します。下記のコードでは https://(アプリケーションルート)/Index のURLと https://(アプリケーションルート)/Index/(パラメーター文字列) のURLであった場合はIndex.razorを表示する動作となります。与えられたパラメーターはparamstr変数に代入されます。

@page "/Index"
@page "/Index/{paramstr}"

ページ部分のタグです。pstr変数の値を画面に表示する動作になります。

<h3>Index</h3>
<p>パラメーター:@pstr  です</p>

パラメーターが代入されるプロパティの宣言になります。パラメータのプロパティの場合は [Prameter] 属性を記述します。Prameter属性を記述した場合、直後にはプロパティまたはインデクサを記述する必要があります。パラメーターをメンバ変数で直接受け取ることはできません。
今回シンプルな文字列のパラメータを受け取るのみのため、自動実装プロパティで記述しています。自動実装プロパティの詳細はこちらの記事を参照してください。

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

画面に表示するpstr変数の宣言です。

  public string pstr;

ページの表示時に実行されるメソッドです。razorコンポーネントのOnInitializedメソッドをオーバーライドして初期化時(ページ読み込み時)の処理を記述しています。
パラメーターが代入された文字列を判定し、nullであれば「(なし)」の文字列をpstr変数に代入します。パラメーターがnullでなければ、pstr変数にパラメータの文字列を代入します。

  protected override void OnInitialized()
  {
      if (paramstr == null) {
          pstr = "(なし)";
      }
      else {
          pstr = paramstr;
      }
  }

実行結果

プロジェクトを実行します。下図のページが表示されます。今回、アプリケーションルートをルーティングするrazorコンポーネントのページを用意していないため、ルーティングコンポーネントのページがない旨のメッセージが表示されます。


(アプリケーションルート)/Index/Penguin のURLを入力します。Index.razorのページが表示され、パラメータの値に "Penguin" が取得できています。


(アプリケーションルート)/Index/Duck のURLを入力します。Index.razorのページが表示され、パラメータの値に "Duck" が取得できています。URLからパラメーターが取得できていることが確認できます。


(アプリケーションルート)/Index/もふもふホットケーキ のURLを入力します。Index.razorのページが表示され、パラメータの値に "もふもふホットケーキ" が取得できています。日本語のURLでも動作することが確認できます。


(アプリケーションルート)/Index のURLでアクセスします。Index.razorのページが表示され、パラメータの値に "(なし)" が表示されます。パラメーターを入力しなかった場合はパラメータのプロパティがnullになることが確認できます。

プログラム例:パラメーターが複数の場合

パラメーターを複数受け取る場合のコードも紹介します。先のプロジェクトに "Search.razor" コンポーネントを追加します。下記のコードを記述します。

@page "/Search"
@page "/Search/{ActionParam}/{QueryParam}"
@page "/Search/{ActionParam}/{QueryParam}/{PageParam}"

<h3>Search</h3>
<p>1番目のパラメーター:@pstr1  です</p>
<p>2番目のパラメーター:@pstr2  です</p>
<p>3番目のパラメーター:@pstr3  です</p>

@code {
    [Parameter]
    public string ActionParam { get; set; }

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

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

    public string pstr1,pstr2,pstr3;

    protected override void OnInitialized()
    {
        if (ActionParam == null) {
            pstr1 = "(なし)";
        }
        else {
            pstr1 = ActionParam;
        }
        
        if (QueryParam == null) {
            pstr2 = "(なし)";
        }
        else {
            pstr2 = QueryParam;
        }

        if (PageParam == null) {
            pstr3 = "(なし)";
        }
        else {
            pstr3 = PageParam;
        }
    }
}

実行結果 (複数パラメーターの取得)

プロジェクトを実行し上記のrazorコンポーネントを表示するため、(アプリケーションルート)/Search URLにWebブラウザでアクセスします。下図のページが表示されます。3つのパラメーターは「(なし)」の表示になっています。


続いて、 (アプリケーションルート)/Search/Tag/Penguin/no1 URLにWebブラウザでアクセスします。下図のページが表示されます。1番目のパラメーターに "Tag"、2番目のパラメーターに "Penguin"、3番目のパラメーターに "no1" の値が取得できています。URLの後の拡張パラメーター部分の値が取得できていることが確認できます。


(アプリケーションルート)/Search/ProductName/DuckChair URLにWebブラウザでアクセスします。下図のページが表示されます。1番目のパラメーターに "ProductName"、2番目のパラメーターに "DuckChair"、3番目のパラメーターは(なし)の状態が取得できています。


続いて、 (アプリケーションルート)/Search/List URLにWebブラウザでアクセスします。このURLの場合は、下記の "Sorry, there's nothing at this address."のメッセージが表示されます。このメッセージは App.razor のルーティングコンポーネントに記載されているメッセージであり、ルーティング先のrazorコンポーネントが見つからなかったことを示しています。
今回のSearch.razorファイルでは、下記の3パターンのページディレクティブを定義しており、パラメーターが2つのパターンは用意していないため、ルーティングされなかったことが確認できます。

@page "/Search"
@page "/Search/{ActionParam}/{QueryParam}"
@page "/Search/{ActionParam}/{QueryParam}/{PageParam}"

BlazorアプリケーションでURLのパラメーターを取得できました。