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

Question

各位程序员大家好! :)

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

1. 在具有 EditForm 的组件中初始化自己的EditContext和ValidationMessageStore然后将 OnChange 绑定(bind)到自定义方法，该方法将执行正确的验证方法并在出现问题时添加验证消息。

2. 与之前的解决方案类似，但不是使用 EditForm 将其放在组件(或页面)内。 ，只需使用 CascadingParameter 创建一个自定义组件与 EditContext并让所有的魔法都发生在那里。

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

Answer 1

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

在客户端启动中初始化它

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

您要验证的类(class):

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

编辑 View 模型的页面:

@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 规则隐藏此组件的红色/绿色视觉效果。