c# - 如何在 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 所做的那样初始化值列表在这里列出。我在这里添加了一个 Add Users 按钮和一个点击执行的方法 AddValue()它将一个新的空字符串添加到列表中。这将触发状态更改，Blazor 将自动重新执行 for 循环并添加一个额外的文本框。

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

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

• 您可以访问 values 的值以任何方法列出。单击提交 按钮时，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 上的工作.