Blazor中如何在foreach循环的select元素中获取变更对象

在Blazor中，@bind本质是value属性绑定+onchange事件的语法糖，因此无法同时手动添加onchange事件。针对你的需求，推荐两种最优实现方案：

方案一：手动拆分绑定逻辑（兼容所有Blazor版本） #

放弃@bind语法，手动设置value属性并自定义@onchange事件，直接传入当前循环的WorkoutExerciseDto对象：

前端代码修改 #

@foreach(WorkoutExerciseDto workoutExerciseDto in Workout.Exercises)
{
    <select class="form-select" 
            value="@workoutExerciseDto.ExerciseId"
            @onchange="(e) => HandleExerciseSelection(e, workoutExerciseDto)">
        <option value="1">Exercise 1</option>
        <option value="2">Exercise 2</option>
        <option value="3">Exercise 3</option>
    </select>
}

后端逻辑补充 #

添加事件处理方法，先更新ExerciseId再调用你的目标方法：

private void HandleExerciseSelection(ChangeEventArgs e, WorkoutExerciseDto workoutExerciseDto)
{
    // 解析选中的ID并更新对象属性
    if (int.TryParse(e.Value?.ToString(), out int selectedExerciseId))
    {
        workoutExerciseDto.ExerciseId = selectedExerciseId;
        // 传入当前对象到目标方法
        GetChangedObject(workoutExerciseDto);
    }
}

public void GetChangedObject(WorkoutExerciseDto workoutExerciseDto)
{
    // 你的业务逻辑代码
}

方案二：使用@bind:after事件（Blazor 6.0+ 适用） #

如果你的项目基于Blazor 6.0或更高版本，可以利用@bind:after事件在绑定完成后触发方法。注意此处需改用for循环遍历（避免闭包陷阱）：

前端代码修改 #

@for (int i = 0; i < Workout.Exercises.Count; i++)
{
    var currentIndex = i; // 捕获当前索引，避免循环闭包问题
    <select class="form-select" 
            @bind="Workout.Exercises[currentIndex].ExerciseId"
            @bind:after="() => GetChangedObject(Workout.Exercises[currentIndex])">
        <option value="1">Exercise 1</option>
        <option value="2">Exercise 2</option>
        <option value="3">Exercise 3</option>
    </select>
}

后端方法无需额外修改 #

直接使用你已定义的GetChangedObject方法即可：

public void GetChangedObject(WorkoutExerciseDto workoutExerciseDto)
{
    // 你的业务逻辑代码
}

方案对比 #

• 方案一兼容性强，适用于所有Blazor版本，逻辑清晰可控，适合需要自定义绑定细节的场景；
• 方案二更简洁，利用Blazor原生语法糖，代码量更少，但依赖较高版本的Blazor框架。

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