asp.net-core - 在 ASP.NET Core 中使用 ValidationMessage 时，我可以添加或更改默认的 CSS 类吗？

Question

我正在使用 验证消息 在 razor 组件中显示验证消息，如下所示:

<ValidationMessage For="@(() => ViewModel.CompanyNumber)" />

这将生成此 HTML 代码:

<div class="validation-message">The company number field is required.</div>

是否可以更改 CSS 类？我想使用除 validation-message 以外的其他东西.添加 class="myclass"被 Controller 忽略。我也试过 @attributes没有成功。

Answer 1

使用 .NET5，他们添加了在实际 上自定义验证类的功能。输入字段 (其中 issue 8695 是关于)通过设置 FieldCssClassProvider到编辑上下文。但是似乎仍然没有办法自定义 ValidationSummary 的类。或 ValidationMessage成分
直接剪自 .NET 5 docs

var editContext = new EditContext(model);
editContext.SetFieldCssClassProvider(new MyFieldClassProvider());

...

private class MyFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, 
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        return isValid ? "good field" : "bad field";
    }
}

使用它会为无效输入生成以下 html。至少有了这个，我们可以设置实际输入元素的样式。只是不是消息...

<input class="bad field" aria-invalid="">
<div class="validation-message">Identifier too long (16 character limit).</div>