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>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var gameResult in _gameResults)
                    {
                        <tr>
                            <td>@gameResult.UserName</td>
                            <td>@gameResult.Score</td>
                            <td>@gameResult.Date.ToShortDateString()</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 };
    }

    void ClosePopup()
    {
        _showPopup = false;
    }

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

        }

        _gameResults = await _rankingService.GetGameResultsAsync();
        ClosePopup();
    }
}