Blazor Webassembly (.NET 5) 带有文件的自定义组件：验证不起作用

如何解决Blazor Webassembly (.NET 5) 带有文件的自定义组件：验证不起作用

我发现了 Chris Sainty 的这篇很棒的帖子：Creating Bespoke Input Components for Blazor from Scratch。这正是我需要的，但不是 string，而是上传的文件 IbrowserFile。所以我已经为我改编和扩展了这个例子。自定义组件显示新文件并将其保存在我的模型中，但不幸的是，在 CSS 中状态保持在 class="modified invalid"。我一定在这里遗漏了一个小细节。它是什么？提前感谢您的任何提示。

这是我的代码，简化为基本内容。

Selection.razor

    @page "/selection"
    @inherits ParentComponent<SelectionTestModel>
    <PageComponent @ref="Page" Model="Model" StatusCode="StatusCode" PageType="PageType.Touch">
        <PageBody>
            <EditForm Model="Model" OnValidSubmit="Save">
                <DataAnnotationsValidator />
    
                <DocumentComponent @ref="DocumentUpload" @bind-Documents="Model.Files" />
    
            </EditForm>
        </PageBody>
    </PageComponent>
    @code {
        private DocumentComponent DocumentUpload;
    }

SelectionTestModel.cs

public class SelectionTestModel
{
    public int? KeyID { get; set; }
    /* ... */
    [System.ComponentModel.displayName("Document")]
    [System.ComponentModel.DataAnnotations.display(Name = "Document")]
    [System.ComponentModel.DataAnnotations.Range(2,2,ErrorMessage = "You have to bring exactly two files!")]
    public List<DocumentModel> Files { get; set; } = new List<DocumentModel>();
}

文档模型

public class DocumentModel
{
    public int? Id { get; set; }
    public string Reference { get; set; }

    public string Name { get; set; }
    public long Size { get; set; }

    public string ContentType { get; set; }
    public string Content { get; set; } /*file as base64 string*/
}

DocumentComponent.razor

@using System.Linq.Expressions

<div class="dropzone rounded @_dropClass @_validClass">
     <InputFile id="inputDrop" multiple
               ondragover="event.preventDefault()"
               ondragstart="event.dataTransfer.setData('',event.target.id)"
               accept="@AllowedFileTypes"
               OnChange="OnInputFileChange"
               @ondragenter="Handledragenter"
               @ondragleave="HandleDragLeave" />
    @*...*@
</div>

@code {
    [CascadingParameter] public EditContext EditContext { get; set; }
    [Parameter] public List<DocumentModel> Documents { get; set; } = new List<DocumentModel>();
    [Parameter] public EventCallback<List<DocumentModel>> DocumentsChanged { get; set; }
    [Parameter] public Expression<Func<List<DocumentModel>>> DocumentsExpression { get; set; }

    /*...*/    
    public List<string> AllowedFileTypes { get; set; } = new List<string> { ".pdf",/*...*/ };
    private FieldIdentifier _fieldIdentifier;
    private string _validClass => EditContext?.FieldCssClass(_fieldIdentifier) ?? null;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        _fieldIdentifier = FieldIdentifier.Create(DocumentsExpression);
    }

    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        // validation: do we accept the file (content type,amount of files,size)
        if (e.FileCount == 1) // keep it simple for this example
        {
            // read from IbrowserFile and return DocumentModel in memory only
            Documents.Add(await SaveFile(e.File));

            await DocumentsChanged.InvokeAsync(Documents);
            EditContext?.NotifyFieldChanged(_fieldIdentifier);
        }
    }

    /*...*/
}

它在浏览器 (Chrome) 中的表现如何

加载页面后，一切看起来都符合预期。

之后我上传了一个文件。所以我有一个文件，我希望有两个。验证变成红色，我得到“修改无效”。到目前为止，一切都很棒。

最后我将另一个文件拖入组件并得到两个文件。我也可以在模型中看到这一点。但不幸的是没有设置类属性“修改有效”。

再次感谢您的建议

解决方法

我在错误的方向挖得太深，没有看到明显的东西。

问题是模型中有一个属性集不抛出错误，但也无法验证。 Range 属性不适用于列表，因此模型永远无法验证。有了自己的属性，我就可以解决这个问题。

SelectionTestModel.cs

    [Library.Validation.Attribute.ListRange(2,2)]
    public List<DocumentModel> Files { get; set; } = new List<DocumentModel>();

ListRangeAttribute.cs

namespace Library.Validation.Attribute
{
    public class ListRangeAttribute : ValidationAttribute
    {
        public int Minimum { get; set; }
        public int Maximum { get; set; }

        public ListRangeAttribute(int minimum = 0,int maximum = int.MaxValue)
        {
            Minimum = minimum > 0 ? minimum : 0;
            Maximum = maximum;
        }

        public string GetErrorMessage(string displayName) { /* ... */ }

        protected override ValidationResult IsValid(object value,ValidationContext validationContext)
        {
            var list = value as IList;
            if (list == null)
            {
                throw new InvalidOperationException($"Attribute {nameof(ListRangeAttribute)} must be on a property of type {nameof(IList)}.");
            }

            if ((list?.Count ?? 0) < Minimum || (list?.Count ?? int.MaxValue) > Maximum)
            {
                return new ValidationResult(GetErrorMessage(validationContext.DisplayName),new[] { validationContext.MemberName });
            }

            return ValidationResult.Success;
        }
    }
}

我希望这篇文章可以帮助其他人。

剩余：现在我留下了一个新的谜团。为什么点击保存按钮后验证文本消失，由于模型状态无效而无法保存！？