Blazor服务端调用WebAPI时如何传递ModelState错误

要让Blazor显示WebAPI返回的ModelState错误，需要完成两件核心工作：在WebAPI中把错误正确关联到对应的模型属性，以及在Blazor中捕获API错误并同步到EditForm的验证状态里。

1. 修正WebAPI的错误关联逻辑 #

你当前的代码是用Identity错误的Code作为ModelState的键（比如PasswordTooShort），但这些错误码并不是UserViewModel的属性名，导致Blazor无法把错误对应到输入字段上。需要把错误关联到正确的属性键：

else
{
    _logger.LogWarn("ApplicationUser object could not be created");
    foreach (var error in result.Errors)
    {
        string targetProperty = string.Empty;
        // 根据错误类型匹配对应的模型属性
        if (error.Code.StartsWith("Password"))
        {
            targetProperty = nameof(UserViewModel.Password);
        }
        else if (error.Code.StartsWith("UserName") || error.Code == "DuplicateUserName")
        {
            targetProperty = nameof(UserViewModel.UserName);
        }
        else if (error.Code == "DuplicateEmail")
        {
            targetProperty = nameof(UserViewModel.Email);
        }

        if (!string.IsNullOrEmpty(targetProperty))
        {
            ModelState.AddModelError(targetProperty, error.Description);
        }
        else
        {
            // 无法关联到属性的错误，添加为全局模型错误
            ModelState.AddModelError(string.Empty, error.Description);
        }
    }
    return BadRequest(ModelState);
}

这样处理后，ModelState的键就和UserViewModel的属性名完全匹配，Blazor才能把错误精准显示到对应的输入框下方。

2. 在Blazor中处理API错误并更新验证状态 #

Blazor的EditForm默认只处理客户端验证，所以需要手动捕获API的错误响应，把错误注入到EditContext中，让UI自动更新显示这些错误。

步骤2.1：获取EditForm的EditContext #

给你的EditForm添加@ref来获取实例引用：

<EditForm @ref="_editForm" Model="@_user" OnValidSubmit="@Update">
    <!-- 原有表单内容 -->
</EditForm>

在组件代码里定义对应的变量：

private EditForm _editForm;

步骤2.2：修改Update方法处理API错误 #

更新你的Update方法，捕获API的BadRequest响应，解析错误并添加到EditContext：

private async Task Update()
{
    // 先清除之前的服务器端验证消息
    var editContext = _editForm.EditContext;
    editContext.ClearValidationMessages();

    try
    {
        HttpResponseMessage response;
        if (!string.IsNullOrEmpty(id))
        {
            response = await apiClient.PutAsJsonAsync($"api/users/{id}", _user);
        }
        else
        {
            response = await apiClient.PostAsJsonAsync("api/users", _user);
        }

        if (response.IsSuccessStatusCode)
        {
            UriHelper.NavigateTo("admin/users");
            return;
        }

        // 处理BadRequest类型的错误
        if (response.StatusCode == HttpStatusCode.BadRequest)
        {
            var modelStateErrors = await response.Content.ReadFromJsonAsync<Dictionary<string, string[]>>();
            if (modelStateErrors != null)
            {
                foreach (var errorEntry in modelStateErrors)
                {
                    // 创建字段标识符，关联到对应属性或全局模型
                    var fieldIdentifier = string.IsNullOrEmpty(errorEntry.Key)
                        ? new FieldIdentifier(_user, string.Empty)
                        : new FieldIdentifier(_user, errorEntry.Key);

                    // 添加每个错误消息到验证上下文
                    foreach (var errorMessage in errorEntry.Value)
                    {
                        editContext.AddValidationMessage(fieldIdentifier, errorMessage);
                    }
                }
            }
        }
        else
        {
            // 其他错误类型，添加全局提示
            editContext.AddValidationMessage(
                new FieldIdentifier(_user, string.Empty), 
                $"请求失败：{response.ReasonPhrase}"
            );
        }

        // 通知UI验证状态已更新
        editContext.NotifyValidationStateChanged();
    }
    catch (HttpRequestException ex)
    {
        // 处理网络异常
        editContext.AddValidationMessage(
            new FieldIdentifier(_user, string.Empty), 
            $"网络错误：{ex.Message}"
        );
        editContext.NotifyValidationStateChanged();
    }
}

补充：如果使用Refit等强类型客户端 #

如果你的apiClient是用Refit生成的，可以捕获ApiException来处理错误：

catch (ApiException ex) when (ex.StatusCode == HttpStatusCode.BadRequest)
{
    var modelStateErrors = JsonSerializer.Deserialize<Dictionary<string, string[]>>(ex.Content);
    // 后续添加错误到EditContext的逻辑和上面一致
}

最终效果 #

现在当WebAPI返回ModelState错误时，Blazor会自动把这些错误添加到EditContext中，ValidationSummary会显示所有错误，对应的输入框下方也会显示专属的错误提示，和客户端DataAnnotations验证的体验完全一致。

内容的提问来源于stack exchange，提问作者Rabbitslayer