根据服务方法/Web API 请求验证 Blazor 中的字段

Question

各位程序员朋友们好！:)

我最近一直在玩 Blazor（服务器端）并遇到了一个小问题。我正在尝试针对服务方法验证一个字段，这是一个返回 true/false 的简单 HTTP 请求。考虑使用/免费用户名样式检查。问题是，在 Blazor 中推荐的方法是什么。基本上，我想到了两种解决方案。

1. 在与组件EditForm初始化自己EditContext和ValidationMessageStore，然后结合的OnChange到将执行适当的验证方法，在发生问题的情况下，添加一个验证消息的自定义方法。

2. 与之前的解决方案类似，但不是使用 将其放在组件（或页面）中EditForm，只需使用CascadingParameterwith创建自定义组件，EditContext然后让所有魔法都发生在那里。

或者第三个，更简单的版本，我不知道。:)

Answer 1

如果要使用 FluentValidation，请添加对的包引用 PeterLeslieMorris.Blazor.FluentValidation

在客户端初始化 Startup

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddFormValidation(config =>
        {
            config
                .AddDataAnnotationsValidation()
                .AddFluentValidation(typeof(Startup).Assembly);
        });
    }

您要验证的课程：

public class Person
{
    [Required]
    public string Name { get; set; }
    public string EmailAddress { get; set; }
}

创建一个流畅的验证器：

public class PersonValidator : AbstractValidator<Person>
{
    private readonly HttpClient HttpClient;

    public PersonValidator(HttpClient httpClient)
    {
        HttpClient = httpClient;
        RuleFor(x => x.EmailAddress)
            .MustAsync(BeAvailable)
            .WithMessage("Email address is not available");
    }

    private Task<bool> BeAvailable(
        Person person,
        string emailAddress,
        PropertyValidatorContext context,
        CancellationToken cancellationToken)
    {
        return HttpClient.PostJsonAsync<bool>("/Person/IsEmailAddressAvailable", new { EmailAddress = emailAddress });
    }
}

您编辑视图模型的页面：

@page "/"
@using ViewModels;

    <EditForm Model=Person>
        <PeterLeslieMorris.Blazor.Validation.Validate />
        Name <InputText @bind-Value=Person.Name /><br />
        <ValidationMessage For=@(() => Person.Name) /><br />
        <br/>
        Email <InputText @bind-Value=Person.EmailAddress /><br />
        <ValidationMessage For=@(() => Person.EmailAddress) /><br />
        <br/>
        <input type="submit" value="Submit"/>
    </EditForm>


@code {
    Person Person = new Person();
}

最后，服务器端。我们需要一个带有 EmailAddress 属性的复杂对象来满足 ASP MVC 参数标准。

using Microsoft.AspNetCore.Mvc;

namespace BlazorApp13.Server.Controllers
{
    public class PersonController : Controller
    {
        [HttpPost]
        public bool IsEmailAddressAvailable([FromBody]RequestWithEmailAddress request)
        {
            bool available = (request.EmailAddress ?? "").ToLowerInvariant().IndexOf("available.com") > -1;
            return available;
        }
    }

    public class RequestWithEmailAddress
    {
        public string EmailAddress { get; set; }
    }
}

*已知错误：Blazor 不正式支持异步验证 - 因此InputText即使验证消息将出现/消失，组件的 CSS 状态也不会在有效/无效之间变化。因此，您可能希望使用 CSS 规则隐藏此组件的红色/绿色视觉效果。