如何在Blazor服务器中动态添加、删除输入文本框并获取值

Question

我有Blazor服务器应用程序，我如何在点击按钮时动态添加新的输入文本框并删除它，并在点击提交按钮时获得所有输入文本框的值，以便将它们保存在数据库中。

@for (int i = count; i >= 1; i--)
{
<div class="row">
<input type="text" @bind-value="@text_val" /> <p>@i</p><p>@count</p>
</div>
}
<div class="row">
<button @onclick=@(() => Increment())>Add User</button>
</div>
@code {
public string text_val;
public int count = 1;
public void Increment()
{
count = count + 1;
}
}

任何帮助都会很棒。谢谢

Answer 1

• 初始化一个值列表，就像我在这里对values列表所做的那样。我在这里添加了一个AddUsers按钮，以及一个要在单击时执行的方法AddValue()，它将向列表中添加一个新的空字符串。这将触发状态更改，Blazor将自动重新执行for循环并添加一个额外的文本框。

• for循环为列表中的每个项目添加一个<input type="text">，当文本框的值更改并失去焦点时，@onchange事件将使用UpdateValue()方法更新列表中的相应值。如果希望该值在每次更改时更新文本框而不丢失焦点，请改用@oninput。

• 我还添加了一个Remove按钮和一个RemoveValue()方法来删除文本框和值。

• 您可以使用任何方法访问values列表的值。单击Submit按钮时，将调用HandleSubmit()，您可以访问并验证那里的列表/文本框值。

如果使用像i这样的循环变量，该变量在lambda表达式的每次迭代中都会发生变化，请确保首先将其复制到局部变量中。否则，由于lambda表达式将捕获变量i，并且当lambda稍后执行时，将使用i的最新值，该值在循环结束后将等于列表的长度我通过首先将i复制到此处的局部变量index来完成此操作。

<div class="container border">
<h3>Users</h3>
<hr />
<button @onclick="AddValue" class="btn btn-primary">Add User</button>
@for (int i = 0; i < values.Count; i++)
{
int index = i;
<div>
<input type="text" @onchange="(e) => UpdateValue(index, e.Value.ToString())" value="@values[i]" />
<button @onclick="() => RemoveValue(index)" class="btn btn-outline-danger">Remove</button>
</div>
}
<hr />
<div>
<button @onclick="HandleSubmit" class="btn btn-success">Submit</button>
</div>
<hr />
@for (int j = 0; j < values.Count; j++)
{
<p>@values[j]</p>
}
</div>
@code {
private List<string> values = new List<string>();
private void AddValue() => values.Add("");
private void UpdateValue(int i, string value) => values[i] = value;
private void RemoveValue(int i) => values.RemoveAt(i);
private void HandleSubmit()
{
//Access and validate the values list here
}
}

看看它在BlazorFiddle上的工作。