 始め方ASP.NET and web development（ASP.NETとWeb開発）をインストールする
Blazor Web Appを選択してプロジェクトを作成
プロジェクト作成時の設定
認証の種類: なし
対話型レンダリング モード: サーバー
インタラクティビティの場所: ページ/コンポーネントごと


 Blazorの構成Program.cs は、サーバーを起動するアプリのエントリ ポイントであり、アプリ サービスとミドルウェアを構成する場所です。
Components ディレクトリ内:
App.razor は、アプリ向けルート コンポーネントです。
Routes.razor は、Blazor ルーターを構成します。

Pages ディレクトリには、アプリ向けのサンプル Web ページが含まれています。

BlazorApp.csproj は、アプリ プロジェクトとその依存関係を定義するもので、ソリューション エクスプローラーで BlazorApp プロジェクト ノードをダブルクリックすると表示されます。
Properties 内の launchSettings.json は、ローカル開発環境のさまざまなプロファイル設定を定義します。ポート番号は、プロジェクトの作成時に自動的に割り当てられ、このファイルに保存されます。

 まとめProgram.cs でアプリの基本的な設定を行い、App.razor でアプリのルートを定義し、Pages ディレクトリ内で個々のページコンポーネントを作成し、ルーティングや表示内容を制御します。

目標

コンポーネントからのイベントを処理し、双方向のデータバインディングを設定する方法について説明します。
To Do リストページを作成します。

式の値をレンダリングする

Razor で C# 式の値をレンダリングする場合、先頭に @ 文字を使用します。たとえば、次のように Counter コンポーネントは currentCount フィールドの値をレンダリングできます。

<p role="status">Current count: @currentCount</p>

式の開始と終了を明示的にするには ( ) を使う

<p role="status">Current count: @(currentCount)</p>

制御フローを追加する

通常の C# ステートメントを使用して、コンポーネントレンダリングロジックに制御フローを追加できます。たとえば、次のように C# の if ステートメントを使用して、一部のコンテンツを条件付きでレンダリングできます。

@if (currentCount > 3)
{
    <p>You win!</p>
}

また、C# を使用して、データをループし、項目の一覧をレンダリングすることもできます。

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

イベントを処理する

UI 要素からイベントのイベントコールバックを指定するには、@on で始まり、イベント名で終わる属性を使用します。たとえば、次のように @onclick 属性を使用して、ボタンクリックイベント用のハンドラーとして IncrementCount メソッドを指定できます。

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@onchange や @oninput など、その他の HTML イベント用の C# イベントハンドラーを指定することもできます。イベント処理メソッドは、同期または非同期にすることができます。また、C# ラムダ式を使用して、イベントハンドラーをインラインで定義することもできます。

<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>

イベントハンドラーメソッドは、必要に応じて、イベントに関する情報を含むイベント引数を受け取ることができます。たとえば、次のように変更された入力要素の値にアクセスできます。

<input @onchange="InputChanged" />
<p>@message</p>

@code {
    string message = "";

    void InputChanged(ChangeEventArgs e)
    {
        message = (string)e.Value;
    }
}

データバインディング

@bind 属性を使用して、コード内の特定の値に UI 要素をバインドします。

<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>

@code {
    string text = "";
}

Razor ディレクティブ

Razor ディレクティブは、Razor 構文の予約キーワードであり、Razor ファイルのコンパイル方法に影響を与えます。 Razor ディレクティブは常に文字 @ で始まります。 @page や @code など、一部の Razor ディレクティブは新しい行の先頭で使用され、@bind などの他のディレクティブは属性として要素に適用できます。

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

<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 クラスもレンダリングされます。

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

.csでタスクアイテムのデータ構造を定義

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

.razorにタスクリストを定義

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

リストを表示

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

To Do アイテムを追加する

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

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

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

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

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

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

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

おまけ

タスクの状態を追加

<select @bind="todo.Status">
    @foreach(var status in Enum.GetValues(typeof(Status)))
    {
        <option value="@status">@status</option>
    }
</select>

始め方

Blazorの構成

まとめ