Skip to content

Instantly share code, notes, and snippets.

@jsakamoto
Created Dec 18, 2019
Embed
What would you like to do?
Blazor で、行が動的に増減する入力フォームを実装してみる
<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}");
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment