Question

我正在尝试使Required属性与InputSelect一起使用，但是验证在Blazor Server中不起作用。无需提交即可提交表格。有趣的是，当模型属性可为空时，它可以工作。在.NET 5.0之前，它不适用于可为null的类型，因为InputSelect不支持它们。但是，我想要一个不可为null的必填属性，因为我想将API中的dto作为模型重用，并且在逻辑上是错误的。

public class SomeModel
{
    [Required]
    public string SomeString { get; set; }

    [Required]
    public SomeEnum SomeEnum { get; set; }

    [Required]
    public SomeEnum? SomeNullableEnum { get; set; }

    [Required]
    public int SomeInt { get; set; }

    [Required]
    public int? SomeNullableInt { get; set; }
}

public enum SomeEnum
{
    A = 1,
    B = 2
}

页面

@page "/testrequired"
@using TestNET5BlazorServerApp.Data;


<EditForm Model="Model" OnValidSubmit="Submit">

    <DataAnnotationsValidator />
    <ValidationSummary />

    String:
    <br />
    <InputText @bind-Value="Model.SomeString" />
    <br />
    <br />
    Enum:
    <br />
    <InputSelect @bind-Value="Model.SomeEnum">
        <option value="">Select Enum</option>
        <option value="@SomeEnum.A">@SomeEnum.A</option>
        <option value="@SomeEnum.B">@SomeEnum.B</option>
    </InputSelect>
    <br />
    <br />

    Nullable Enum:
    <br />
    <InputSelect @bind-Value="Model.SomeNullableEnum">
        <option>Select Nullable Enum</option>
        <option value="@SomeEnum.A">@SomeEnum.A</option>
        <option value="@SomeEnum.B">@SomeEnum.B</option>
    </InputSelect>
    <br />
    <br />

    Int:
    <br />
    <InputSelect @bind-Value="Model.SomeInt">
        <option>Select Int</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </InputSelect>
    <br />
    <br />

    Nullable Int:
    <br />
    <InputSelect @bind-Value="Model.SomeNullableInt">
        <option>Select Nullable Int</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </InputSelect>
    <br />
    <br />

    <button type="submit">Save</button>
</EditForm>

@code 
{
    SomeModel Model = new Data.SomeModel();

    void Submit()
    {
        System.Diagnostics.Debug.WriteLine("Enum " + Model.SomeEnum);
        System.Diagnostics.Debug.WriteLine("Nullable Enum " + Model.SomeNullableEnum);
        System.Diagnostics.Debug.WriteLine("Int " + Model.SomeInt);
        System.Diagnostics.Debug.WriteLine("Nullable Int " + Model.SomeNullableInt);
    }
}

Answer 1

不确定我是否了解您，但请尝试一下...

但是我想要一个不可为空的必需属性

例如，您的意思是想要一个如下属性：

[Required]
public int SomeInt { get; set; }

像这样绑定到InputSelect组件：

<InputSelect @bind-Value="Model.SomeInt">
    <option>Select Int</option>
    <option value="1">1</option>
    <option value="2">2</option>
</InputSelect>

当用户点击“提交”按钮时，如果用户未选择值，则应显示一条验证消息？

如果是，这是我的答案：

至少在.Net 5.0之前的InputSelect组件只能绑定到字符串和枚举类型。

如果要使InputSelect支持对int的绑定（如上例所示），则应按如下所示将其子类化...

public class InputSelectNumber<T> : InputSelect<T>
    {
        
        protected override bool TryParseValueFromString(string value, out T result, out string validationErrorMessage)
        {
            if (typeof(T) == typeof(int))
            {
                if (int.TryParse(value, out var resultInt))
                {
                    result = (T)(object)resultInt;
                    validationErrorMessage = null;
                    return true;
                }
                else
                {
                    result = default;
                    validationErrorMessage = "The chosen value is not a valid number.";
                    return false;
                }
            }
            else
            {
                return base.TryParseValueFromString(value, out result, out validationErrorMessage);
            }
        }
    }

更新

我可以绑定它，但是它不支持必需的属性，不执行任何验证

请运行以下代码，在名称字段中输入一个值，然后按“提交”按钮。该表格是“已提交”的。现在，选择一个国家，然后选择“选择您的国家：” ...，显示一条验证消息。结论：仅当先前选择一个值然后将其删除时，验证才会发生。我不知道这是设计使然还是错误。但是，我认为这种行为与Blazor无关。需要检查具有“必需”属性的选择元素在剃刀页面中的行为。无论如何，我将尝试解决此错误，如果成功，我会让您知道...

@using System.ComponentModel.DataAnnotations;
 
<EditForm EditContext="@EditContext" OnValidSubmit="HandleValidSubmit">
    <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 @bind-Value="@comment.Country" >
            <option value="0">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 = 1,
        Britain,
        Germany,
        Israel

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

}

ASP.NET Blazor需要使用InputSelect进行验证

1 个答案:

更新