Blazor 中隐藏/非绑定字段的自定义验证

Posted

技术标签:

【中文标题】Blazor 中隐藏/非绑定字段的自定义验证【英文标题】:Custom validation for hidden/non-bound field in Blazor 【发布时间】:2021-10-29 13:09:50 【问题描述】:

我是第一次使用 Blazor(也是我几年来第一次使用 .NET,所以我生疏了),以及我和我的团队决定使用的附加组件库Blazor 是MudBlazor。现在我正在处理一个包含Autocomplete 组件的页面。

我想要做的是使用自动完成功能来拉出用户可以添加到列表中的书籍列表。至少一本书必须在列表中。我的问题是,由于 MudAutocomplete 的工作原理,我无法将其绑定到列表,因此我将 Book 附加到单击事件的列表中。但是,点击提交按钮并没有点击我实施的任何一个验证,我似乎无法弄清楚为什么。

我有以下代码:

<MudForm @ref="form" @bind-isValid="@success" bind-errors="@errors">
    <MudAutocomplete T="Book" Label="Select Book(s)" ValueChanged="@(b => AppendBookToList(b))" SearchFunc="@SearchBooks" MinCharacters="4" ToStringFunc="@(b => b == null ? null : $"b.Name + " by " + b.Author")" Validation="@(new Func<string, IEnumerable<string>>(ValidateRequiredBooks)">
    </MudAutocomplete>
    
    <!-- List books that were selected from the autocomplete -->
    @foreach (var b in Books)
    
        <MudChip Color="Color.Primary" OnClose="RemoveRequester" Text="b.Id">@b.Name by @b.Author</MudChip>
    
    <!-- I guess use this area below to secretly bind the Books field? Not sure how to display the validation error otherwise -->
    <MudField @bind-Value="@Books"></MudField>
    
    ...
    
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto" OnClick="@(() => form.Validate())">Submit</MudButton>
</MudForm>

...

@code 
    ...
    
    public class Book
    
        public int Id  get; set; 
        public string Name  get; set; 
        public string Author  get; set; 
    
    
    [BooksValidation(ErrorMessage = "At least one Book required.")]
    public List<Book> Books  get; set; 
    
    ...
    
    // This is not firing
    private IEnumerable<string> ValidateRequiredBooks(string value)
    
        if (Books.Count == 0)
        
            yield return "At least one Book must be selected.";
            yield break;
        
    

我还为我的Books 变量创建了以下自定义验证属性:

public class BooksValidationAttribute : ValidationAttribute

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    
        // Breakpoint here isn't getting hit
        var listValue = value as List<Book>;
        if (listValue != null && listValue.Count != 0)
        
            return null;
        
        else
        
            return new ValidationResult(ErrorMessage, new[]  validationContext.MemberName );
        
    

关于为什么这些根本不起作用的任何想法?它把我逼上墙了

【问题讨论】:

【参考方案1】:

我使用 Validation 属性,例如:

Validation="@(new BooksValidationAttribute())"

【讨论】:

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于Blazor 中隐藏/非绑定字段的自定义验证的主要内容,如果未能解决你的问题,请参考以下文章

使用数据注释和代码的自定义验证属性

显示或隐藏其他 Checkout 自定义字段的自定义下拉选择器

WooCommerce 结帐字段的自定义验证

IJSRuntime 忽略服务器端 Blazor 项目中的自定义 json 序列化程序

Blazor 内置组件上的自定义 CSS

将当前字段的值传递给 Laravel 中的自定义验证函数