Blazor/WPF：通过点击按钮为表单添加输入框和选择框

核心思路是用集合管理每一组输入项的状态，点击按钮时向集合中添加新条目，再通过循环渲染集合中的每一项，自动生成对应的表单元素。

1. 定义数据模型 #

先创建一个类来存储单条数据的输入值和选中的分类：

public class FormItem
{
    public string InputValue { get; set; } = string.Empty;
    public string SelectedCategory { get; set; } = string.Empty;
}

2. 组件逻辑实现 #

在Blazor组件中声明集合管理动态条目，并编写添加方法：

@code {
    // 存储所有动态表单条目
    private List<FormItem> formItems = new List<FormItem>();

    // 初始化时默认添加第一条
    protected override void OnInitialized()
    {
        formItems.Add(new FormItem());
    }

    // 点击按钮添加新条目
    private void AddNewItem()
    {
        formItems.Add(new FormItem());
    }

    // 可选：统一处理输入事件（对应原代码中的OnInputEvent1）
    private void OnInputEvent(ChangeEventArgs e, int index)
    {
        formItems[index].InputValue = e.Value?.ToString() ?? string.Empty;
        // 这里可以添加自定义逻辑，比如实时验证、格式处理等
    }
}

3. 渲染动态表单 #

在组件的HTML部分循环渲染集合中的每一项，动态生成唯一的id和name：

@foreach (var (item, index) in formItems.Select((item, i) => (item, i)))
{
    <div class="form-row">
        <input type="text" 
               id="id_item@(index + 1)" 
               name="item@(index + 1)" 
               @bind="@item.InputValue" 
               @oninput="@((e) => OnInputEvent(e, index))" 
               placeholder="输入内容">
        <br>
        <select name="categories@(index + 1)" 
                id="cat@(index + 1)" 
                size="1"
                @bind="@item.SelectedCategory">
            <option value="" disabled> - 选择分类 - </option>
            <option value="Fruits & vegetables">Fruits & vegetables</option>
            <option value="Baked goods">Baked goods</option>
            <option value="Meat & fish">Meat & fish</option>
            <option value="Dry foods">Dry foods</option>
            <option value="Dairy products">Dairy products</option>
            <option value="Candy & snacks">Candy & snacks</option>
            <option value="Beverages">Beverages</option>
            <option value="Other">Other</option>
        </select>
        <hr>
    </div>
}

<button @onclick="AddNewItem">添加新条目</button>

关键说明 #

• 动态生成的id和name通过@(index + 1)保证唯一性，避免DOM元素冲突
• 使用@bind自动绑定数据到FormItem对象，无需维护多个独立的变量（比如原代码中的inputValue1）
• 如果需要提交表单，后端可以直接接收List<FormItem>类型的参数来获取所有条目数据

内容的提问来源于stack exchange，提问作者Ole M