演習 - To Do リストを作成する

  • 10 分

この演習では、これまでに学習したすべてのものを使って、基本的な To Do リスト ページを Blazor アプリに追加します。

To Do リスト ページを作成する

  1. 新しい Blazor Web アプリ プロジェクトを作成します。

  2. Todo.razor ファイルを Components/Pages フォルダーに追加する

    Visual Studio と Visual Studio Code では、ソリューション エクスプローラーの Components/Pages フォルダーを右クリックし、適切なオプションを選択して新しいファイルを追加することで、Razor ファイルを追加できます。

    このコマンドで .NET CLI を使用して Razor ファイルを作成することもできます。

    dotnet new razorcomponent -n Todo -o Components/Pages

    前述のコマンドの -n|--name オプションでは、新しい Razor コンポーネントの名前を指定します。 新しいコンポーネントは、-o|--output オプションを使用してプロジェクトの Components/Pages フォルダーに作成されます。

    重要

    Razor コンポーネントのファイル名は、他の HTML 要素と簡単に区別できるように、先頭文字を大文字にする必要があります。

  3. Todo コンポーネントを開き、/todo の相対 URL でファイルの先頭に @page Razor ディレクティブを追加し、レンダリング モードを InteractiveServer に設定して、コンポーネントで UI イベントを処理できるようにします。

    @page "/todo"
@rendermode InteractiveServer

<h3>Todo</h3>

@code {

}

  4. アプリに変更を適用し、"/todo" を参照して新しいページを表示してみます。

ナビゲーション メニューに To Do ページを追加する

新しい To Do リスト ページは、他の既存のページと共にナビゲーション メニューにまだ表示されません。 ナビゲーション メニューは、アプリのレイアウトの一部である NavMenu コンポーネントで定義されます。 NavMenu コンポーネントを更新して、To Do リスト ページへのリンクを追加しましょう。

  1. Components/Layout/NavMenu.razor を開きます。

  2. NavMenu コンポーネントで nav 要素を見つけ、天気ページの既存のナビゲーション項目の下に次の div 要素を追加します。

    <div class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Todo
    </NavLink>
</div>

    NavLink コンポーネントは、アンカー タグをレンダリングする組み込みの Blazor コンポーネントです。 現在のブラウザー アドレスが NavLink の href と一致する場合は、リンクのスタイル設定に使用できる active CSS クラスもレンダリングされます。

    この変更を適用した後、ナビゲーション メニューに Todo ページが表示されるはずです。

    追加した Todo ナビゲーション要素のスクリーンショット。

To Do 項目のリストを構築する

  1. プロジェクトのルート (Program.cs と同じレベル) に新しい TodoItem.cs ファイルを作成し、次の C# クラスをそれに追加します。

    public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}

  2. Todo.razor で、@code ブロック内の To Do 項目のリストのフィールドを追加します。

    @code {
    private List<TodoItem> todos = new();
}

  3. foreach ループを使用して、すべての To Do の順序指定されていないリストをレンダリングします。

    <ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

    リストが空であるため、To Do リストに対してレンダリングされるものはまだ表示されません。 To Do 項目をいくつか追加する方法が必要です。

To Do アイテムを追加する

To Do 項目をリストに追加するための UI 要素をいくつか追加してみましょう。

  1. Todo.razor で、順序付けされていないリストの下に input タグと button を追加します。

    <input />
<button>Add todo</button>

  2. newTodo 文字列フィールドを作成し、@bind ディレクティブ属性を使用して input にバインドします。

    <input @bind="newTodo" />
<button>Add todo</button>

@code {
    private List<TodoItem> todos = new();
    string newTodo = "";
}

  3. @onclick ハンドラーを button に追加します。これにより、newTodo の値に基づいて新しい TodoItem が todos リストに追加され、newTodo の値が空の文字列にリセットされます。

    <input @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    string newTodo = "";

    void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

  4. To Do 項目を追加できるようになり、それらがリストに表示されることを確認します。 各 To Do 項目を追加した後、input 値をリセットする必要もあります。

チェック ボックスを追加し、不完全な To Do 項目をカウントする

To Do 項目を完了としてマークし、既存の To Do 項目を編集し、まだ実行されていない To Do 項目の数をカウントする方法が必要です。

  1. li 要素の内容を更新して、todo.IsDone にバインドされている checkbox という種類の input と、todo.Title にバインドされているテキスト input をレンダリングします。

    <ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

  2. <h3> ヘッダーを更新し、完了していない (IsDone が false の) Todo アイテムの数のカウントを表示するようにします。

    <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>

  3. アプリに変更を適用した後、項目を追加し、項目を編集し、To Do 項目を完了としてマークし、コンポーネントをテストしてみます。

    完成した Todo ページのスクリーンショット。

これで Blazor の To Do リストが完了 (✅) になりました。