Blazorでの検索・フィルターと状態保持の実装方法｜ASP.NET×Blazor入門 11.4

11.4 検索・フィルター、状態保持

このセクションでは、Todoアプリに検索・フィルター機能を追加し、ユーザーが多くのタスクの中から必要なものを素早く見つけられるようにします。 また、状態管理の方法として、検索条件などを保持しながら操作できる構成を解説します。

1. 検索フォームの追加

以下のように、TodoList.razor に検索用のフィールドを追加します。

...

@foreach (var item in FilteredTodos)
{
    <TodoItemRow Item="item" OnUpdated="LoadTodos" />
}
  

コードのポイント

• searchKeywordにバインディングされた入力値でリアルタイムにフィルタリング
• FilteredTodos は Linq で検索対象を絞り込むプロパティとして定義

string searchKeyword = "";

List FilteredTodos => string.IsNullOrWhiteSpace(searchKeyword)
    ? todos ?? new()
    : todos.Where(t => t.Title.Contains(searchKeyword, StringComparison.OrdinalIgnoreCase)).ToList();
  

2. フィルターの状態保持

ページ遷移時に検索条件が消えるのを防ぐため、状態管理サービスを使って検索条件を保持できます。 以下はシンプルな状態管理クラスの例です。

public class TodoSearchState
{
    public string? Keyword { get; set; }
}
  

DIコンテナに登録し、ページ間で状態共有できるようにします。

// Program.cs
builder.Services.AddScoped();
  

3. 状態を使った検索

TodoList.razor 側では @inject TodoSearchState SearchState とし、 OnInitialized などで searchKeyword = SearchState.Keyword; と初期化します。

入力変更時には SearchState.Keyword = searchKeyword; と保存しておくことで、 遷移後にも元の検索条件が復元可能です。

4. 機能統合と応用

フィルターはタイトルだけでなく、ステータスや期日など他の条件と組み合わせて拡張できます。 また、QueryStringと連携して検索状態をURLに埋め込むことで、ブックマーク可能な検索ビューも実現できます。

本章では、アプリケーションを実用レベルに近づけるための要素を総合的に取り入れてきました。 ここまでのTodoアプリを通して、Blazorアプリの全体像と設計・開発・UI・状態管理までの流れを一通り学習しました。

次の章では、「テストとデプロイ」に進み、完成したBlazorアプリをより安心して運用するための体制を整えていきます。