我正在尝试Microsoft Blazor,当使用表单和验证时,我停止了如何更改默认的CSS类,这些类将默认添加到InputText验证状态。如果InputText默认情况下出现错误,请使用类“invalid“,我想将该类更改为“is-invalid“我需要最佳实践。感谢StackOverflow社区
InputText
invalid
is-invalid
cyej8jka1#
现在可以自定义,请参见此处:https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#custom-validation-class-attributes
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"; } }
rqdpfwrv2#
任何HTML元素(或InputText)属性(包括类)都可以'单向'绑定到变量或表达式。因此,在您的情况下,您可以:
<input type="text" class="@((any_validation_condition)? "error_css_class" : "")" />
或者只是绑定到一个变量并在运行时设置该变量以反映元素合适的显示类。谢谢
xjreopfe3#
是的,它在Core 5.0中是可自定义的,但给出的示例不能正常工作。方法HandleSubmit必须将EditContext作为参数,并且自定义的FieldCssClassProvider必须在那里设置,而不是像示例中那样在OnInitialized()中设置。
HandleSubmit
EditContext
FieldCssClassProvider
OnInitialized()
private async Task HandleSubmit(EditContext context) { context.SetFieldCssClassProvider(new MyFieldClassProvider()); var isValid = context.Validate(); if (isValid) { //... } else { //... }
我的MyFieldClassProvider()返回“is-valid“和“is-invalid“,这与引导程序一起工作。
MyFieldClassProvider()
is-valid
e4eetjau4#
Blazor随意选择了invalid作为css类,用于基于InputBase<T>的项的验证,比如InputText。但是,您可以创建一个新的控件,比如MyInputText.razor,继承这些控件,创建自己的控件,并将中间代码放在适当的位置。在这种情况下,你可以用字符串替换CssClass属性(但要在前面加上空格字符!),用invalid替换is-invalid,和/或用valid替换is-valid。你可以创建一个helper方法,或者直接内联:
InputBase<T>
MyInputText.razor
CssClass
valid
@inherits Microsoft.AspNetCore.Components.Forms.InputText <input @attributes="@AdditionalAttributes" class="@CssClass.Replace(" valid", " is-valid").Replace(" invalid", " is-invalid")" @bind="@CurrentValueAsString" />
并像使用普通InputText:
<MyInputText @bind-Value="yourModel.Foo" class="form-control" />
lp0sw83n5#
作为对@user774031的补充回答:Blazor框架为隔离的css类添加一个Id,使它们的作用域为Razor组件,但由于此Id属性是在运行时添加的,它们不会添加到子InputComponent,因此使用css隔离定义的css类不适用,我们应该全局定义它们。要使它们作为隔离的css类工作,请按以下方式定义它们,例如:1-定义继承自FieldCssClassProvider的.Net类并覆盖其GetFieldCssClass方法。此方法应返回editcontext和fieldIdentifier对象中的某些string作为类名。
GetFieldCssClass
editcontext
fieldIdentifier
string
public class MyCustomeCSSProvider : FieldCssClassProvider { public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier) { string className = string.Empty; if (editContext.IsModified(fieldIdentifier)) { className += " modifiedField"; } if (editContext.GetValidationMessages(fieldIdentifier).Any()) { className += " invalidField"; } else { className += " validField"; } return className; } }
2-在OnInitialized生命周期中使用扩展方法为编辑上下文设置CssClassProvider:
OnInitialized
_context = new EditContext(student); _context.SetFieldCssClassProvider(new MyCustomeCSSProvider());
3-使用::deep在隔离的css文件中定义类,如下所示:
::deep
::deep .validField { border-color: lawngreen; } ::deep .invalidField { background-color: tomato; } ::deep .modifiedField { border: yellow dashed 2px; }
m2xkgtsf6#
这一次有点晚了,但为了给验证消息本身设置风格,我这样做了:
<div class="text-danger mt-2"> <ValidationMessage For="()=>_model.Field" ></ValidationMessage> </div>
6条答案
按热度按时间cyej8jka1#
现在可以自定义,请参见此处:https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#custom-validation-class-attributes
rqdpfwrv2#
任何HTML元素(或InputText)属性(包括类)都可以'单向'绑定到变量或表达式。因此,在您的情况下,您可以:
或者只是绑定到一个变量并在运行时设置该变量以反映元素合适的显示类。
谢谢
xjreopfe3#
是的,它在Core 5.0中是可自定义的,但给出的示例不能正常工作。方法
HandleSubmit
必须将EditContext
作为参数,并且自定义的FieldCssClassProvider
必须在那里设置,而不是像示例中那样在OnInitialized()
中设置。我的
MyFieldClassProvider()
返回“is-valid
“和“is-invalid
“,这与引导程序一起工作。e4eetjau4#
Blazor随意选择了
invalid
作为css类,用于基于InputBase<T>
的项的验证,比如InputText
。但是,您可以创建一个新的控件,比如MyInputText.razor
,继承这些控件,创建自己的控件,并将中间代码放在适当的位置。在这种情况下,你可以用字符串替换
CssClass
属性(但要在前面加上空格字符!),用invalid
替换is-invalid
,和/或用valid
替换is-valid
。你可以创建一个helper方法,或者直接内联:并像使用普通
InputText
:lp0sw83n5#
作为对@user774031的补充回答:Blazor框架为隔离的css类添加一个Id,使它们的作用域为Razor组件,但由于此Id属性是在运行时添加的,它们不会添加到子InputComponent,因此使用css隔离定义的css类不适用,我们应该全局定义它们。要使它们作为隔离的css类工作,请按以下方式定义它们,例如:1-定义继承自
FieldCssClassProvider
的.Net类并覆盖其GetFieldCssClass
方法。此方法应返回editcontext
和fieldIdentifier
对象中的某些string
作为类名。2-在
OnInitialized
生命周期中使用扩展方法为编辑上下文设置CssClassProvider:3-使用
::deep
在隔离的css文件中定义类,如下所示:m2xkgtsf6#
这一次有点晚了,但为了给验证消息本身设置风格,我这样做了: