客户端没有刷新新对象的ID | ASP.. NET core 5

Question

我正在阅读一本关于Blazor web assembly的书，我已经创建了一个简单的应用程序，可以使用HttpClient服务的JSON helper方法添加，删除和更新任务。

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

添加任务

刷新页面后

在添加项之后更新或删除项是不可能的，直到我刷新页面之后，因为这些方法引用了一个不存在的任务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>
}
}

<<p>AddTask方法/strong>

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在第一次加载?

Answer 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。