主页 / coding / 问题 / 79108169
Accepted
thecodeiackiller
Asked: 2024-10-21 06:26:05 +0800 CST

如何维护 Blazor 表单中多个级联下拉菜单的单独状态？

  • 772

链接到 GitHub 以快速访问最小可重现示例（下面也提供了代码）： https: //github.com/thecodeiackiller/cascadingSelectListProblem

  • #1）我有一份锻炼清单。
  • #2)我有 2 个枚举 (WorkoutType 和 ExerciseType)，可以过滤锻炼列表。
  • #3)我有一个 EditForm，它允许用户： 选择 WorkoutType（LowerBody 或 UpperBody），它会过滤锻炼列表，并 选择 ExerciseType（Main、Secondary、Accessory），它会进一步过滤列表。

注意：对于那些不熟悉健身领域的人来说，在给定的锻炼中，您通常有一种锻炼类型（腿部锻炼、上身锻炼等），并且在该锻炼中，您有运动类型（主要/较重的运动、次要运动和辅助运动（锻炼小肌肉）。

预期按时间顺序排列的用户流量：

    1. 选择了 WorkoutType 并过滤了练习列表（我相信我的表格已经成功做到了这一点）。
    1. 对于 EditForm 中的第一行，用户选择一个 ExerciseType（主要、次要、附件）并且列表再次被过滤。
    1. 用户从现在经过两次筛选的列表中选择一项练习的名称。仍在第一行。
    1. 用户导航至第二行。
    1. 用户选择锻炼类型
    1. 用户从列表中选择新的练习名称（应根据第二行所选的练习类型进行过滤）。

问题：第二行的练习名称列表没有更新。练习名称列表与第一个练习相同，尽管练习类型不同，这应该会改变显示的练习。

我当前实现的AddWorkout.razor组件：

@using stateManagementMinimumReproducibleExample.Repositories
@using stateManagementMinimumReproducibleExample.Models
@page "/addworkout"
@rendermode InteractiveServer
@inject UserExerciseRepository userExerciseRepository

<EditForm Model="userExercise">
    <label for="workoutType"> Workout Type: </label>
    <InputSelect id="workoutType" @bind-Value="userExercise.WorkoutType" @bind-Value:after="GetExercisesByWorkoutType">
        @foreach (var type in Enum.GetValues(typeof(WorkoutType)))
        {
            <option value="@type">@type</option>
        }
    </InputSelect>

    @for (int i = 0; i < numberOfExercisesInWorkout; i++)
    {
        var j = i;
        if (j >= exerciseListForSelectedDay.Count)
        {
            exerciseListForSelectedDay.Add(new UserExercise());
        }

        <div>
            <label for="exerciseType"> Exercise Type: </label>
            <InputSelect id="exerciseType" @bind-Value="exerciseListForSelectedDay[j].ExerciseType" @bind-Value:after="GetExercisesByExerciseType">
                @foreach (var type in Enum.GetValues(typeof(ExerciseType)))
                {
                    <option value="@type">@type</option>
                }
            </InputSelect>

            <label for="exerciseName"> Exercise: </label>
            <InputSelect id="exerciseName" @bind-Value="exerciseListForSelectedDay[j].ExerciseId">
                @foreach (var exercise in listOfExerciseByExerciseType)
                {
                    <option value="@exercise.Id">@exercise.Name</option>
                }
            </InputSelect>
        </div>
    }
</EditForm>


@code {
    private int numberOfExercisesInWorkout = 2;

    private UserExercise userExercise = new();

    private List<UserExercise> exerciseListForSelectedDay = new();

    public List<Exercise> listOfExercisesByWorkoutType = new();

    public List<Exercise> listOfExerciseByExerciseType = new();

    public async Task GetExercisesByWorkoutType()
    {
            listOfExercisesByWorkoutType = await   userExerciseRepository.GetExercisesBasedOnWorkoutType(userExercise.WorkoutType);
            StateHasChanged();
    }

    public void GetExercisesByExerciseType()
    {
            listOfExerciseByExerciseType = userExerciseRepository.GetExercisesFromWorkoutListBasedOnExerciseType(listOfExercisesByWorkoutType, userExercise.ExerciseType);;
    }
}

我考虑过创建一个字典来存储锻炼中每项练习的练习列表的可能性。此外，我还考虑将 List 作为属性存储在我的 UserExercise 类中，然后将过滤后的练习列表添加到该属性中。我不确定我应该走哪条路，或者是否存在任何潜在的特定于 Blazor 的状态管理替代方案。

上面的代码应该能给你足够的信息来诊断问题。如果你需要直观的了解，以下是在分叉和克隆 GitHub 存储库后快速重现问题的步骤：

  • 启动应用程序
  • 导航至 /addworkout 端点
  • 选择锻炼类型（整个表格）
  • 选择锻炼类型（第一行）
  • 选择一项练习（第一行）
  • 选择锻炼类型（第二行）
  • 选择一项练习（第二行）

此时，您将看到，由于选择了与第一行不同的 ExerciseType，因此第二行的筛选列表尚未更新。我如何才能让第二行（及以后）的适当练习列表出现？谢谢。

blazor

1 个回答

  1. Best Answer

    您可以尝试以下代码来解决这个问题：

    添加锻炼.razor：

    @using stateManagementMinimumReproducibleExample.Repositories
@using stateManagementMinimumReproducibleExample.Models
@page "/addworkout"
@rendermode InteractiveServer
@inject UserExerciseRepository userExerciseRepository

<EditForm Model="userExercise">
    <label for="workoutType"> Workout Type: </label>
    <InputSelect id="workoutType" @bind-Value="userExercise.WorkoutType" @bind-Value:after="GetExercisesByWorkoutType">
        @foreach (var type in Enum.GetValues(typeof(WorkoutType)))
        {
            <option value="@type">@type</option>
        }
    </InputSelect>

    @for (int i = 0; i < numberOfExercisesInWorkout; i++)
    {
        var j = i;
        if (j >= exerciseListForSelectedDay.Count)
        {
            exerciseListForSelectedDay.Add(new UserExercise());
        }

        <div>
            <label for="exerciseType"> Exercise Type: </label>
            <InputSelect id="exerciseType" @bind-Value="exerciseListForSelectedDay[j].ExerciseType" @bind-Value:after="() => GetExercisesByExerciseType(j)">
                @foreach (var type in Enum.GetValues(typeof(ExerciseType)))
                {
                    <option value="@type">@type</option>
                }
            </InputSelect>

            <label for="exerciseName"> Exercise: </label>
            <InputSelect id="exerciseName" @bind-Value="exerciseListForSelectedDay[j].ExerciseId">
                @foreach (var exercise in exerciseListForSelectedDay[j].FilteredExercises)
                {
                    <option value="@exercise.Id">@exercise.Name</option>
                }
            </InputSelect>
        </div>
    }
</EditForm>

@code {
    private int numberOfExercisesInWorkout = 2;
    private UserExercise userExercise = new();
    private List<UserExercise> exerciseListForSelectedDay = new();

    public List<Exercise> listOfExercisesByWorkoutType = new();

    public async Task GetExercisesByWorkoutType()
    {
        listOfExercisesByWorkoutType = await userExerciseRepository.GetExercisesBasedOnWorkoutType(userExercise.WorkoutType);
        // Update each exercise list based on the new workout type
        foreach (var exercise in exerciseListForSelectedDay)
        {
            exercise.FilteredExercises = userExerciseRepository.GetExercisesFromWorkoutListBasedOnExerciseType(listOfExercisesByWorkoutType, exercise.ExerciseType);
        }
        StateHasChanged();
    }

    public async Task GetExercisesByExerciseType(int index)
    {
        // Filter the exercises based on the ExerciseType for the specific row (index)
        var selectedExerciseType = exerciseListForSelectedDay[index].ExerciseType;
        exerciseListForSelectedDay[index].FilteredExercises = userExerciseRepository.GetExercisesFromWorkoutListBasedOnExerciseType(listOfExercisesByWorkoutType, selectedExerciseType);
        await InvokeAsync(StateHasChanged);
    }
}

    用户练习.cs：

    namespace stateManagementMinimumReproducibleExample.Models
{
    public class UserExercise
    {
        public int Id { get; set; }
        public int ExerciseId { get; set; }
        public ExerciseType ExerciseType { get; set; }
        public WorkoutType WorkoutType { get; set; }

        // Add this property to store the filtered exercises for each row
        public List<Exercise> FilteredExercises { get; set; } = new List<Exercise>();
    }

}

    所以基本上，在您的代码中，您正在尝试全局更新列表，并且它使用单个列表，因此您看到相同的练习。为了避免这个问题，您可以为行创建单独的过滤列表。

    结果：

    在此处输入图片描述

    • 1

相关问题