Blazor - (15) Blazor를 이용한 랭킹 앱 (4)

이전까지 작업에서 웹 페이지에서 DB로 데이터를 추가하고, 추가한 데이터도 웹 페이지에서 띄워보았습니다.

이번에는 웹 페이지에서 데이터를 삭제 / 수정하고 변경된 부분을 DB에 적용해보도록 하겠습니다.

 

1) RankingService 클래스

1 - 1) 수정(UPDATE)

 

새로운 UpdateGameResult 메서드를 추가하였습니다.

해당 메서드는 기존의 GameResult 데이터를 수정하기 위해 사용합니다.

인자로는 수정할 GameResult를 받습니다.

 

수정할 GameResult가 존재하지 않는다면 false를 리턴합니다.

수정할 GameResult가 DB에 존재한다면 UserName과 Score를 수정하고 true를 리턴합니다.

수정이 이뤄진 후, 메모리의 GameResult의 인스턴스와 DB의 GameResult의 데이터를 모두 업데이트합니다.

 

1 - 2) 삭제(DELETE)

 

새로운 DeleteGameResult 메서드를 추가하였습니다.

해당 메서드는 기존의 GameResult 데이터를 삭제하기 위해 사용합니다.

인자로는 수정할 GameResult를 받습니다.

 

삭제할 GameResult가 존재하지 않는다면 false를 리턴합니다.

삭제할 GameResult가 DB에 존재한다면

해당 데이터를 삭제하고 true를 리턴합니다.

 

2) Ranking 컴포넌트

 

HTML 스크립트에서 DB의 GameResult 데이터를 가져와서 테이블 형태로 보여주는 로직에서

각 데이터에 Edit과 Delete 버튼을 추가합니다.

 

 

C# 스크립트에서는 2개의 메서드를 추가합니다.

각각 UpdateGameResult 메서드와 DeleteGameResult 메서드입니다.

HTML 스크립트 별로 추가한 버튼에 의해 수행되는 메서드들로, 

UpdateGameResult 메서드는 인자로 받은 GameResult로 기존의 데이터를 수정하고

DeleteGameResult 메서드는 인자로 받은 GameResult를 DB에서 삭제합니다.

 

추가적으로 GameResult 데이터의 변경을 저장하는 SaveGameResult 메서드에서는

새로 추가되는 GameResult가 아닌, 수정되는 GameResult에 대한 로직을 추가하고

작업이 완료되면 팝업된 모달창을 닫는 로직을 추가하였습니다.

 

최종실행결과는 다음과 같습니다.

 

 

웹 페이지가 문제없이 동작하고 또, 동작 결과가 실제 데이터 테이블에 잘 적용된 것을 확인할 수 있습니다.