Blazor InputSelect：无法使用 @bind-Value 将枚举值绑定到枚举类型

Question

我正在使用 Blazor Web 应用程序。我有一个枚举。它具有三个值：UpperBody、LowerBody、FullBody。我的目标是让用户选择这些值之一。然后，程序将采用所选值（UpperBody、LowerBody、FullBody）并根据该值从数据库中过滤练习。这需要选定的枚举值成功绑定到我的组件内的变量。我还没有找到办法做到这一点。正如您将在我的代码中看到的，我还有一个方法旨在将选定的枚举值打印到控制台。此外（正如您将看到的），我试图在 HTML 中打印 Enum 的值。这是为了调试，以便我可以“看到”我的更新值。

枚举：

namespace dataBindingProblem
{
    public enum WorkoutType
    {
        UpperBody, LowerBody, FullBody
    }
}

组件：

注意：此代码块缺少 EditForm 标记。因此，在导航到 /selectworkout 端点时，您将遇到异常，指出需要使用 EditContext 或 Model。我不确定如何继续此操作，因为我不直接处理模型（尽管我确实尝试引入一个模型，如下所述）。

@page "/selectworkout"

<h3>Select Workout Type (From Enum Values) </h3>


    <label for="workoutselection"> Select Workout Type </label>
    <InputSelect id="workoutselection" @bind-Value="@selectedWorkoutType" @bind-Value:after="workoutTypeChanged">
        <option value=""> Select Workout Type </option>
        @foreach (var type in Enum.GetValues(typeof(WorkoutType)))
        {
            <option value="@type">@type</option>
        }
    </InputSelect>


<p>Selected Workout Type: @selectedWorkoutType</p>

@code {
    private WorkoutType selectedWorkoutType;

    public void workoutTypeChanged()
    {
        Console.WriteLine($"Workout Type Changed: {selectedWorkoutType}");
    }
}

我尝试过的事情

• 我尝试重构我的组件以引入 UserExercise.cs 模型（如上所述），该模型具有属性 public WorkoutType WorkoutType {get;放;}。在这次尝试中，我还将EditContext引入了EditForm标签中。这次尝试的灵感来自于this。

• 我尝试在 InputSelect 标签中使用 ValueChanged 参数。经过进一步检查，我将其替换为 bind-Value:after，灵感来自 jeroba2023 解决方案。

• 我尝试离开电脑，去 Qdoba 买墨西哥卷饼碗。

除了解决问题之外，如果以后有什么建议调试类似的东西，请赐教。最重要的是，我只想开始工作。我考虑过重构应用程序并删除所有枚举，并为下拉列表引入内存列表并最终过滤数据库，但我不认为是枚举（及其相关模型）导致了麻烦。谢谢。

Answer 1

最简单的方法就是引入本地模型。

这是一些演示代码。 我还添加了未选择选项的逻辑。

@page "/"

<h3>Select Workout Type (From Enum Values) </h3>

<EditForm Model="_model">
    <label class="form-label"> Select Workout Type </label>
    <InputSelect class="form-select" @bind-Value="@_model.WorkoutType" @bind-Value:after="workoutTypeChanged">
        @if(_model.WorkoutType is null)
        {
            <option disabled="true" selected value=""> Select Workout Type </option>
        }
        @foreach (var type in Enum.GetValues(typeof(WorkoutType)))
        {
            <option value="@type">@type</option>
        }
    </InputSelect>
</EditForm>

<div class="bg-dark text-white m-2 p-2">
    <pre>Selected Workout Type: @_model.WorkoutType</pre>
</div>

@code {
    private Model _model = new();

    public void workoutTypeChanged()
    {
        Console.WriteLine($"Workout Type Changed: {_model.WorkoutType}");
    }

    public enum WorkoutType
    {
        UpperBody, LowerBody, FullBody
    }

    public class Model
    {
        public WorkoutType? WorkoutType { get; set; }
    }
}