Skip to content

Instantly share code, notes, and snippets.

@malachib

malachib/ToDo.cshtml

Created June 4, 2018 23:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save malachib/753e8b3344a7284a313d5bee4eba0a03 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save malachib/753e8b3344a7284a313d5bee4eba0a03 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. malachib created this gist Jun 4, 2018.
    146 changes: 146 additions & 0 deletions ToDo.cshtml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,146 @@
    @page "/todo"
    @using Blazor1.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)
    {
    var hideOnEditing=$"display:{HideOnEditing(todo.ID)}";
    var showOnEditing=$"display:{ShowOnEditing(todo.ID)}";

    <tr>
    <td>
    <span style="@hideOnEditing">@todo.Item</span>
    <input style="@showOnEditing" bind="(todo.Item)" />
    </td>
    <td>
    <button style="@hideOnEditing" class="btn btn-primary" onclick=@(() => EditToDo(todo))>Edit</button>
    <button style="@showOnEditing" class="btn btn-success" onclick=@(async () => await UpdateToDo(todo))>Update</button>
    <button style="@showOnEditing" 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();
    }
    }