Blazor 更改验证默认 CSS 类名称答案

【问题标题】：Blazor Change Validation default CSS class namesBlazor 更改验证默认 CSS 类名称
【发布时间】：2019-10-02 10:29:03
【问题描述】：

我正在尝试 Microsoft Blazor，在处理表单和验证时，我停止了如何更改默认情况下将添加到 InputText 验证状态的默认 CSS 类。

当InputText默认有错误时的解释拿类“invalid”我想把这个类改成“is-invalid”

我需要最佳实践。

感谢 StackOverflow 社区

【问题讨论】：

好问题 - 微软太以 Bootstrap 为中心:)

标签： c# .net asp.net-core blazor blazor-validation

【解决方案1】：

现在可以自定义，请参见此处：https://docs.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";
    }
}

【讨论】：

谢谢。这也解决了我的问题。

【解决方案2】：

包括类在内的任何 HTML 元素（或 InputText）属性都可以“单向”绑定到变量或表达式。所以在你的情况下，你可以这样做：

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

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

谢谢

【讨论】：

感谢@Samer_Awajan，你是对的，但我认为这不是我需要更改默认 css 类本身的最佳解决方案。当前呈现为但我需要这个
@EngrRslan 但我认为这就是这里刚刚解释的内容
我明白你的意思。似乎无效输入的 css 类作为一种约定被粘在验证逻辑中。我研究了组件的 SDK，但找不到修改此约定“无效”的方法。所以，我认为你有两个选择，要么将“无效”的 css 修改为“is-invalid”，以便获得预期的外观，或者自行对模型进行自定义验证并控制上面提到的 css 类。谢谢

【解决方案3】：

是的，它在 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”，这适用于 Bootstrap。

【讨论】：

【解决方案4】：

Blazor 已任意选择 invalid 作为基于 InputBase<T> 的项目验证的 css 类，例如 InputText。但是，您可以创建一个像 MyInputText.razor 这样的新控件，继承自这些控件并制作您自己的控件并放置中间代码。

在这种情况下，您可以将CssClass 属性替换为 is-invalid 和/或 valid 以替换 invalid 和/或 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" />

【讨论】：

【解决方案5】：

作为@user774031 答案的补充： Blazor 框架向独立的 css 类添加了一个 Id，以使其范围限定为 Razor 组件，但由于此 Id 属性是在运行时添加的，因此它们不会添加到子 InputComponent，因此使用 css 隔离定义的 css 类不适用，我们应该全局定义它们.为了使它们作为独立的 css 类工作，例如如下定义它们： 1- 定义一个继承自FieldCssClassProvider 并覆盖其GetFieldCssClass 方法的.Net 类。这种方法应该从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：

_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;
}

【讨论】：