.net Blazor更改验证默认CSS类名

eimct9ow  于 2022-11-19  发布在  .NET
关注(0)|答案(6)|浏览(128)

我正在尝试Microsoft Blazor,当使用表单和验证时,我停止了如何更改默认的CSS类,这些类将默认添加到InputText验证状态。
如果InputText默认情况下出现错误,请使用类“invalid“,我想将该类更改为“is-invalid
我需要最佳实践。
感谢StackOverflow社区

cyej8jka

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";
    }
}
rqdpfwrv

rqdpfwrv2#

任何HTML元素(或InputText)属性(包括类)都可以'单向'绑定到变量或表达式。因此,在您的情况下,您可以:

<input type="text" class="@((any_validation_condition)? "error_css_class" : "")" />

或者只是绑定到一个变量并在运行时设置该变量以反映元素合适的显示类。
谢谢

xjreopfe

xjreopfe3#

是的,它在Core 5.0中是可自定义的,但给出的示例不能正常工作。方法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“,这与引导程序一起工作。

e4eetjau

e4eetjau4#

Blazor随意选择了invalid作为css类,用于基于InputBase<T>的项的验证,比如InputText。但是,您可以创建一个新的控件,比如MyInputText.razor,继承这些控件,创建自己的控件,并将中间代码放在适当的位置。
在这种情况下,你可以用字符串替换CssClass属性(但要在前面加上空格字符!),用invalid替换is-invalid,和/或用valid替换is-valid。你可以创建一个helper方法,或者直接内联:

@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" />
lp0sw83n

lp0sw83n5#

作为对@user774031的补充回答:Blazor框架为隔离的css类添加一个Id,使它们的作用域为Razor组件,但由于此Id属性是在运行时添加的,它们不会添加到子InputComponent,因此使用css隔离定义的css类不适用,我们应该全局定义它们。要使它们作为隔离的css类工作,请按以下方式定义它们,例如:1-定义继承自FieldCssClassProvider的.Net类并覆盖其GetFieldCssClass方法。此方法应返回editcontextfieldIdentifier对象中的某些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:

_context = new EditContext(student);
_context.SetFieldCssClassProvider(new MyCustomeCSSProvider());

3-使用::deep在隔离的css文件中定义类,如下所示:

::deep .validField {
    border-color: lawngreen;
}

::deep .invalidField {
    background-color: tomato;
}
::deep .modifiedField {
    border: yellow dashed 2px;
}
m2xkgtsf

m2xkgtsf6#

这一次有点晚了,但为了给验证消息本身设置风格,我这样做了:

<div class="text-danger mt-2">
    <ValidationMessage For="()=>_model.Field" ></ValidationMessage>
</div>

相关问题