2024: Microsoft のチュートリアルの Blazor Todo リストアプリを Radzen に変換 #ASP.NET_Core

Radzen の Blazor テンプレート

FluentUI や MudBlazor UI コンポーネントフレームワークとは異なり、Radzen フレームワークは Visual Studio 用のテンプレート拡張機能を提供しません。手動でインストールする必要があります。

Radzen プロジェクトの新規作成

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

デフォルトのアプリ

デフォルトのアプリはまだ Radzen を使用していせん！

Radzen フレームワークをインストール

ソリューションを右クリック
右クリックすると表示されるコンテキストメニューで Manage NuGet Packages for Solution... を選択
NuGet - Solution ペインの Browse タブを選択
検索ボックスで radzen を入力
左側にあるパッケージ一覧で Radzen.Blazor を選択
左側に表示されるパッケージ詳細で「プロジェクト」のチェックボックスを選択
現れた「インストール」ボタンを押下
表示された変更プレビューのダイアログの「適用」ボタンを押下
表示された来仙背への同意の「同意する」ボタンを押下
Blazor アプリケーションのComponents\_Imports.razorファイルに次の２行を追加：
```
@using Radzen
@using Radzen.Blazor
```

Blazor アプリケーションのComponents\App.razorファイルに次のどっちかのスニペットを追加してテーマ CSS ファイルを作成：

 // マテリアルテーマの場合
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
// 標準テーマの場合
<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">

ブートストラップ CSS も用意されていることを確認

 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">

Blazor アプリケーションのComponents\App.razorファイルに次のスニペットを追加してRadzen.Blazor.jsをインクルード
```
<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
```
Dialog、Notification、ContextMenu、Tooltip コンポーネントを使用したい場合はBlazor アプリケーションの各ページの上のほうに次のスニペットを追加して：
```
 <RadzenComponents/>
```
Radzen サービスを開始するためにBlazor アプリケーションのProgram.csファイルに次のスニペットを追加して：
```
 builder.Services.AddRadzenComponents();
```

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

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

不要機能の削除

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

ファイル削除

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

リンク処理

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

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

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

<RadzenStack Orientation="Orientation.Vertical" Gap="4px"  class="rz-p-4">
    <RadzenSidebarToggle Style="max-width: 3.6rem;"/>
    <RadzenPanelMenu DisplayStyle="MenuItemDisplayStyle.IconAndText" ShowArrow="false">
        <RadzenPanelMenuItem Text="Todo リスト" Path="/" Icon="check_box" />
        <RadzenPanelMenuItem Text="About" Path="/about" Icon="info_outline" />
    </RadzenPanelMenu>
</RadzenStack>

Todo リスト追加

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

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

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

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

namespace RadzenBlazorTodoList.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 リストの状態を維持）
リストを表す縦のフレックスボックス列（RadzenStack）を追加

Todo リスト（RadzenDataList）の中、各 Todo アイテム（Template）を横のフレックスボックス（RadzenStack）を含むカード（RadzenCard ）としてレンダリング

@page "/"
@rendermode InteractiveServer
@namespace RadzenBlazorTodoList.Models
<RadzenComponents/>
<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" >
    <RadzenDataList WrapItems="true" AllowPaging="true" 
                    Data="@todos" TItem="TodoItem" PageSize="5" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
        <Template Context="todo">
            <RadzenCard Style="height:64px;">
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                    <RadzenCheckBox @bind-Value="@(todo.IsDone)" Name="CheckBox1" />
                    <RadzenLabel Text="Is Done?" Component="CheckBox1" />
                    <RadzenLabel Text="Title" Component="TextBox1" />
                    <RadzenTextBox Name="TextBox1" @bind-Value="@(todo.Title)" Placeholder="title" />
                    <RadzenLabel Text="Due" Component="DatePicker1" />
                    <RadzenDatePicker Name="DatePicker1" @bind-Value="@(todo.DueDate)" />
                </RadzenStack>
            </RadzenCard>
        </Template>
    </RadzenDataList>
</RadzenStack>

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

Todo リスト（RadzenDataList）の縦のフレックスボックス列（RadzenStack）の下に、新しい Todo 項目を追加する UI 要素を追加
追加 UI のコントロールを含む横のスタック（RadzenStack）を追加
新しい Todo 項目のタイトル用にテキストボックス（RadzenTextBox）を追加
新しい Todo 項目の期限用の日付ピッカー（RadzenDatePicker）を追加

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

@page "/"
@rendermode InteractiveServer
@namespace RadzenBlazorTodoList.Models
<RadzenComponents/>

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" >
    <RadzenDataList WrapItems="true" AllowPaging="true" 
                    Data="@todos" TItem="TodoItem" PageSize="5" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
        <Template Context="todo">
            <RadzenCard Style="height:64px;">
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                    <RadzenCheckBox @bind-Value="@(todo.IsDone)" Name="CheckBox1" />
                    <RadzenLabel Text="Is Done?" Component="CheckBox1" />
                    <RadzenLabel Text="Title" Component="TextBox1" />
                    <RadzenTextBox Name="TextBox1" @bind-Value="@(todo.Title)" Placeholder="title" />
                    <RadzenLabel Text="Due" Component="DatePicker1" />
                    <RadzenDatePicker Name="DatePicker1" @bind-Value="@(todo.DueDate)" />
                </RadzenStack>
            </RadzenCard>
        </Template>
    </RadzenDataList>
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
        <RadzenLabel Text="New Todo" Component="TextBox2" />
        <RadzenTextBox Name="TextBox2" Placeholder="Something todo" />
        <RadzenLabel Text="Due" Component="DatePicker2" />
        <RadzenDatePicker Name="DatePicker2" TValue="DateOnly" />
         <RadzenButton Variant="Variant.Filled" Icon="add_circle_outline" Text="Add todo" ButtonStyle="ButtonStyle.Primary" />
   </RadzenStack>
</RadzenStack>

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

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

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

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

<RadzenButton Variant="Variant.Filled" Icon="add_circle_outline" Text="Add todo" ButtonStyle="ButtonStyle.Primary" C/>

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

@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;
        }
    }
}

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

    <RadzenLabel Text="New Todo" Component="TextBox2" />
    <RadzenTextBox Name="TextBox2" Placeholder="Something todo" @bind-Value=newTodoTitle />
    <RadzenLabel Text="Due" Component="DatePicker2" />
    <RadzenDatePicker Name="DatePicker2" @bind-Value=newTodoDueDate />

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

<RadzenBadge BadgeStyle="BadgeStyle.Warning" Shade="Shade.Lighter" IsPill="@true"  class="rz-ml-2" >
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Normal">
        <RadzenIcon Icon="email" />
        <RadzenText TextStyle="TextStyle.Body1" >@(todos.Count(todo => !todo.IsDone).ToString())</RadzenText>
    </RadzenStack>
</RadzenBadge>

完成

```
@page "/"
@rendermode InteractiveServer
@namespace RadzenBlazorTodoList.Models
<RadzenComponents/>

<PageTitle>Todo</PageTitle>

<RadzenText TextStyle="TextStyle.H3">Todo</RadzenText>

<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" >
    <RadzenBadge BadgeStyle="BadgeStyle.Warning" Shade="Shade.Lighter" IsPill="@true"  class="rz-ml-2" >
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Normal">
            <RadzenIcon Icon="email" />
            <RadzenText TextStyle="TextStyle.Body1" >@(todos.Count(todo => !todo.IsDone).ToString())</RadzenText>
        </RadzenStack>
    </RadzenBadge>
    <RadzenDataList WrapItems="true" AllowPaging="true" 
                    Data="@todos" TItem="TodoItem" PageSize="5" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
        <Template Context="todo">
            <RadzenCard Style="height:64px;">
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                    <RadzenCheckBox @bind-Value="@(todo.IsDone)" Name="CheckBox1" />
                    <RadzenLabel Text="Is Done?" Component="CheckBox1" />
                    <RadzenLabel Text="Title" Component="TextBox1" />
                    <RadzenTextBox Name="TextBox1" @bind-Value="@(todo.Title)" Placeholder="title" />
                    <RadzenLabel Text="Due" Component="DatePicker1" />
                    <RadzenDatePicker Name="DatePicker1" @bind-Value="@(todo.DueDate)" />
                </RadzenStack>
            </RadzenCard>
        </Template>
    </RadzenDataList>
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
        <RadzenLabel Text="New Todo" Component="TextBox2" />
        <RadzenTextBox Name="TextBox2" Placeholder="Something todo" @bind-Value=newTodoTitle />
        <RadzenLabel Text="Due" Component="DatePicker2" />
        <RadzenDatePicker Name="DatePicker2" @bind-Value=newTodoDueDate />
        <RadzenButton Variant="Variant.Filled" Icon="add_circle_outline" Text="Add todo" ButtonStyle="ButtonStyle.Primary" Click="AddTodo"/>
    </RadzenStack>
</RadzenStack>

@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
<RadzenComponents/>

<PageTitle>About</PageTitle>
    
<RadzenCard>
    <RadzenText TextStyle="TextStyle.H3">About</RadzenText>

    <RadzenBadge BadgeStyle="BadgeStyle.Success" Shade="Shade.Lighter" IsPill="@true" >
        <RadzenImage Path="https://avatars.githubusercontent.com/u/3477572?v=4" AlternateText="Meister 619" Style="width: 64px; height: 64px; border-radius: 50%;" />
    </RadzenBadge>
    <RadzenText TextStyle="TextStyle.H6">Meister 619</RadzenText>

    <RadzenText TextStyle="TextStyle.Body1"> .. blah blah blah ...</RadzenText>

</RadzenCard>
@code {
    
}

完成

参考

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

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