Introduction:
In Part 3 we have discussed on Update Operation using Blazor client-side application. Now we get hands-on Delete Operation in our sample application.
Delete Operation:
For a delete operation, we use a bootstrap modal for confirmation. Opening and closing of bootstrap in this sample we are going to use bootstrap js.
In Blazor not all the operations related to UI can't be done alone with c#, we need to use javascript in few areas. But invokation of the javascript method will be done from the c# method using JavaScript Interoperability.
Step 1:
Goto "wwwRoot" folder open index.html file add the bootstrap js links as shown below
Step 2:
Create "JS" folder under "wwwRoot" folder. Add a new file name as "external.js" under "JS" folder, link to the "index.html" page as below
Step 3:
Add the following code in external.js file
. "openModal" to show a bootstrap modal with modal template id name as the input parameter.
. "closeModal" to hide a bootstrap modal with modal template id name as the input parameter.
Step 4:
Update the "ShowPlayer.razor" file with the following Html content.
. "@onclick='@(e => CancelDeleteModal("delConfirmationModal"))'" in blazor to pass parameter to c# method, need to use lambda expression.
Step 5:
To communicate the javascript method from c# method blazor uses Javascript Interoperability. For that in "ShowPlayer.razor" we need to inject "IJSRuntime" as shown below
Step 6:
Now in c# code add a property name "ItemToDelete" where the item to delete id will be stored. Next, write a method to open a bootstrap modal to ask confirmation for item deletion. Here to open modal c# method call javascript using "IJSRuntime". Update "ShowPlayer.razor" with below code
Step 7:
Now click on delete button we can see modal as below
Step 8:
Update the "ShowPlayers.razor" to call delete method and modal close method as below
Step 9:
Now update the "PlayerLogic.cs" and "IPlayerLogic.cs" to communicate the delete API call as below
PlayerLogic.cs:
IPlayerLogic.cs :
Finally application with CRUD operation completed in Blazor.
Refer:
. Part-3
. API
. Source Code
In Part 3 we have discussed on Update Operation using Blazor client-side application. Now we get hands-on Delete Operation in our sample application.
Delete Operation:
For a delete operation, we use a bootstrap modal for confirmation. Opening and closing of bootstrap in this sample we are going to use bootstrap js.
In Blazor not all the operations related to UI can't be done alone with c#, we need to use javascript in few areas. But invokation of the javascript method will be done from the c# method using JavaScript Interoperability.
Step 1:
Goto "wwwRoot" folder open index.html file add the bootstrap js links as shown below
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Step 2:
Create "JS" folder under "wwwRoot" folder. Add a new file name as "external.js" under "JS" folder, link to the "index.html" page as below
<script src="js/external.js"></script>
Step 3:
Add the following code in external.js file
window.global = { openModal: function(name){ name = '#'+name; $(name).modal('show') }, closeModal: function(name){ name = '#'+name; $(name).modal('hide') } }
. "openModal" to show a bootstrap modal with modal template id name as the input parameter.
. "closeModal" to hide a bootstrap modal with modal template id name as the input parameter.
Step 4:
Update the "ShowPlayer.razor" file with the following Html content.
<div class="row"> <div class="col-12"> <a href="player/add" class="btn btn-primary btn-lg">Add Player</a> </div> </div> <br> <div class="row"> @foreach (var player in players) { <div class="col-sm-4"> <div class="card"> <img src="/images/player.jpg" class="card-img-top"> <div class="card-body"> <h4 Card-title>@player.FirstName @player.LastName</h4> </div> <ul class="list-group list-group-flush"> <li class="list-group-item"> <div class="row"> <div class="col-sm-6"> Age </div> <div class="col-sm-6"> @player.CurrentAge </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-sm-6"> Playing Role </div> <div class="col-sm-6"> @player.PlayingRole </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-sm-6"> Batting Style </div> <div class="col-sm-6"> @player.BattingStyle </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-sm-6"> Bowling Style </div> <div class="col-sm-6"> @player.BowlingStyle </div> </div> </li> </ul> <div class="card-body"> <a href="/player/edit/@player.Id" class="btn btn-primary">Edit</a> <button class="btn btn-danger" @onclick='@(e => OpenDeleteModal(@player.Id,"delConfirmationModal"))'>Delete</button> </div> </div> </div> } </div> <div class="modal fad" id="delConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="deleteModel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Warning!</h4> <button type="button" class="close" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Are you sure, you want to delete this item?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" @onclick='@(e => CancelDeleteModal("delConfirmationModal"))'>Close</button> <button type="button" class="btn btn-primary" @onclick='@(e => DeletePlayer("delConfirmationModal"))'>Ok</button> </div> </div> </div> </div>
. "@onclick='@(e => CancelDeleteModal("delConfirmationModal"))'" in blazor to pass parameter to c# method, need to use lambda expression.
Step 5:
To communicate the javascript method from c# method blazor uses Javascript Interoperability. For that in "ShowPlayer.razor" we need to inject "IJSRuntime" as shown below
@page "/players" @inject IJSRuntime _jsRunTime; @inject IPlayersLogic _playerLogic
Step 6:
Now in c# code add a property name "ItemToDelete" where the item to delete id will be stored. Next, write a method to open a bootstrap modal to ask confirmation for item deletion. Here to open modal c# method call javascript using "IJSRuntime". Update "ShowPlayer.razor" with below code
@code { private int ItemToDelete; public async Task OpenDeleteModal(int palyerId,string modelIdName) { ItemToDelete = palyerId; await _jsRunTime.InvokeAsync("global.openModal",modelIdName); } }
Step 7:
Now click on delete button we can see modal as below
Step 8:
Update the "ShowPlayers.razor" to call delete method and modal close method as below
@code { public async Task DeletePlayer(string modelIdName) { var result = await _playerLogic.DeleteById(ItemToDelete); players = result; ItemToDelete = 0; await _jsRunTime.InvokeAsync("global.closeModal",modelIdName); } public async Task CancelDeleteModal(string modelIdName) { await _jsRunTime.InvokeAsync ("global.closeModal",modelIdName); } }
Step 9:
Now update the "PlayerLogic.cs" and "IPlayerLogic.cs" to communicate the delete API call as below
PlayerLogic.cs:
public async Task<List<Player>> DeleteById(int id) { string url = $"https://localhost:44316/api/player/delete?id={id}"; HttpRequestMessage requestMessage = new HttpRequestMessage(HttpMethod.Delete,url); HttpResponseMessage responseMessage = await _http.SendAsync(requestMessage); if(responseMessage.IsSuccessStatusCode) { string data = await responseMessage.Content.ReadAsStringAsync(); if(!string.IsNullOrEmpty(data)) { return JsonConvert.DeserializeObject<List<Player>>(data); } } return null; }
IPlayerLogic.cs :
Task<List<Player>> DeleteById(int id);
Finally application with CRUD operation completed in Blazor.
Refer:
. Part-3
. API
. Source Code
Comments
Post a Comment