Blazor页面如何渲染带数据库参数组件及动态新增空白组件

代码调整步骤 #

1. 修改集合定义 #

将存储RenderFragment的集合替换为存储业务数据的集合，同时增加数量上限常量：

// 最多同时存在10个组件
private const int MaxComponentCount = 10;
// 集合存储组件绑定的Tester数据，空实例对应空白组件
public List<Tester> sideItemDatas { get; set; }

2. 修改初始化逻辑 #

页面加载时将数据库查询到的数据填充到集合中：

protected override void OnInitialized()
{
    sideItemDatas = new List<Tester>();
    // 加载数据库数据
    var dbDatas = GetData();
    // 取数据库数据和上限的较小值，避免超过数量限制
    sideItemDatas.AddRange(dbDatas.Take(MaxComponentCount));
}

public List<Tester> GetData()
{
    List<Tester> data = new List<Tester>
    {
        new Tester{FirstName = "JJ", LastName = "PP"},
        new Tester{FirstName = "HH", LastName = "KK"},
        new Tester{FirstName = "KK", LastName = "LL"},
    };
    return data;
}

3. 修改组件渲染逻辑 #

直接循环数据集合渲染AddComponent，通过参数传递初始数据：
前提：你的AddComponent已经定义了接收Tester类型的参数，示例如下：

// AddComponent.razor 中添加参数定义
[Parameter]
public Tester InputModel { get; set; }

页面渲染部分代码调整为：

<button type="button" @onclick="GenerateComponents" id="btClickMe" disabled="@(sideItemDatas.Count >= MaxComponentCount)">
    Show Sign Up Window
</button>

<div id="groups-parent" style="display: block; min-height: 500px; position: relative; border: dashed 1px #888; ">
    @foreach (var itemData in sideItemDatas)
    {
        <div class="draggable obstacle">
            <AddComponent InputModel="@itemData" />
        </div>
    }
</div>

这里额外给按钮加了禁用逻辑，达到10个上限后就无法再新增。

4. 调整新增组件逻辑 #

点击按钮时新增空白Tester实例即可：

private async Task GenerateComponents()
{
    if (sideItemDatas.Count >= MaxComponentCount) return;
    // 新增空白Tester实例，对应无初始数据的组件
    sideItemDatas.Add(new Tester());
    StateHasChanged();
}

如果需要保留之前手动构造RenderFragment的实现方式，也可以在构造时通过builder.AddAttribute()方法传入参数，不过直接循环渲染组件的方式更简洁易维护。

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