Blazor：如何获取EditForm中多个动态生成组件的对应值

1. 修改子组件DynamicStep.razor #

将事件回调改为同时传递步骤ID和选中值，用元组实现更简洁的参数传递：

<div class="col-lg-3">
    <label for="@Id" class="fw-bold">@Id</label>
    <div class="input-group">
        <select id="@Id" @bind:get="StepValue" @bind:set="SetValue">
            <option value="0">N/A</option>
            <option value="1">Pass</option>
            <option value="2">Fail</option>
            <option value="3">In Progress</option>
        </select>
    </div>
</div>

@code {
    [Parameter] public string? Id { get; set; }
    // 调整EventCallback类型，同时传递步骤ID和值
    [Parameter] public EventCallback<(string StepId, string StepValue)> HandleStepChanged { get; set; }
    [Parameter] public string? StepValue { get; set; }

    private async Task SetValue(string newValue)
    {
        if (StepValue != newValue && Id != null)
        {
            StepValue = newValue;
            // 触发回调时传入ID和新值
            await HandleStepChanged.InvokeAsync((Id, newValue));
        }
    }
}

2. 调整父组件模型与逻辑 #

首先在Deliverable模型中添加存储动态步骤结果的字段：

public class Deliverable
{
    public string? ProdRMA { get; set; }
    public string? SerialNumber { get; set; }
    // 用字典存储每个步骤的结果，键为步骤名称，值为选中状态码
    public Dictionary<string, string> StepResults { get; set; } = new();
}

然后修改父组件中DynamicStep的渲染与绑定：

<!-- 父组件中渲染动态步骤的部分 -->
<div class="row">
    @if (jobStepList != null)
    {
        <div class="row">
            @foreach (var step in jobStepList)
            {
                <DynamicStep 
                    @key="@step.JobStepId" 
                    Id="@step.StepName" 
                    StepValue="@addDeliverable.StepResults.GetValueOrDefault(step.StepName, "0")"
                    HandleStepChanged="HandleStepChanged">
                </DynamicStep>
            }
        </div>
    }
</div>

在父组件的@code块中添加回调处理方法：

private void HandleStepChanged((string StepId, string StepValue) args)
{
    // 更新字典中对应步骤的结果
    if (addDeliverable.StepResults.ContainsKey(args.StepId))
    {
        addDeliverable.StepResults[args.StepId] = args.StepValue;
    }
    else
    {
        addDeliverable.StepResults.Add(args.StepId, args.StepValue);
    }
}

3. 提交时获取所有步骤值 #

在AddDeliverable方法中，直接通过addDeliverable.StepResults获取所有动态步骤的选中值：

private async Task AddDeliverable()
{
    // 示例：遍历所有步骤结果进行处理
    foreach (var result in addDeliverable.StepResults)
    {
        // 这里可以将结果保存到数据库或其他逻辑处理
        Console.WriteLine($"步骤：{result.Key}，状态：{result.Value}");
    }

    // 重置表单
    addDeliverable = new();
}

核心思路说明 #

• 子组件通过元组传递ID和值，让父组件精准识别值的来源
• 父组件用字典存储动态步骤结果，实现灵活的键值对应
• 双向绑定子组件的StepValue到字典，确保初始值与修改同步

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