（1）Blazor を使用した Web 開発の概要

概要理解

https://learn.microsoft.com/ja-jp/training/paths/build-web-apps-with-blazor/

（2）Blazor を使って初めての Web アプリを構築する

razorコンポーネントの理解

（3）Blazor を使用して To Do リストを作成する

• キーワード：データバインディング，Razorディレクティブ，インタラクティビティの有効化（対話型サーバレンダリング）

• 実際に動作を確認

（4）Blazor Web アプリでデータを操作する

【目的】

• Blazorコンポーネントを作成して，Webアプリのユーザーインターフェースをアセンブルする
• Webアプリに表示するデータにアクセスする
• Webアプリで，複数のBlazorコンポーネント間でデータを共有する
• Blazorコンポーネントの変数にHTML要素を反映する

Blazor コンポーネントを使用してユーザー インターフェイスを作成する

Blazorコンポーネントからデータにアクセスする

Blazor アプリケーションでデータを共有する

3つの方法

1. コンポーネントパラメータを使用
2. カスケード型パラメータを使用
   →任意の深さの全ての子孫コンポーネントから自動的に使用できる
3. AppStateを使用して情報を共有
   →全てのコンポーネントから使用できる

https://learn.microsoft.com/ja-jp/training/modules/interact-with-data-blazor-web-apps/7-exercise-share-data-in-blazor-applications

Blazor アプリケーションでデータにコントロールをバインドする

データバインディングとは

• HTML 要素をフィールド、プロパティ、または式に接続
  →値が変更されたときに、HTML 要素が自動的に更新
• コントロールをバインドするには@bind ディレクティブを使う

https://learn.microsoft.com/ja-jp/training/modules/interact-with-data-blazor-web-apps/9-exercise-bind-controls-data-blazor-applications?source=learn

（5）ページ、ルーティング、レイアウトを使用して Blazor のナビゲーションを改善する

【目的】

• ルーターコンポーネントと NavLink を使用して Blazor アプリのナビゲーションを改善
• ルートパラメーターを使用して機能を強化
• Blazorアプリでレイアウトを使用して重複するコードを削減

Blazor ルーター コンポーネントを使用してアプリのナビゲーションを制御する

• BlazorではRouterコンポーネントという特殊なコンポーネントによって要求をルーティングする

ルート パラメーターが Blazor アプリのルーティングにどのような影響を及ぼすかを確認する

レイアウトを使用して再利用できるBlazorコンポーネントを作成する

Blazorレイアウトとは

• 共通のUI要素を合理化し，再利用する
• レンダリングされたマークアップを，それを参照する全てのコンポーネントと共有するもの

Blazorレイアウトのコードを書く

@inherits LayoutComponentBase

<header>
    <h1>Blazing Pizza</h1>
</header>

<nav>
    <a href="Pizzas">Browse Pizzas</a>
    <a href="Toppings">Browse Extra Toppings</a>
    <a href="FavoritePizzas">Tell us your favorite</a>
    <a href="Orders">Track Your Order</a>
</nav>

@Body

<footer>
    @new MarkdownString(TrademarkMessage)
</footer>

@code {
    public string TrademarkMessage { get; set; } = "All content is &copy; Blazing Pizzas 2021";
}

https://learn.microsoft.com/ja-jp/training/modules/use-pages-routing-layouts-control-blazor-navigation/7-exercise-add-blazor-layouts-reduce-duplicate-code

（6）Blazor Web アプリでのフォームと検証の動作の向上

【目的】

• Blazor イベント ハンドラーを使用して、アプリの対話機能を改善する。
• Blazor フォームを使用してデータ入力を有効にする。
• サーバーとクライアント側の検証で Blazor フォームを拡張する。

Blazor イベント ハンドラーを使用して、C# コードを DOM イベントにアタッチする

Blazor フォームの機能を活用する

EditFormとは

→Blazorページ上のHTMLフォームのロールを満たすBlazorコンポーネント
【EditFormとHTMLフォームの違い（引用）】

• データ バインディング:オブジェクトを EditForm に関連付けることができます。 EditForm は、データの入力と表示を目的としたオブジェクトのビューのように機能します。
• 検証:EditForm では、広範で拡張可能な検証機能が用意されています。 検証規則を指定する属性を EditForm の要素に追加できます。 EditForm では、これらの規則が自動的に適用されます。 この機能については、このモジュールの後半で説明します。
• フォームの送信:HTML フォームでは、送信時にフォーム ハンドラーに POST 要求を送信します。 このフォーム ハンドラーでは、送信プロセスを実行して、結果を表示できます。 EditFormは Blazor イベントモデルに従います。OnSubmit イベントをキャプチャする C# イベント ハンドラーを指定します。 イベント ハンドラーでは、送信ロジックを実行します。
• 入力要素:HTML フォームでは、<input> コントロールを使用してユーザー入力を収集し、submit ボタンを使用して、処理用にフォームをポストします。 EditForm では、これらの同じ要素を使用できますが、Blazor には、組み込みの検証やデータ バインディングなどの他の機能を備えた入力コンポーネントのライブラリが用意されています。