服务器端 Blazor 验证未更新 UI答案

【问题标题】：Server-side Blazor Validation Not Updating UI服务器端 Blazor 验证未更新 UI
【发布时间】：2020-07-26 05:49:12
【问题描述】：

我有一个表示表单的 Blazor 组件，它需要在提交之前执行一些昂贵的验证，以确保服务器上数据点的唯一性。我试图以此文档为灵感：https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

Microsoft 文档路线图中似乎有更好的文档：https://github.com/dotnet/AspNetCore.Docs/issues/17377

我的组件如下所示：

<EditForm Model="@form" OnValidSubmit="@Submit">
    <InputText @bind-Value="form.DataPoint" />
    <ValidationMessage For="() => form.DataPoint" />

    <button type="submit">Go!</button>
</EditForm>

@code {
    private Form form = new Form();
    private EditContext editContext;

    protected override void OnInitialized() 
    {
        editContext = new EditContext(form);
    }

    private async Task Submit()
    {
        var isValid = editContext.Validate() && await ServerValidate(editContext);
        if (isValid) 
        { 
            // do stuff 
        }
    }

    private async Task<bool> ServerValidate(EditContext editContext)
    {
        var form = (Form)editContext.Model;
        var validationErrors = new ValidationMessageStore(editContext);
        var isDataPointCollision = await SomeService.CheckUniqueness(form.DataPoint);
        if (isDataPointCollision)
        {
            var field = new FieldIdentifier(form, nameof(Form.DataPoint));
            validationErrors.Add(field, "This data point already exists, please type a different one");
            editContext.NotifyValidationStateChanged();
            return false;
        }
        return true;
    }
}

我的验证代码正常工作，检测到冲突，并阻止提交表单。但是，<ValidationMessage [...] /> 组件的 UI 不会按预期更新。根本不会发生 UI 更新，也不会显示验证消息。我也试过这个组件：

<ValidationSummary Model="@form" />

无济于事。

无论是在服务器端，还是在客户端 JS 中都没有错误。

我是不是用这种方法找错了树，还是我错过了某个地方的连接？有没有更好的方法来完成我想做的事情？

【问题讨论】：

标签： blazor

【解决方案1】：

您创建（并更新）一个未附加到 UI 表单的 EditContext。

将第一行改为（注意：无模型）：

 <EditForm EditContext="editContext"  OnValidSubmit="Submit">

您的其余代码可以保持原样，不需要 StateHasChanged() 或任何东西。

在您链接到的第一个文档页面上，搜索 "_editContext"

【讨论】：

这就是答案。谢谢 Henk - 我误读了文档中的示例，并错过了表单与编辑上下文相关联，而不是直接与模型相关联。

【解决方案2】：

验证后致电StateHasChanged：

    private async Task Submit()
    {
        var isValid = editContext.Validate() && await ServerValidate(editContext);
        if (isValid) 
        { 
            // do stuff 
        }
        StateHasChanged();
    }

注意：如果您可以访问那里的组件，或者在 editContext.NotifyValidationStateChanged() 中调用它。

【讨论】：

感谢您的回答。但是，这不会导致任何不同的行为。

【解决方案3】：

亨克的回答是正确的。几个补充

如果需要，请在 <EditForm> 下方添加 <DataAnnotationsValidator /> 和 <ValidationSummary /> 以用于由模型注释驱动的各个字段验证，以及表单摘要错误消息（除了每个字段之外的表单上方）。
将消息添加到字段 (validationErrors.Add(field, "This data point already exists, please type a different one");) 后，该消息将持续存在，并且将来的提交将被视为无效而被忽略。
此时只有OnInvalidSubmit() 会触发，因为上面的验证错误以及它与OnValidSubmit() 的配对。需要清除错误才能继续进行正常处理。
我只找到了一种蛮力清除错误的方法，那就是使用ClearError() 方法重新初始化EditContext：

    public void ClearErrors()
    {
        _editContext = new EditContext(form);
        isSubmitButtonDisabled = false;
        showClearErrors = false;
    }

然后我将它连接到一个在showClearErrors=true 时显示的按钮并禁用提交按钮。如果有更好的方法来清除错误，我会全力以赴。

【讨论】：