Blazor #7 RankingApp(2)

 

@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. 데이터 추가 팝업

Ranking.razor

'Add'버튼을 누르면 AddGameResult()를 통해 팝업을 열어준다.

SaveGameResult : DB에 저장 작업

 

RankingService.cs

 

Ranking.razor

 

작업 결과

Add버튼을 통해 새로운 데이터를 추가한다.

새로 추가된 데이터가 db에도 잘 들어감