包含枚举值的 InputSelect 占位符答案

【问题标题】：Placeholder for an InputSelect containing Enum values包含枚举值的 InputSelect 占位符
【发布时间】：2021-01-25 19:01:37
【问题描述】：

我有一个 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 的值，并且我真的不想要一个。

有什么方法可以实现吗？

【问题讨论】：

你试过m_ProjectExtended.EstimateType = values.First().Value.ToString()吗？这将在渲染时将第一个值设置为默认值。
当您谈论占位符时，您的意思是假选择“---选择一个值---”还是真正选择的选项？
@daniherrera 是的，一个“假”，即：“选择估计类型”
@FrancisDucharme 为什么不在您迭代 Enum 以添加动态选项之前添加一个假选项字段。到底是HTML <option value="" selected>--- select a value ---</option>
@SuprabhatBiswal 因为选择绑定到m_ProjectExtended.EstimateType，所以不可能将选择清除回占位符。 EstimateType 是一个枚举。

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

【解决方案1】：

如果您需要“--select a value--”选项，这意味着您的m_ProjectExtended.EstimateType 可能为空（否则它总是为您的下拉菜单提供有效条目）。

所以要添加功能，只需按照建议添加选项，但不要直接绑定，而是通过这样的属性：

...

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

...

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

        // Inject placeholder only if there is no value
        if (m_ProjectExtended.EstimateType == null)
        {
            values.Add("--select a value--", -1);
        }
        
        foreach (var enumValue in Enum.GetValues(typeof(T)))
        {
            values.Add(enumValue.GetDisplayAttribute(), (int) enumValue);
        }

        return values;
    }

    // Translate "Nullable" to our extended value with the placeholder
    public int EstimateType
    {
        get => m_ProjectExtended.EstimateType == null ? -1 : (int) m_ProjectExtended.EstimateType;
        set
        {
            if (value > -1)
                m_ProjectExtended.EstimateType = (EstimateType) value;
        }
    }
}

仅当 m_ProjectExtended.EstimateType 尚未设置时才会显示您的占位符。一旦用户选择一个选项，占位符将自动消失。

【讨论】：

【解决方案2】：

您不需要绑定该值，因为您没有强制进行特定选择。相反，将其设置为@onchange 标题选项不需要值，因为它永远不会被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; }
}

【讨论】：