Blazor 表单验证 Bootstrap 集成

Question

我有一些 Razor 开发经验，决定尝试一下 Blazor。

我遇到了一个已经熟悉的问题 - 将验证与 Bootstrap 集成：Blazor 验证结果类与 Bootstrap 的结果类不匹配。

在 Razor 中，我可以通过将以下代码添加到 _ValidationScriptsPartial.cshtml 文件来覆盖生成的类名称：

const settings = {
    valid: 'is-valid',
    invalid: 'is-invalid'
    /* other classes go here */
}
$.validator.setDefaults(settings)
$.validator.unobtrusive.options = settings

我尝试寻找解决方案，但我发现的只是复制 Bootstrap 样式并替换类名（类似这样）。

是否有更好的方法来做到这一点，或者我是否必须复制所有 Bootstrap 验证样式才能将其与 Blazor 集成。我想避免这种情况，因为更新 Bootstrap 时，我将不得不再次执行相同的过程。

当您记得默认的 Blazor 应用模板已预先配置为与 Bootstrap 一起使用时，这个问题似乎更加奇怪。

Answer 1

刚刚遇到文档中的this部分。 它适用于

is-valid

和

is-invalid

课程。

我还发现了那篇关于如何在 25-30 行代码中实现自定义

ValidationMessage

的精彩文章。

Answer 2

以下是如何使用 自定义验证 CSS 类属性在 .NET 8 Blazor 和 Bootstrap v5 中执行此操作：

public class BootstrapValidationFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
    {
        bool isValid = editContext.IsValid(fieldIdentifier);
        bool isModified = editContext.IsModified(fieldIdentifier);

        // Blazor vs. Bootstrap:
        // isvalid = is-valid
        // isinvalid = is-invalid

        return $"{(isModified ? "modified " : "")}{(isValid ? "is-valid" : "is-invalid")}";
    }
}

private EditContext? editContext;

[SupplyParameterFromForm(FormName = "Form")]
private YourModel Model { get; set; } = new();

protected override void OnInitialized()
{
    editContext = new(Model);
    editContext.SetFieldCssClassProvider(new BootstrapValidationFieldClassProvider());
}

<EditForm EditContext="@editContext" FormName="Form">
<DataAnnotationsValidator />

@* Form contents... *@

<ValidationSummary />
</EditForm>