MudBlazor实现：点击MudButton为Div2添加含MudSelect的新行

1. 定义数据模型 #

先创建一个类来存储每一行的选择项和对应输入值，方便后续双向绑定：

public class ItemEntry
{
    // 存储选中的选项值，若选项是自定义对象可改为对应类型
    public string SelectedOption { get; set; }
    // 存储对应输入框的值
    public string InputValue { get; set; }
}

2. 组件内声明数据集合 #

在你的Razor组件中，用列表来管理所有行的数据，初始化至少一个空项：

@code {
    // 存储所有行的输入与选择数据
    private List<ItemEntry> _entries = new List<ItemEntry> { new ItemEntry() };
    // 自定义MudSelect的选项列表，可根据业务调整
    private List<string> _selectOptions = new List<string> { "选项A", "选项B", "选项C" };
}

3. 动态渲染Div1和Div2 #

通过foreach循环遍历数据集合，自动渲染对应的MudTextField和MudSelect，绑定到集合中每个项的属性：

<div class="main-div">
    <div id="Div1">
        @foreach (var entry in _entries)
        {
            <MudTextField @bind-Value="entry.InputValue" Label="输入对应值" Margin="Margin.Dense" />
        }
    </div>

    <div id="Div2">
        @foreach (var entry in _entries)
        {
            <MudSelect @bind-Value="entry.SelectedOption" Label="选择项" Margin="Margin.Dense">
                @foreach (var option in _selectOptions)
                {
                    <MudSelectItem Value="option">@option</MudSelectItem>
                }
            </MudSelect>
        }
    </div>

    <MudButton OnClick="AddNewRow" Variant="Variant.Filled" Color="Color.Primary" Style="margin-top:16px;">Add Div</MudButton>
</div>

4. 实现添加行逻辑 #

在@code块中编写添加新行的方法，只需往数据集合中添加新的空对象，Blazor会自动触发UI重新渲染：

private void AddNewRow()
{
    _entries.Add(new ItemEntry());
}

补充说明 #

• 若你的选择项是自定义对象（如带ID和名称的实体类），只需将SelectedOption的类型改为对应类，同时给MudSelect指定TItem泛型参数，确保绑定正常工作。
• 可使用MudBlazor的布局组件（如MudGrid、MudStack）优化Div1和Div2的排版，让每行的输入框与选择框对齐。

内容的提问来源于stack exchange，提问作者Shakil Ahmed