在包含枚举值的 InputSelect 中设置文本标题答案

【问题标题】：Set text caption in an InputSelect containing Enum values在包含枚举值的 InputSelect 中设置文本标题
【发布时间】：2021-01-30 16:21:17
【问题描述】：

如何在包含从 Enum 对象中提取的值的 InputSelect 组件中设置文本标题，以及如何验证已选择的值。

【问题讨论】：

标签： blazor blazor-server-side blazor-webassembly

【解决方案1】：

以下代码示例描述了如何将枚举与 InputSelect 内置组件一起使用，如何添加占位符，以及如何使用 Required 属性来确保用户在保存表单数据之前已经选择了一个值。

@page "/"

@using System.ComponentModel.DataAnnotations;

<EditForm EditContext="@EditContext" OnValidSubmit="HandleValidSubmit" 
                                                      Context="NewContext">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">Enter your Name: </label>
        <InputText Id="name" Class="form-control" @bind-Value="@comment.Name"> 
        </InputText>
        <ValidationMessage For="@(() => comment.Name)" />

    </div>
    <div class="form-group">
        <label for="body">Select your country: </label>
    <InputSelect ValueExpression="@(() => comment.Country)"
         Value="@comment.Country" ValueChanged="@((Country? args) => 
                                                comment.Country = args)">
        <option value="">Select country...</option>
        @foreach (var country in Enum.GetValues(typeof(Country)))
        {
            <option value="@country">@country</option>
        }
    </InputSelect>
    <ValidationMessage For="@(() => comment.Country)" />
    </div>

    <p>
        <button type="submit">Submit</button>
    </p>
</EditForm>


@code
    {
     
    private EditContext EditContext;
    private Comment comment = new Comment();

    private void HandleValidSubmit()
    {
        Console.WriteLine("Submitting");
    }
    protected override void OnInitialized()
    {
        EditContext = new EditContext(comment);
    
        base.OnInitialized();
    }
    
    public enum Country
    {
        USA,
        Britain,
        Germany,
        Israel

    }
    public class Comment
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public Country? Country { get; set; }
    }

}

注意：为了启用上述 InputSelect 组件的验证，无论您将第一个选项留空还是添加标签文本，您都必须使 Country 属性可以为空。请注意，第一个选项的数值可能为 0 或 -1 （如果您愿意，可以像 Angular 一样）或任何数字。价值是什么并不重要。您可以使用字符串 Select 或空字符串，甚至根本不使用 value 属性。它仍然有效。这是因为检查是针对枚举的成员进行的，如果是一个值，那就是第一个选项的值不是枚举的一部分，验证被触发。因此，枚举本身可以从 0 或从 1 开始，就像这里所做的那样，或者从任何其他数字开始。

【讨论】：