[ASP.NET Blazor Server][MudBlazor]　MudBlazorの使い方9

これまで学んできた「入力（TextField）」「一覧表示（Table）」「通知（Snackbar）」、そして「ボタンやアイコン」の知識をすべて繋ぎ合わせて、動くToDoリストアプリ（1画面完結）のコードを作成しました。

このコードをコピーして、Blazorプロジェクトの新しいページ（例えば Todo.razor）に貼り付けるだけで、立派なアプリとして動作します。コードを読みながら、各部品がどう連携しているか確認してみてください。

MudBlazorで作る「ToDoリスト」完全版コード

@page "/todo"
@inject ISnackbar Snackbar

<MudContainer MaxWidth="MaxWidth.Sm" Class="mt-10">
    
    <MudText Typo="Typo.h4" GutterBottom="true"> 毎日のToDoリスト</MudText>

    <MudGrid Class="mb-4">
        <MudItem xs="9">
            <MudTextField @bind-Value="newTaskTitle" Label="新しいタスクを入力" Variant="Variant.Outlined" Margin="Margin.Dense" />
        </MudItem>
        <MudItem xs="3" Class="d-flex align-center">
            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="AddTask" FullWidth="true">追加</MudButton>
        </MudItem>
    </MudGrid>

    <MudTable Items="@todoList" Hover="true" Elevation="2">
        <HeaderContent>
            <MudTh>完了</MudTh>
            <MudTh>タスク名</MudTh>
            <MudTh>操作</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="完了">
                <MudCheckBox @bind-Value="context.IsDone" Color="Color.Success" />
            </MudTd>
            
            <MudTd DataLabel="タスク名">
                <MudText Style="@(context.IsDone ? "text-decoration: line-through; color: gray;" : "")">
                    @context.Title
                </MudText>
            </MudTd>
            
            <MudTd DataLabel="操作">
                <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="@(() => DeleteTask(context))" />
            </MudTd>
        </RowTemplate>
        
        <NoRecordsContent>
            <MudText>現在、タスクはありません。</MudText>
        </NoRecordsContent>
    </MudTable>

</MudContainer>

@code {
    //  1. データの設計図（Todoアイテム）
    public class TodoItem
    {
        public string Title { get; set; } = "";
        public bool IsDone { get; set; } = false; // チェックボックスと連動
    }

    //  2. 状態を記憶する変数たち
    private string newTaskTitle = ""; // 入力欄の文字
    private List<TodoItem> todoList = new(); // タスクのリスト

    //  3. タスクを追加する処理
    private void AddTask()
    {
        // 空っぽのまま追加されないようにチェック
        if (string.IsNullOrWhiteSpace(newTaskTitle))
        {
            Snackbar.Add("タスク名を入力してください", Severity.Warning);
            return;
        }

        // リストに新しいタスクを追加
        todoList.Add(new TodoItem { Title = newTaskTitle });
        
        // 入力欄を空に戻す（画面も自動で空になる）
        newTaskTitle = ""; 
        
        // 成功の通知を出す
        Snackbar.Add("タスクを追加しました！", Severity.Success);
    }

    //  4. タスクを削除する処理
    private void DeleteTask(TodoItem item)
    {
        todoList.Remove(item);
        Snackbar.Add($"「{item.Title}」を削除しました", Severity.Info);
    }
}

このコードの注目ポイント

• コンポーネントの連携: @bind-Value を使って MudTextField の文字を C# の newTaskTitle に送り、ボタンを押したら todoList に追加。そしてその todoList が MudTable に表示される、というデータの綺麗な一方通行（フロー）ができています。
• 動的なデザイン変更: <MudText Style="..."> の部分に注目してください。C# の context.IsDone（チェックがついているか）を判定して、TrueならCSSで取り消し線を引く、という処理を1行で書いています。JavaScriptでDOMを操作する面倒くささがありません。
• ユーザーへのフィードバック: エラーの時は黄色の警告（Warning）、成功の時は緑色（Success）、削除したときは青色（Info）と、Snackbar を使い分けて直感的な操作感を作っています。

ここまでのステップで、MudBlazorの「基礎概念」から「実際のアプリ構築」までを体系的に網羅することができました。

このコードをご自身の環境で動かしてみて、例えば「色を自分の好きな色に変えてみる」「タスクを全部消す『全クリアボタン』を追加してみる」といった改造をしてみると、さらに理解が深まると思います。