ASP.NET Core 5 Blazor WASM新增对象后ID不刷新问题求解

问题原因 #

你当前代码的逻辑是先将未携带数据库ID的任务对象添加到本地列表，再提交新增请求，请求成功后后端返回的带正式ID的任务对象没有同步到本地列表，因此前端一直显示ID的默认值0。

解决方法 #

修改AddTask方法即可，以下提供两种常用实现方案：

方案1：更新已添加的本地对象（适合需要提前展示新增项的场景）

请求成功后将后端生成的ID赋值给已加入列表的临时对象，接口报错时同步删除临时对象避免脏数据：

private async Task AddTask()
{
    if (!string.IsNullOrWhiteSpace(newTask))
    {
        TaskItem newTaskItem = new TaskItem
        {
            TaskName = newTask,
            IsComplete = false
        };
        tasks.Add(newTaskItem);

        string requestUri = "TaskItems";
        var response = await Http.PostAsJsonAsync(requestUri, newTaskItem);

        if (response.IsSuccessStatusCode)
        {
            newTask = string.Empty;
            var createdTask = await response.Content.ReadFromJsonAsync<TaskItem>();
            // 同步后端返回的正式ID
            newTaskItem.TaskItemId = createdTask.TaskItemId;
        }
        else
        {
            tasks.Remove(newTaskItem);
            error = response.ReasonPhrase;
        };
    };
}

方案2：请求成功后再添加对象到列表（更严谨，无脏数据风险）

等接口返回成功后，直接将带正式ID的返回对象加入本地列表：

private async Task AddTask()
{
    if (!string.IsNullOrWhiteSpace(newTask))
    {
        TaskItem newTaskItem = new TaskItem
        {
            TaskName = newTask,
            IsComplete = false
        };

        string requestUri = "TaskItems";
        var response = await Http.PostAsJsonAsync(requestUri, newTaskItem);

        if (response.IsSuccessStatusCode)
        {
            newTask = string.Empty;
            var createdTask = await response.Content.ReadFromJsonAsync<TaskItem>();
            tasks.Add(createdTask);
        }
        else
        {
            error = response.ReasonPhrase;
        };
    };
}

修改完成后Blazor会自动检测状态变更刷新UI，无需手动刷新页面即可显示正确ID，后续的更新、删除操作也能正常执行。

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