I'm following a book on Blazor web assembly, and I have created a simple app that can add, delete and update tasks using the JSON helper methods for the HttpClient service.

When I add a new task, the database id of that task will be shown as 0 on the browser until the page is refreshed.

Adding a task

After refreshing the page

Updating or deleting the item after adding it is impossible until after I refresh the page, since the methods refer to a nonexistent Task ID of 0.

The code is taken from the following 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 method

    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;
            };
        };
    }

How can I add a Task and have the page properly load the object ID on first load?

CodePudding user response：

Your API is already able to do this, just make a few changes:

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;
        };
    };
}

You add the task that comes back from the backend. That ensures consistency. And it gives you the Id.