如何在Razor页面展示API并发处理Put请求的响应？

一、成功场景处理 #

请求成功时需完成两个核心操作：

• 同步页面数据，避免展示旧内容
• 给用户反馈操作成功的提示

二、错误场景处理 #

并发冲突触发时，需：

• 解析API返回的全局/字段级错误信息并展示
• 更新本地实体的ConcurrencyToken（API已返回最新令牌，不更新会导致后续提交仍触发冲突）
• 通过UI组件直观提示用户

修改后的完整代码示例 #

// 假设页面已注入RadzenNotification服务用于提示
[Inject]
public RadzenNotification Notification { get; set; }

// 假设页面绑定的项目列表
public IEnumerable<ProjetModel> Projects { get; set; }

async Task OnUpdateRow(ProjetModel newRow)
{
    var response = await client.PutAsJsonAsync("api/projetbe", newRow);             

    if (response.IsSuccessStatusCode)
    {
        // 1. 刷新页面对应行的最新数据
        var updatedProject = await client.GetFromJsonAsync<ProjetModel>($"api/projetbe/{newRow.Id}");
        if (updatedProject != null)
        {
            var projectList = Projects.ToList();
            var targetIndex = projectList.FindIndex(p => p.Id == newRow.Id);
            if (targetIndex != -1)
            {
                projectList[targetIndex] = updatedProject;
                Projects = projectList;
            }
        }

        // 2. 显示成功提示
        Notification.Notify(new NotificationMessage
        {
            Severity = NotificationSeverity.Success,
            Summary = "操作成功",
            Detail = "项目已更新",
            Duration = 3000
        });
    }
    else
    {
        var errorResponse = await response.Content.ReadFromJsonAsync<Dictionary<string, List<string>>>();
        if (errorResponse != null)
        {
            // 1. 获取最新实体并更新本地并发令牌
            var latestProject = await client.GetFromJsonAsync<ProjetModel>($"api/projetbe/{newRow.Id}");
            if (latestProject != null)
            {
                newRow.ConcurrencyToken = latestProject.ConcurrencyToken;
            }

            // 2. 遍历展示错误信息
            foreach (var kvp in errorResponse)
            {
                if (string.IsNullOrEmpty(kvp.Key))
                {
                    // 全局错误提示
                    Notification.Notify(new NotificationMessage
                    {
                        Severity = NotificationSeverity.Error,
                        Summary = "更新失败",
                        Detail = kvp.Value.FirstOrDefault(),
                        Duration = 5000
                    });
                }
                else
                {
                    // 字段级错误提示
                    foreach (var error in kvp.Value)
                    {
                        Notification.Notify(new NotificationMessage
                        {
                            Severity = NotificationSeverity.Warning,
                            Summary = $"字段错误: {kvp.Key}",
                            Detail = error,
                            Duration = 4000
                        });
                    }
                }
            }
        }
    }
}

替代方案：不用组件的纯页面提示 #

如果不使用RadzenNotification，可在页面添加绑定的错误区域：

@if (!string.IsNullOrEmpty(GlobalError))
{
    <div class="alert alert-danger mt-2">@GlobalError</div>
}

@foreach (var error in FieldErrors)
{
    <div class="alert alert-warning mt-1">@error</div>
}

然后在代码中定义对应属性并赋值：

public string GlobalError { get; set; }
public List<string> FieldErrors { get; set; } = new();

// 错误处理部分替换为：
foreach (var kvp in errorResponse)
{
    if (string.IsNullOrEmpty(kvp.Key))
    {
        GlobalError = kvp.Value.FirstOrDefault();
    }
    else
    {
        FieldErrors.AddRange(kvp.Value.Select(e => $"{kvp.Key}: {e}"));
    }
}

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