Question

您好，程序员们！：）

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

在具有EditForm的组件中，初始化自己的EditContext和ValidationMessageStore，然后将OnChange绑定到自定义方法，该方法将执行适当的验证方法并添加验证消息，以防万一问题。
类似于先前的解决方案，但是没有使用EditForm将其放入组件（或页面）中，而是使用CascadingParameter和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规则隐藏该组件的红色/绿色外观。

Answer 2

这取决于项目。如果以下一项或多项是正确的，我将使用数字2：

您是否需要在应用程序中的其他地方重用相同的UI和逻辑？
您需要使用此页面的页面是复杂页面吗？ Like包含许多部分，这些部分使得没有组件方法的代码可读性和可维护性降低。
应用程序的其他页面是否将每个较小的部分分解为组件？（一致性很重要）

否则，第一是可以的。如果页面的复杂度随着时间的流逝而增加，您仍然可以将该部分重构为组件。

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

2 个答案: