ASP.NET-MVC-Study/BlazorApp/RankingApp/Pages/Ranking.razor

@page "/ranking"
@using RankingApp.Data.Models;
@using RankingApp.Data.Services;

@inject RankingService _rankingService;

<h3>Ranking</h3>

<AuthorizeView>
    <Authorized>
        @if (_gameResults == null)
        {
            <p><em>Loading...</em></p>
        }
        else
        {
            <table class="table">
                <thead>
                    <tr>
                        <th>User name</th>
                        <th>Score</th>
                        <th>Date</th>
                        <th>Update</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var gameResult in _gameResults)
                    {
                        <tr>
                            <td>@gameResult.UserName</td>
                            <td>@gameResult.Score</td>
                            <td>@gameResult.Date.ToShortDateString()</td>
                            <td>
                                <button class="btn btn-primary" @onclick="(() => UpdateGameResult(gameResult))">
                                    Edit
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-danger" @onclick="(() => DeleteGameResult(gameResult))">
                                    Delete
                                </button>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

            <p>
                <button class="btn btn-primary" @onclick="AddGameResult">
                    Add Result
                </button>
            </p>

            @if (_showPopup)
            {
                <div class="modal" style="display:block" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3 class="modal-title">Add/Update Game Result</h3>
                                <button type="button" class="btn btn-close" @onclick="ClosePopup"/>
                            </div>
                            <div class="modal-body">
                                <label for="UserName">User name</label>
                                <input class="form-control" type="text" placeholder="user name" @bind-value="_gameResult.UserName"/>
                                <label for="Score">Score</label>
                                <input class="form-control" type="text" placeholder="score" @bind-value="_gameResult.Score" />
                                <button class="btn btn-primary" @onclick="SaveGameResult">
                                    Save
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            }
        }
    </Authorized>
    <NotAuthorized>
        <p>You have no authorization to access.</p>
    </NotAuthorized>
</AuthorizeView>

@code {

    List<GameResult> _gameResults;

    bool _showPopup;
    GameResult _gameResult;

    protected async override Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        _gameResults = await _rankingService.GetGameResultsAsync();
    }

    void AddGameResult()
    {
        _showPopup = true;
        _gameResult = new GameResult() { Id = 0 };
    }

    async Task UpdateGameResult(GameResult gameResult)
    {
        _gameResult = gameResult;
        _showPopup = true;
    }

    async Task DeleteGameResult(GameResult gameResult)
    {
        var result = _rankingService.DeleteGameResult(gameResult);

        _gameResults = await _rankingService.GetGameResultsAsync();
    }

    void ClosePopup()
    {
        _showPopup = false;
    }

    async Task SaveGameResult()
    {
        ClosePopup();
        if (_gameResult.Id == 0)
        {
            _gameResult.Date = DateTime.Now;
            var result = _rankingService.AddGameResult(_gameResult);
        }
        else
        {
            var result = _rankingService.UpdateGameResult(_gameResult);
        }

        _gameResults = await _rankingService.GetGameResultsAsync();
    }
}