如何在 Blazor Server 中动态添加、删除输入文本框并获取值？答案

【问题标题】：How To Dynamically Add, Remove Input Textbox And Get Values In Blazor Server?如何在 Blazor Server 中动态添加、删除输入文本框并获取值？
【发布时间】：2021-05-22 17:22:36
【问题描述】：

我有 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;
        }

}

任何帮助都会很棒。谢谢

【问题讨论】：

到目前为止你尝试了什么？，发布相同的代码，以便我们为您提供帮助
您知道在编译时要显示/隐藏的文本框吗？

标签： c# asp.net-core blazor

【解决方案1】：

初始化一个值列表，就像我在此处使用 values 列表所做的那样。我在此处添加了一个 Add Users 按钮和一个在单击时执行的名为 AddValue() 的方法，它将一个新的空字符串添加到列表中。这将触发状态更改，Blazor 将自动重新执行 for 循环并添加一个额外的文本框。
for 循环为列表中的每个项目添加一个<input type="text">，当文本框的值发生变化并失去焦点时，@onchange 事件将使用UpdateValue() 方法更新列表中的相应值。如果您希望值在每次更改时更新文本框而不失去焦点，请改用@oninput。
我还添加了一个 Remove 按钮和一个 RemoveValue() 方法来删除文本框和值。
您可以通过任何方法访问values 列表的值。当点击 Submit 按钮时，HandleSubmit() 将被调用，您可以在那里访问和验证列表/文本框的值。

如果您使用像 i 这样的循环变量，它在 lambda 表达式的每次迭代中都会发生变化，请确保首先将其复制到局部变量。否则，由于 lambda 表达式将 capture 变量 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 上的工作。

【讨论】：