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

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设置为编辑上下文，添加了在实际输入字段上自定义验证类的功能。但似乎仍然没有办法定制ValidationSummary或ValidationMessage组件的类

直接从.NET 5文档中截取

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

您可以更改wwwroot中css文件app.css中的validation-message类。或早期预览中的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 3

为什么不直接复制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 4

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

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