Blazor で、行が動的に増減する入力フォームを実装してみる

App.razor

<div>
    @foreach (var person in this.People)
    {
        <div @key="person.Id">
            <input type="text" placeholder="名前" @bind="person.Name" />
            <input type="number" placeholder="年齢" @bind="person.Age" />
            <button @onclick="()=>OnClickRemove(person)">削除</button>
        </div>
    }
</div>

<div>
    <button @onclick="OnClickAddPerson">人物を追加</button>
    <button @onclick="OnClickDump">開発者コンソールに表示</button>
</div>

@code
{
    // このデモのために用意した、"人物クラス"
    private class Person
    {
        public Guid Id; // 固有の ID
        public string Name; // 名前
        public int Age; // 年齢
    }

    // 人物 x n人のリスト
    private List<Person> People = new List<Person>();

    // [人物を追加] ボタンが押されときに呼び出されます。
    private void OnClickAddPerson()
    {
        this.People.Add(new Person { Id = Guid.NewGuid() });
    }

    // [削除] ボタンが押されときに呼び出されます。
    private void OnClickRemove(Person person)
    {
        this.People.Remove(person);
    }

    // [開発者コンソールに表示] ボタンが押されたときに呼び出されます。
    private void OnClickDump()
    {
        foreach (var person in this.People)
        {
            Console.WriteLine($"{person.Id} | {person.Name} | {person.Age}");
        }
    }
}