Introduction:
In Part 1 we have worked on the CREATE Operation page in blazor client-side application. Now here we going to discuss on the READ Operation in blazor client-side application.
Read Operation:
Step 1:
In the "pages" folder, add a new file name as "ShowPlayers.razor". Add players route in the file using "@page" directive as below.
Step 2:
Add the HTML to show all the cricket players that we had created in our application as below
. "players" property is accessed from c# code block "@code{}", it is a collection of players going to display on the page.
Step 3:
On Component loading, we need to fetch all the data from API. Blazor provides some life-cycle methods where we can load data on the fly. Here I'm using the "OnInitializedAsync()" life-cycle method to fetch all the data while component initialized. This method is run single time on component initialized only.
Now add the c# code in "ShowPlayers.razor" file to load data as below
Step 4:
Now in "PlayersLogic.cs " file we need to call API to get all player's data. So add the following in "PlayersLogic.cs" file
Step 5:
Now add the following code in "IPlayerLogic.cs" as below
Step 6:
Now inject "IPlayerLogic.cs" into the "ShowPlayers.razor" file as below
Step 7:
Now navigate to "http://localhost:5000/players" as shown below
Step 8:
Finally to create more players add a button at the top of the page.
Refer:
. Part-1
. Part-3
. Source Code
. API
In Part 1 we have worked on the CREATE Operation page in blazor client-side application. Now here we going to discuss on the READ Operation in blazor client-side application.
Read Operation:
Step 1:
In the "pages" folder, add a new file name as "ShowPlayers.razor". Add players route in the file using "@page" directive as below.
@page "/players"Run command "dotnet watch run" and navigate to "http://localhost:5000/players".
Step 2:
Add the HTML to show all the cricket players that we had created in our application as below
<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" >Delete</button> </div> </div> </div> } </div>
. "players" property is accessed from c# code block "@code{}", it is a collection of players going to display on the page.
Step 3:
On Component loading, we need to fetch all the data from API. Blazor provides some life-cycle methods where we can load data on the fly. Here I'm using the "OnInitializedAsync()" life-cycle method to fetch all the data while component initialized. This method is run single time on component initialized only.
Now add the c# code in "ShowPlayers.razor" file to load data as below
@code { private IListplayers = new List (); protected override async Task OnInitializedAsync() { var result = await _playerLogic.GetAll() ; players = result ?? new List (); } }
Step 4:
Now in "PlayersLogic.cs " file we need to call API to get all player's data. So add the following in "PlayersLogic.cs" file
public async Task<IList<Player>> GetAll() { HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, "https://localhost:44316/api/player/all"); HttpResponseMessage responseMessage = await _http.SendAsync(request); if (responseMessage.IsSuccessStatusCode) { string data = await responseMessage.Content.ReadAsStringAsync(); if (!string.IsNullOrEmpty(data)) { return JsonConvert.DeserializeObject<List<Player>>(data); } } return null; }
Step 5:
Now add the following code in "IPlayerLogic.cs" as below
Task<IList<Player>> GetAll();
Step 6:
Now inject "IPlayerLogic.cs" into the "ShowPlayers.razor" file as below
@page "/players" @inject IPlayersLogic _playerLogic
Step 7:
Now navigate to "http://localhost:5000/players" as shown below
Step 8:
Finally to create more players add a button at the top of the page.
<div class="row"> <div class="col-12"> <a href="player/add" class="btn btn-primary btn-lg">Add Player</a> </div> </div> <br>
Refer:
. Part-1
. Part-3
. Source Code
. API
Comments
Post a Comment