我正在關注一本關于 Blazor Web 程式集的書，我創建了一個簡單的應用程式，該應用程式可以使用服務的 JSON 幫助程式方法添加、洗掉和更新任務HttpClient。
當我添加一個新任務時，該任務的資料庫 ID 將在瀏覽器上顯示為 0，直到頁面重繪 。
添加任務
重繪 頁面后
添加后更新或洗掉專案直到我重繪 頁面后才能更新或洗掉，因為這些方法參考了不存在的任務 ID 0。
代碼取自以下 github 存盤庫：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>
}
}
添加任務方法
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？
uj5u.com熱心網友回復：
您的 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。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/318821.html