使用 InputSelect 進行 ASP.NET Blazor 所需的驗證

Question

我試圖讓 Required 屬性與 InputSelect 一起使用，但驗證在 Blazor Server 中不起作用。 無需選擇即可提交表單。 有趣的是，它在模型屬性可以為空時起作用。 在 .NET 5.0 之前，它不適用於可空類型，因為 InputSelect 不支持它們。 但是，我想要一個不可為空的必需屬性，因為我想將我的 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>

當用戶點擊“提交”按鈕時，如果用戶沒有選擇一個值，應該顯示一條驗證消息？

如果是的話，這就是我的答案：

InputSelect 組件，至少在 .Net 5.0 之前，只能綁定到字符串和枚舉類型。

如果你想讓你的 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 無關。 需要檢查具有必需屬性的選擇元素在 Razor 頁面中的行為方式。 無論如何，我會嘗試解決這個錯誤，如果成功，我會告訴你......

@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; }
    }

}   

Answer 2

一個快速而骯臟的解決方法是在模型中的枚舉上使用Range屬性。 您必須為您的枚舉分配數值並使用基於它們的屬性。 這絕對不是最好的解決方案，但這暫時對我有用。 如果有人找到更好的解決方案，請分享。

例子：

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

    [Required]
    [Range(1, int.MaxValue)]
    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
}