使用FluentValidation与Blazor时组件CssClass未生效问题排查

不需要从FluentValidation验证器中额外触发CSS更新机制，问题核心出在EditContext与CssClassProvider的绑定时机、FieldIdentifier路径匹配这两个关键点上，以下是具体修复步骤：

1. 确保CustomFieldCssClassProvider正确绑定到EditContext #

自定义CssClassProvider必须在EditContext初始化完成后立即设置，且要覆盖EditForm自动创建的EditContext（如果使用Model参数自动生成EditContext）。

正确注册方式（EditForm自动生成EditContext） #

<EditForm Model="@Model" OnEditContextChanged="@HandleEditContextChanged">
    <!-- 嵌套面板与字段控件 -->
</EditForm>

@code {
    [Parameter] public PanelLayoutData Model { get; set; }
    private CustomFieldCssClassProvider _cssProvider;

    private void HandleEditContextChanged(EditContextChangedEventArgs args)
    {
        // 初始化自定义CSS类提供器
        _cssProvider = new CustomFieldCssClassProvider(args.NewEditContext);
        args.NewEditContext.SetFieldCssClassProvider(_cssProvider);
        
        // 绑定FluentValidation验证器
        var validator = new PanelLayoutValidator();
        args.NewEditContext.AddFluentValidation(validator);
    }
}

自定义CssClassProvider实现 #

public class CustomFieldCssClassProvider : FieldCssClassProvider
{
    private readonly EditContext _editContext;

    public CustomFieldCssClassProvider(EditContext editContext)
    {
        _editContext = editContext;
    }

    public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
    {
        var hasErrors = editContext.GetValidationMessages(fieldIdentifier).Any();
        var isModified = editContext.IsModified(fieldIdentifier);

        // 匹配SyncFusion的错误/成功类名
        return isModified ? (hasErrors ? "e-error" : "e-success") : string.Empty;
    }
}

2. 保证FieldIdentifier路径完全匹配 #

由于你的字段存储在深层嵌套字典中，必须确保SyncFusion控件的绑定路径、ValidationMessage的For表达式、验证器的规则路径三者完全一致。

示例：正确的字段绑定与验证消息 #

<!-- FieldListPanel.razor 中字段控件 -->
<SfTextBox 
    @bind-Value="@CurrentPanel.Fields[FieldKey].Value"
    Placeholder="@FieldKey" />
<ValidationMessage For="@(() => CurrentPanel.Fields[FieldKey].Value)" />

验证器规则匹配 #

// PanelValidator.cs 中针对字段的验证规则
RuleForEach(p => p.Fields.Values)
    .SetValidator(field => new FieldValidator(field.Key));

// FieldValidator.cs
public class FieldValidator : AbstractValidator<FieldData>
{
    public FieldValidator(string fieldKey)
    {
        RuleFor(f => f.Value)
            .NotEmpty().WithMessage($"{fieldKey}不能为空")
            .MaximumLength(50).WithMessage($"{fieldKey}长度不能超过50");
    }
}

3. 兜底：手动触发字段状态变更（可选） #

如果上述步骤完成后CSS仍未更新，可在验证完成后手动通知EditContext字段状态变化：

修改验证器添加EditContext传递 #

// 在HandleEditContextChanged中绑定验证器时传递EditContext
var validator = new PanelLayoutValidator();
var validationContext = new ValidationContext<PanelLayoutData>(Model);
validationContext.RootContextData["EditContext"] = args.NewEditContext;
args.NewEditContext.AddFluentValidation(validator, validationContext);

在验证器中触发字段变更通知 #

public class PanelLayoutValidator : AbstractValidator<PanelLayoutData>
{
    public PanelLayoutValidator()
    {
        RuleForEach(x => x.Panels.Values).SetValidator(new PanelValidator());
    }

    public override ValidationResult Validate(ValidationContext<PanelLayoutData> context)
    {
        var result = base.Validate(context);
        if (context.RootContextData.TryGetValue("EditContext", out var editCtxObj) 
            && editCtxObj is EditContext editContext)
        {
            // 遍历错误字段，触发状态更新
            foreach (var error in result.Errors)
            {
                var fieldId = new FieldIdentifier(context.InstanceToValidate, error.PropertyName);
                editContext.NotifyFieldChanged(fieldId);
            }
        }
        return result;
    }
}

4. SyncFusion控件手动绑定CSS（应急方案） #

如果自动CSS应用仍失效，可直接根据验证结果动态绑定控件的CssClass：

<SfTextBox 
    @bind-Value="@CurrentPanel.Fields[FieldKey].Value"
    CssClass="@(_editContext.GetValidationMessages(() => CurrentPanel.Fields[FieldKey].Value).Any() ? "e-error" : "")" />

内容的提问来源于stack exchange，提问作者Mark Rabjohn