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

Question

我正在关注一本关于 Blazor web assembly 的书，我创建了一个简单的应用程序，可以使用 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？

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。

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

Client does not refresh ID of new object | ASP.NET core 5

c#

asp.net-core

blazor

blazor-webassembly