いよいよ実践編です。業務アプリや便利なツールを作る上で欠かせない、「ユーザーからの入力（フォーム）」と「データの一覧表示（テーブル）」について見ていきましょう。
この2つをマスターすると、一気に「動くWebアプリ」を作っている実感が湧いてきます。
1. 入力フォーム（MudTextField と 双方向バインディング）
まずは、ユーザーに文字を入力してもらうテキストボックスを作ってみましょう。 MudBlazorでは MudTextField というコンポーネントを使います。
ここでBlazorの最も強力な機能の一つである「双方向バインディング（@bind-Value）」が登場します。これは、「画面の入力欄」と「C#の変数」を、まるで強力なゴムで結びつけたように完全に連動させる魔法の呪文です。
実際のコードを見てみましょう。
<MudTextField @bind-Value="UserName" Label="あなたのお名前" Variant="Variant.Outlined" />
<MudText Class="mt-4">
こんにちは、 @UserName さん！
</MudText>
@code {
// ユーザーの入力を受け取るための変数
private string UserName = "";
}
@bind-Value="UserName": ここがポイントです！ユーザーが画面のテキストボックスに「山田」と入力すると、自動的にC#のUserName変数の中身も「山田」に書き換わります。 * そして、その下の<MudText>で@UserNameを表示しているため、キーボードを叩くたびにリアルタイムで「こんにちは、山田さん！」と画面が更新されます。JavaScriptで入力値を取得する手間は一切ありません
2. データテーブル（MudTable）
次に、複数のデータを綺麗に表（テーブル）にして表示する方法です。 HTMLで <table> や <tr> を使ってループ処理を書くのは少し面倒ですが、MudTable を使えば、C#のリスト（配列）を渡すだけで簡単に高機能な表が作れます。
例として、「ユーザーのリスト」を表示する表を作ってみましょう。
<MudTable Items="@UserList" Hover="true" Striped="true">
<HeaderContent>
<MudTh>ID</MudTh>
<MudTh>名前</MudTh>
<MudTh>年齢</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="ID">@context.Id</MudTd>
<MudTd DataLabel="名前">@context.Name</MudTd>
<MudTd DataLabel="年齢">@context.Age 歳</MudTd>
</RowTemplate>
</MudTable>
@code {
// 1. ユーザーの設計図（クラス）を作る
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
// 2. 表示するためのデータ（リスト）を準備する
private List<User> UserList = new List<User>
{
new User { Id = 1, Name = "山田 太郎", Age = 28 },
new User { Id = 2, Name = "佐藤 花子", Age = 34 },
new User { Id = 3, Name = "鈴木 一郎", Age = 42 }
};
}
Items="@UserList": 表示したいC#のリストをここにセットします。context（コンテキスト）:RowTemplateの中で使える特別なキーワードです。リストの中の1件1件のデータ（ここではUserクラス）を指しています。@context.Nameと書けば、その行の人の名前が表示されます。Hover="true"やStriped="true"という属性を足すだけで、マウスを乗せたときに行が光ったり、しましま模様になったりするデザインが即座に適用されます。
ここまでで、「画面の枠組みを作る」「テーマを決める」「データを入力する」「データを表示する」という、MudBlazorを使った開発の基本サイクルをぐるっと一周しました
コメント