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

Question

如何在包含从枚举中提取的值的 InputSelect 组件中设置文本标题 object，以及如何验证是否已选择一个值。

Answer 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 开始，如这里所做的那样，或者从任何其他数字开始。

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

Set text caption in an InputSelect containing Enum values

blazor

blazor-server-side

blazor-webassembly