Question

我在剃刀组件中使用 ValidationMessage 来显示验证消息，如下所示：

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

这会生成以下HTML代码：

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

是否可以更改CSS类？我想使用validation-message以外的其他名称。控制器将忽略添加class="myclass"。我也尝试过@attributes，但没有成功。

Answer 1

在 .NET5 中，他们通过将 FieldCssClassProvider 设置为编辑添加了功能来自定义实际输入字段（issue 8695 是关于）上的验证类语境。但是似乎仍然无法自定义 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>

Answer 2

您为什么不直接复制 ValidationMessage.cs 的代码并写入您自己的属性中？除了捕获级联参数之外，这个类没有什么特别之处。只需获取此文件并使用稍微不同的名称创建自己的文件，然后添加：

[Parameter] public string AdditionalClassNames {get;set;}

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    foreach (var message in CurrentEditContext.GetValidationMessages(_fieldIdentifier))
    {
        builder.OpenElement(0, "div");
        builder.AddMultipleAttributes(1, AdditionalAttributes);
        builder.AddAttribute(2, "class", string.IsNullOrEmpty(AdditionalClassNames) ? "validation-message" : $"validation-message {AdditionalClassNames}");
        builder.AddContent(3, message);
        builder.CloseElement();
    }
}

https://github.com/dotnet/aspnetcore/blob/master/src/Components/Web/src/Forms/ValidationMessage.cs

编辑

更好的是，它不是密封的！只需将其用作新版本的基类并添加我上面提到的内容即可。

Answer 3

您可以在wwwroot的css文件validation-message中更改app.css类。或site.css在较早的预览中。

.validation-message {
    color: red;
}

该类已在ValidationMessage.cs

中设置

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    foreach (var message in CurrentEditContext.GetValidationMessages(_fieldIdentifier))
    {
        builder.OpenElement(0, "div");
        builder.AddMultipleAttributes(1, AdditionalAttributes);
        builder.AddAttribute(2, "class", "validation-message");
        builder.AddContent(3, message);
        builder.CloseElement();
    }
}

https://github.com/dotnet/aspnetcore/blob/master/src/Components/Web/src/Forms/ValidationMessage.cs

Answer 4

在ASP.NET Core 3.1中是不可能的。希望它将包含在下一个主要版本中，请参阅此功能请求：

https://github.com/dotnet/aspnetcore/issues/8695

将ValidationMessage与自定义CSS类一起使用

4 个答案:

编辑