时间戳

首页 > 解决方案 > 包含枚举值的 InputSelect 占位符

c# - 包含枚举值的 InputSelect 占位符

问题描述

我有一个InputSelect基于Enum类型显示各种选项的选项，例如

<InputSelect @bind-Value=m_ProjectExtended.EstimateType class="form-control form-control-sm">
    @foreach (var type in @GetEnumValues<EstimateType>())
    {
        <option value="@type.Value">@type.Key</option>
    }
</InputSelect>

public Dictionary<string, int> GetEnumValues<T>()
{
    Dictionary<string, int> values = new Dictionary<string, int>();

    foreach (var enumValue in Enum.GetValues(typeof(T)))
    {
        values.Add(enumValue.GetDisplayAttribute(), (int)enumValue);
    }

    return values;
}

我缺少的是能够在默认情况下选择占位符选项（即：例如，在创建新记录时选择“选择选项”），并且能够InputSelect从组件的代码中重置为这个占位符。

我在 Angular 中执行此操作的方式是添加值为 -1 的占位符选项，将绑定字段设置为该值，这可以解决问题。

问题是我在实际的 C# 枚举中没有值 -1 并且真的不想要一个。

有什么办法可以做到这一点？

标签： c#blazorblazor-server-side.net-5

解决方案

您不需要绑定该值，因为您没有强制进行特定选择。相反，将其设置在@onchangeTitle 选项不需要值，因为它永远不会被onchange. 我喜欢让我的值为SelectedItem空，因为这适用于所有可枚举（列表、队列等，而不仅仅是枚举）。将所选项目设置为 null 会自动重置标题选项。

<button @onclick="()=> SelectedType=null">Clear</button>
<select @onchange="args => SelectedType = (EstimateType)Enum.Parse(typeof(EstimateType), args.Value.ToString())">
@if (SelectedType is null)
{
    <option selected disabled>Choose an Estimate Type</option>
}
@foreach (var item in Enum.GetNames(typeof(EstimateType)))
{
    <option value="@item">@item</option>
}
</select>
@if(SelectedType is not null)
{
    <div>Selected Estimate Type: @SelectedType.ToString()</div>
}
@code {
    enum EstimateType { Labor, Materials, Drafting, Legal }

    EstimateType? SelectedType { get; set; }
}

推荐阅读