@page "/ranking"
@using WebApplication1.Data.Models
@using WebApplication1.Data.Service
@inject RankingService RankingService
<h3>Ranking</h3>
<AuthorizeView>
<Authorized>
@if (_gameResults == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>UserName</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.ToString()</td>
</tr>
}
</tbody>
</table>
<p>
<button class="btn btn-primary" @onclick="AddGameResult">
Add
</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 GameResult</h3>
<button type="button" class="close" @onclick="ClosePopup">
<span ares-hidden="true">X</span>
</button>
</div>
<div class="modal-body">
<label for="UserName">UserName</label>
<input class="form-control" type="text" placeholder="UserName" @bind-value="_gameResult.UserName" />
<label for="UserName">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>NotAuthorized </p>
</NotAuthorized>
</AuthorizeView>
@code {
List<GameResult> _gameResults;
bool _showPopup;
GameResult _gameResult;
protected override async Task OnInitializedAsync()
{
_gameResults = await RankingService.GetGameResyltAsync();
}
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
{
//TODO
}
_gameResults = await RankingService.GetGameResyltAsync();
}
}
1. 데이터 추가 팝업
'Add'버튼을 누르면 AddGameResult()를 통해 팝업을 열어준다.
SaveGameResult : DB에 저장 작업
작업 결과
Add버튼을 통해 새로운 데이터를 추가한다.
새로 추가된 데이터가 db에도 잘 들어감
'게임서버' 카테고리의 다른 글
| Blazor #6 RankingApp(1) (0) | 2022.10.17 |
|---|---|
| Blazor #5 Templated ComponentJavascript (0) | 2022.10.14 |
| Blazor #4 Templated Component (0) | 2022.10.08 |
| Blazor Binding #3 Parameter, Ref, EventCallback (0) | 2022.09.19 |
| Blazor Binding #2 (0) | 2022.09.17 |
