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

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此处列表所做的那样。我在此处添加了一个Add Users按钮和一个在单击时执行的方法AddValue()，该方法将向列表中添加一个新的空字符串。这将触发状态更改，Blazor 将自动重新执行 for 循环并添加额外的文本框。

• for循环为<input type="text">列表中的每一项添加一个for循环，当文本框的值发生变化并失去焦点时，@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上的工作情况。