客户端不刷新新对象的 ID | ASP.NET 核心 5答案

【问题标题】：Client does not refresh ID of new object | ASP.NET core 5客户端不刷新新对象的 ID | ASP.NET 核心 5
【发布时间】：2021-10-16 07:20:03
【问题描述】：

我正在关注一本关于 Blazor Web 程序集的书，并且我创建了一个简单的应用程序，它可以使用 HttpClient 服务的 JSON 帮助器方法添加、删除和更新任务。

当我添加一个新任务时，该任务的数据库 id 将在浏览器上显示为 0，直到页面被刷新。

Adding a task

After refreshing the page

在刷新页面之前，无法在添加项目后更新或删除项目，因为这些方法引用了不存在的任务 ID 0。

代码取自以下github repo：https://github.com/PacktPublishing/Blazor-WebAssembly-by-Example/tree/main/Chapter08

Index.razor：

@page "/"

@if (tasks == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="d-flex col col-lg-3 mb-4">
        <input placeholder="Enter Task" @bind="newTask" />
        <button class="btn btn-success"
                @onclick="@(AddTask)">
            Submit
        </button>
    </div>

    @foreach (var taskItem in tasks)
    {
        <div class="d-flex col col-lg-3 border-bottom"
             @key="taskItem">
            <div class="p-2 flex-fill">
                <input type="checkbox" checked="@taskItem.IsComplete" @onchange="@(()=> CheckboxChecked(taskItem))" />
                <span class="@((taskItem.IsComplete? "completed-task" : ""))">
                    @taskItem.TaskName
                    ID: @taskItem.TaskItemId
                </span>
            </div>
            <div class="p-1">
                <button class="btn btn-outline-danger btn-sm"
                        title="Delete task"
                        @onclick="@(()=> DeleteTask(taskItem))">
                    <span class="oi oi-trash"></span>
                </button>

            </div>
        </div>
    }
}

AddTask 方法

    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 task =
                    await response.Content.ReadFromJsonAsync
                        <TaskItem>();
            }
            else
            {
                error = response.ReasonPhrase;
            };
        };
    }

如何添加任务并让页面在首次加载时正确加载对象 ID？

【问题讨论】：

您的 API 调用需要返回某种包含新 ID 的对象。然后更新记录副本中的值。如果您需要一个工作示例，我会发布一个。就个人而言，我现在在小型数据库中使用 Guid 来获取记录 ID。它们使记录引用普遍唯一，您可以在代码中生成它们，并且不依赖于为您生成它们的数据库。
感谢@MrCakaShaunCurtis 的快速回复。 API 调用的 PoC 将不胜感激，因为我仍然是这方面的初学者。
既然你在下面有答案，我就把它留在这里。

标签： c# asp.net-core blazor blazor-webassembly

【解决方案1】：

您的 API 已经能够做到这一点，只需进行一些小的更改：

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

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

        if (response.IsSuccessStatusCode)
        {
            newTask = string.Empty;
            var task =
                await response.Content
                    .ReadFromJsonAsync<TaskItem>();

            tasks.Add(task);  // add this one
        }
        else
        {
            error = response.ReasonPhrase;
        };
    };
}

添加从后端返回的任务。这确保了一致性。
它会为您提供 ID。

【讨论】：