如何在Blazor Server中点击按钮动态生成多个ButtonComponent组件

实现思路 #

你当前用单个布尔值控制组件显隐只能渲染单个ButtonComponent，要实现每次点击新增一个的效果，改用集合存储所有按钮的配置参数即可，Blazor会自动监听集合变化渲染对应数量的组件。

完整修改后代码 #

@page "/tester"

<button type="button" @onclick="AddNewButton">
    Show Button
</button>

@foreach (var label in ButtonLabels)
{
    <ButtonComponent label="@label" /> <hr/>
}

@* 如果需要支持模态窗修改label后同步更新，且你的ButtonComponent支持双向绑定，改成以下写法即可 *@
@* @foreach (var (label, index) in ButtonLabels.Select((val,idx)=>(val,idx)))
{
    <ButtonComponent @bind-Label="ButtonLabels[index]" /> <hr/>
} *@

@code {
    // 存储所有按钮的label值，每新增一个按钮就往集合里加一条数据
    List<string> ButtonLabels { get; set; } = new();

    void AddNewButton()
    {
        // 新增按钮默认label用你原来的Search，也可以自定义默认值
        ButtonLabels.Add("Search");
    }
}

说明 #

• 每次点击Show Button都会往集合追加一条数据，Blazor会自动渲染出新的ButtonComponent，默认垂直排列
• 如果你的ButtonComponent在模态窗修改label后需要同步到组件显示，只要给组件开启双向绑定，修改集合对应位置的值即可自动刷新视图

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