主页 / coding / 问题 / 79099982
Accepted
thecodeiackiller
Asked: 2024-10-18 06:09:30 +0800 CST

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

  • 772

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

枚举：

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; set;}。在此尝试中，我还将 EditContext 引入了 EditForm 标签。此尝试的灵感来自此。

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

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

除了解决问题之外，如果以后有任何调试此类问题的建议，请告诉我。归根结底，我只想让 bind 工作。我考虑过重构应用程序并删除所有枚举，并为下拉列表引入一个内存列表，并最终过滤数据库，但我不认为枚举（及其相关模型）导致了问题。谢谢。

razor

1 个回答

  1. Best Answer

    最简单的方法是引入本地模型。WorkoutType可以为空，因为它似乎就是您想要的[您有一个选择锻炼类型选项]。

    这是一些演示代码。我还添加了一些显示逻辑来处理“选择锻炼类型”选项，因此它无法被选择，并且仅在值为空时显示。

    @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
    }

    private class Model
    {
        public WorkoutType? WorkoutType { get; set; }
    }
}
    • 0

相关问题