More than 1 year has passed since last update.

2024: Microsoft のチュートリアルの Blazor Todo リストアプリを MudBlazor に変換

Posted at 2024-01-25

MudBlazor テンプレートのインストール

PowerShellで下記のコマンドを実行：

> dotnet new install MudBlazor.Templates
次のパッケージがインストールされます:
   MudBlazor.Templates

成功: MudBlazor.Templates::0.6.5により次のテンプレートがインストールされました。
テンプレート名     短い名前   言語  タグ
-----------------  ---------  ----  --------------------------------
Blazor Web アプリ  mudblazor  [C#]  Web/Blazor/WebAssembly/MudBlazor

>

テンプレートの MudBlazor プロジェクトの新規作成

Visual Studio 2022を開いて
プロジェクトの新規作成を押下
Fluent Blazorのウエブアプリテンプレートを選択
「次」を押下
プロジェクト名を入力
「次」を押下
「作成」を押下

デフォルトのアプリ

デフォルトのアプリは MudBlazor を使用しています。

Todo リストアプリを構築する

このアプリを、概要ページを備えた ToDo リストアプリに変換しましょう。

不要機能の削除

まず、「Counter（カウンター）」と「Weather（天気）」のページを削除しましょう。

ファイル削除

Components/Pages/Counter.razorとComponents/Pages/Weather.razorのファイルを選択
右クリックすると表示されるコンテキストメニューで Delete を選択

リンク処理

Components/Layout/NavMenu.razorファイルの中で：

1番目の「Home（ホーム）」のリンクの名前を「Todo リスト」に変更

1番目のリンクのアイコンをチェックされたチェックボックスに変更

<MudNavMenu>
    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Outlined.CheckBox">Todo リスト</MudNavLink>
    <MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
    <MudNavLink Href="weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Weather</MudNavLink>
</MudNavMenu>

2番目と3番目のリンクを削除

<MudNavMenu>
    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.CheckBox">Todo リスト</MudNavLink>
</MudNavMenu>

「About」ページへのリンクを追加する

<MudNavMenu>
    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Outlined.CheckBox">Todo リスト</MudNavLink>
    <MudNavLink Href="about" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Info">About</MudNavLink>    
</MudNavMenu>

Todo リスト追加

Components/Pages/Home.razorを開いて
相対 URL / とともに @page ディレクティブを追加。
そのまま静的にレンダリングされないように、ページの対話機能を有効にします。対話型サーバーレンダリングモードにすると、コンポーネントでサーバーからの UI イベントを処理できます。
ページに HTML 要素を追加することを可能にする PageTitle コンポーネントを使用してページタイトルを追加します。
```
@page "/"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}
```
プロジェクト（MudBlazorTodoList）フォルダーを右クリックすると表示されるコンテキストメニューで Add ＞ New Folder を選択
モデルクラスの保持に使用するため、新しいフォルダーを「Models」に名付け
Modelsフォルダーを右クリックすると表示されるコンテキストメニューで Add ＞ New Item を選択
Todo アイテムを表すクラスを保持するために、プロジェクト Modelsフォルダーに TodoItem.cs ファイルを追加

次の C# コードを挿入して TodoItem クラスを肉付け

namespace MudBlazorTodoList.Models
{
    public class TodoItem
    {
        public string? Title { get; set; }
        public DateTime? DueDate { get; set; }
        public bool IsDone { get; set; }
    }
}

Todo コンポーネントに戻り
@namespace でモデルの TodoItem クラスを使用可能にする
Todo アイテム用のフィールドを @code ブロックに追加（Todo コンポーネントでは、このフィールドを使って ToDo リストの状態を維持）
リストを表す縦のフレックスボックス列（div）を追加

Todo リスト（MudList）の中、各 Todo アイテム（MudListItem）を横のフレックスボックス（div）を含むカード（MudCard）としてレンダリングするために、 foreach ループを追加

@page "/"
@rendermode InteractiveServer
@namespace MudBlazorTodoList.Models

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<MudList>
    @foreach (var todo in todos)
    {
        <MudListItem>
            <MudCard Height="64px">
                <div style="display:flex;flex-direction:row;gap:4px;justify-content:start;align-items:center;">
                    <MudCheckBox @bind-Value="@todo.IsDone" Label="Is Done?" />
                    <MudTextField T="string" @bind-Value="@todo.Title" Label="Title" Placeholder="title" />
                    <MudDatePicker Label="Due" @bind-Value="@todo.DueDate" />
                 </div>
             </MudCard>
        </MudListItem>
    }
</MudList>

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

Todo リスト（MudList）を別の縦のフレックスボックス列（div）で囲み、その下のリストに新しい Todo 項目を追加する UI 要素を追加
追加 UI 要素をリストから視覚的に分離するため、 MudDivider を追加
追加 UI のコントロールを含む横のスタック（FluentStack）を追加
新しい Todo 項目のタイトル用にテキストボックス（MudTextField）を追加
新しい Todo 項目の期限用の日付ピッカー（MudDatePicker）を追加

追加アクションを実行するための「Add Todo」ボタン（MudButton）を追加

@page "/"
@rendermode InteractiveServer
@namespace FluentBlazorTodoList.Models

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<div style="display:flex;flex-direction:column;gap:24px;justify-content:center;align-items:start;">
    <MudList>
        @foreach (var todo in todos)
        {
            <MudListItem>
                <MudCard Height="64px">
                    <div style="display:flex;flex-direction:row;gap:4px;justify-content:start;align-items:center;">
                        <MudCheckBox @bind-Value="@todo.IsDone" Label="Is Done?" />
                        <MudTextField T="string" @bind-Value="@todo.Title" Label="Title" Placeholder="title" />
                        <MudDatePicker Label="Due" @bind-Value="@todo.DueDate" />
                    </div>
                </MudCard>
            </MudListItem>
        }
    </MudList>
    <MudDivider />
    <div style="display:flex;flex-direction:row;gap:4px;justify-content:start;align-items:center;">
        <MudTextField T="string" Label="New Todo" Placeholder="Something todo"></MudTextField>
        <MudDatePicker Label="Due" />
        <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Outlined.AddCircleOutline">Add todo</MudButton>
    </div>
</div>

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

現時点では、ボタンにイベント・ハンドラーがアタッチされていないため、「Add Todo」ボタン（MudButton）を押しても何も起こりません。
21. Todo アイテムの追加アクションを処理するには、@code ブロックに AddTodo メソッドを追加

@code {
    private List<Models.TodoItem> todos = new();
    private void AddTodo()
    {
        // // Todo: todo アイテムを追加
    }
}

22 . 次に、@onclick 属性を使用して、AddTodo メソッドを「Add Todo」ボタンのクリック・イベントハンドラーとして登録

<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Outlined.AddCircleOutline" OnClick="AddTodo">Add todo</MudButton>

23 . 新しい Todo アイテムのタイトルを取得するため、@code ブロックの先頭に newTodoTitle String フィールドを追加
24 . 新しい Todo アイテムの期限を取得するため、newTodoDueDate DateTime フィールドを @code ブロックの先頭に追加
25 . AddTodo メソッドを更新して、指定されたタイトルと期限を持つ TodoItem をリストに追加
26 . newTodoTitle を空の文字列に設定し、newTodoDueDate を null に設定して、テキストボックス（MudTextField）と日付ピッカー（MudDatePicker）の値をクリア

@code {
    string? newTodoTitle;
    DateTime? newTodoDueDate;
    private List<Models.TodoItem> todos = new();
    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodoTitle))
        {
            todos.Add(new TodoItem { Title = newTodoTitle, DueDate = newTodoDueDate });
            newTodoTitle = string.Empty;
            newTodoDueDate = null;
        }
    }
}

27 . @bind-Value 属性を使用して、newTodoTime をテキストボックス（MudTextField）要素にバインド
28 . @bind-Value 属性を使用して、newTodoDueDate を日付ピッカー（MudDatePicker）要素にバインド

<MudTextField T="string" Label="New Todo" Placeholder="Something todo" @bind-Value=newTodoTitle></MudTextField>
<MudDatePicker Label="Due" @bind-Value=newTodoDueDate />

29 . Todo リストの前にカウンター・バッジ（MudBadge）を追加して、完了していない Todo 項目の数を表示する (IsDone は false)。 Blazor がコンポーネントを再レンダリングするたびにその Razor 式が評価される

<MudBadge Content="@todos.Count(todo => !todo.IsDone)" Color="Color.Primary" Overlap="true" Class="mx-6 my-4">
    <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Secondary" />
</MudBadge>
<MudDivider />

残りの問題

日付ピッカー（MudDatePicker）のフィールドのアイコンが無効みたいで、クリックしてピッカーのポップアップが表示されませんので日付選択できません。

完成

```
@page "/"
@rendermode InteractiveServer
@namespace MudBlazorTodoList.Models

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<div style="display:flex;flex-direction:column;gap:24px;justify-content:center;align-items:start;">
    <MudBadge Content="@todos.Count(todo => !todo.IsDone)" Color="Color.Primary" Overlap="true" Class="mx-6 my-4">
        <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Secondary" />
    </MudBadge>
    <MudDivider />
    <MudList>
        @foreach (var todo in todos)
        {
            <MudListItem>
                <MudCard Height="64px">
                    <div style="display:flex;flex-direction:row;gap:4px;justify-content:start;align-items:center;">
                        <MudCheckBox @bind-Value="@todo.IsDone" Label="Is Done?" />
                        <MudTextField T="string" @bind-Value="@todo.Title" Label="Title" Placeholder="title />
                        <MudDatePicker Label="Due" @bind-Value="@todo.DueDate" />
                        </div>
                </MudCard>
            </MudListItem>
        }
    </MudList>
    <MudDivider />
    <div style="display:flex;flex-direction:row;gap:4px;justify-content:start;align-items:center;">
        <MudTextField T="string" Label="New Todo" Placeholder="Something todo" @bind-Value=newTodoTitle></MudTextField>
        <MudDatePicker Label="Due" @bind-Value=newTodoDueDate />
        <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Outlined.AddCircleOutline" OnClick="AddTodo">Add todo</MudButton>
    </div>
</div>

@code {
    string? newTodoTitle;
    DateTime? newTodoDueDate;
    private List<Models.TodoItem> todos = new();
    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodoTitle))
        {
            todos.Add(new TodoItem { Title = newTodoTitle, DueDate = newTodoDueDate });
            newTodoTitle = string.Empty;
            newTodoDueDate = null;
        }
    }
}
```

About ページ追加

Components/Pagesフォルダーを右クリックすると表示されるコンテキストメニューで Add ＞ New Component を選択
「About.razor」を名付けて
「追加」を押下
Components/Pages/About.razorを開いて

次のコードを挿入して「About」のページを実装してください

@page "/about"
@rendermode InteractiveServer

<PageTitle>About</PageTitle>

<MudPaper>
    <h3>About</h3>

    <MudBadge Color="Color.Success" Overlap="true" Bordered="true">
        <MudAvatar>
            <MudImage Src="https://avatars.githubusercontent.com/u/3477572?v=4" Alt="Meister 619" />
        </MudAvatar>
    </MudBadge>
    <MudText Typo="Typo.h6">Meister 619</MudText>

    <MudText Typo="Typo.body1"> ... blah blah blah ...</MudText>

</MudPaper>
@code {

}

完成

参考

MicrosoftのLearn/.NET/ASP.NET Core/Blazor Todo リストアプリのチュートリアル
MudBlazor コンポネントライブラリー
MudBlazor の GitHub レポジトリー

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

2024: Microsoft のチュートリアルの Blazor Todo リスト アプリを MudBlazor に変換