【Blazor】 クエリ文字列を操作する方法

BlazorでURIを処理する上で便利なMicrosoft.AspNetCore.WebUtilitiesというライブラリを使用します。 これを使うと、HTTPリクエストやレスポンスに関連する操作を容易に行うためのユーティリティクラスやメソッドが利用できます。

今回はMicrosoft.AspNetCore.WebUtilitiesのQueryHelpersクラスのURIを操作するメソッドを利用していきます。

QueryHelpersクラスのParseQueryメソッドは、URIのクエリパラメータから値を取得する際に使用します。 以下はクエリ文字列から値を取得するコード例です。

@page "/counter"
@using Microsoft.AspNetCore.WebUtilities;
@inject NavigationManager NavigationManager

@* ページタイトル *@
<h1>Counter</h1>

@* カウント表示 *@
<p>Current count: @countValue</p>

@* カウントを増やすボタン *@
<button class="btn btn-primary" @onclick="IncrementCount">Increase Count</button>

@code {

    int countValue = 0;

    // ページ初期化時の処理
    protected override void OnInitialized()
    {
        var currentUri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);

        // クエリパラメータ "startCount" をチェックしてカウントを設定
        if (QueryHelpers.ParseQuery(currentUri.Query).TryGetValue("startCount", out var startCount))
        {
            countValue = Convert.ToInt32(startCount);
        }
    }

    // カウントを増やす処理
    void IncrementCount()
    {
        countValue++;
    }

}

OnInitializedメソッドはページの初期化時に呼び出されるメソッドで、 このメソッド内にクエリ文字列を処理するコードを書いています。 BlazorのサービスであるNavigationManagerのToAbsoluteUriメソッドで現在のURIを取得できます。 そのURIをQueryHelpers.ParseQueryの引数として実行することで、countValueの値を求めることができます。

QueryHelpersクラスのAddQueryStringメソッドは、 ベースとなるのURIにクエリパラメータを追加するために使用します。以下コード例になります。

@page "/add-query"
@using Microsoft.AspNetCore.WebUtilities;
@inject NavigationManager NavigationManager

@* ページタイトル *@
<h1>Add Query String Example</h1>

@* 新しいURIを表示 *@
<p>Original URI: @originalUri</p>
<p>Modified URI: @uriWithQuery </p>
@code {
    string originalUri = "https://example.com";
    string? uriWithQuery;

    /// <summary>
    /// ページ初期化時の処理
    /// </summary>
    protected override void OnInitialized()
    {
        // クエリパラメータを追加
        var parameters = new Dictionary<string, string?>
        {
            { "name", "John Doe" },
            { "age", "30" },
            { "city", "Tokyo" }
        };

        uriWithQuery = QueryHelpers.AddQueryString(originalUri, parameters);
    }
}

originalUriは、クエリパラメータ追加前のURI、uriWithQueryは、クエリパラメータ追加後のURIです。 QueryHelpers.AddQueryStringメソッドの第一引数にはoriginalUri、第二引数にはパラメータ名とその値をペアにした辞書型を指定します。 辞書型で指定することで複数のクエリパラメータを指定することができます。 実行することで、元のURIを保持したまま、新しいパラメータを追加することができます。

実行すると、https://example.com?name=John%20Doe&age=30&city=Tokyoが出力されます。

Microsoft.AspNetCore.WebUtilitiesのQueryHelpersクラスを使用すると、URIのクエリパラメータを簡単に追加および取得できます。 この記事で紹介したメソッドを活用して、URIのクエリパラメータを操作してみてください。 これにより、Blazorアプリケーションでのデータの受け渡しがさらに便利になります。 クエリパラメータを適切に処理することで、ユーザーの操作に応じた動的なコンテンツを提供できるようになります。