ToDoWithoutJS.cshtml

@page "/anothertodo"
@using ASPNETBlazorCRUDApp.Shared
@inject HttpClient Http

<h1>ToDo List</h1>

<div>
    <div class="row">
        <div class="col-sm-1">
            <p>Item:</p>
        </div>
        <div class="col-sm-4">
            <input id="todoName" placeholder="Item Name" @bind(itemName)>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-1">
            <button class="btn btn-info" id="btnAdd" @onclick(async () => await AddToDo())>Add</button>
        </div>
        <div class="col-sm-2">
            @if (todos != null && todos.Count > 0)
            {
                <button class="btn btn-danger" @onclick(async () => await DeleteAllToDos())>Delete All</button>
            }
        </div>
    </div>
</div>
<br /><br />
@if (todos == null)
{
    <p><em>Loading...</em></p>
}
else
{
    @if (todos.Count > 0)
    {
        <table class='table table-striped table-bordered table-hover table-condensed' style="width:80%;">
            <thead>
                <tr>
                    <th style="width: 40%">Name</th>
                    <th style="width: 40%">Edit</th>
                    <th style="width: 20%">Delete</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var todo in todos)
                {
                    <tr>
                        <td>
                            <span style="display:@HideOnEditing(todo.ID);">@todo.Item</span>
                            <input style="display:@ShowOnEditing(todo.ID);" @bind(todo.Item) />
                        </td>
                        <td>
                            <button style="display:@HideOnEditing(todo.ID);" class="btn btn-primary" @onclick(() => EditToDo(todo))>Edit</button>
                            <button style="display:@ShowOnEditing(todo.ID);" class="btn btn-success" @onclick(async () => await UpdateToDo(todo))>Update</button>
                            <button style="display:@ShowOnEditing(todo.ID);" class="btn btn-primary" @onclick(() => CancelToDo())>Cancel</button>
                        </td>
                        <td><button class="btn btn-danger" @onclick(async () => await DeleteToDo(todo.ID))>Delete</button></td>
                    </tr>
                }
            </tbody>
        </table>
    }
}


@functions {

    string itemName;
    int SelectedID = -1;
    IList<ToDoList> todos = new List<ToDoList>();

    protected override async Task OnInitAsync()
    {
        await Refresh();
    }

    String ShowOnEditing(int _id)
    {
        return (SelectedID == _id) ? "" : "none";
    }

    String HideOnEditing(int _id)
    {
        return (SelectedID == _id) ? "none" : "";
    }

    private async Task Refresh()
    {
        todos = await Http.GetJsonAsync<ToDoList[]>("/api/ToDo");
        StateHasChanged();
    }

    private async Task AddToDo()
    {
        if (!string.IsNullOrEmpty(itemName))
        {
            await Http.SendJsonAsync(HttpMethod.Post, "/api/ToDo", new ToDoList
            {
                Item = itemName,
            });
            itemName = "";
            await Refresh();
        }
    }

    private async Task UpdateToDo(ToDoList todo)
    {
        if (!string.IsNullOrEmpty(todo.Item))
        {
            await Http.SendJsonAsync(HttpMethod.Put, $"/api/ToDo/{todo.ID}", todo);
            SelectedID = -1;
            await Refresh();
        }
    }

    private async Task DeleteToDo(int id)
    {
        await Http.DeleteAsync($"/api/ToDo/{id}");
        await Refresh();
    }

    private void EditToDo(ToDoList todo)
    {
        SelectedID = todo.ID;
    }

    private void CancelToDo()
    {
        SelectedID = -1;
    }

    private async Task DeleteAllToDos()
    {
        foreach (var c in todos)
        {
            await Http.DeleteAsync($"/api/ToDo/{c.ID}");
        }

        await Refresh();
    }
}