我正在关注一本有关 Blazor Web 程序集的书,并且创建了一个简单的应用程序,可以使用 HttpClient
服务的 JSON 帮助程序方法添加、删除和更新任务。
当我添加新任务时,该任务的数据库 ID 将在浏览器上显示为 0,直到刷新页面。
添加项目后更新或删除该项目只有在刷新页面后才能更新或删除,因为这些方法引用了不存在的任务 ID 0。
代码取自以下 github 存储库:https://github.com/PacktPublishing/Blazor-WebAssembly-by-Example/tree/main/Chapter08
索引.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 已经能够做到这一点,只需进行一些小更改即可:
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。
关于c# - 客户端不刷新新对象的ID | ASP.NET 核心 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69593545/