@page "/players"

<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

@code { private IList players = new List (); protected override async Task OnInitializedAsync() { var result = await _playerLogic.GetAll() ; players = result ?? new List (); } }

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; }

Task<IList<Player>> GetAll();

@page "/players" @inject IPlayersLogic _playerLogic

<div class="row"> <div class="col-12"> <a href="player/add" class="btn btn-primary btn-lg">Add Player</a> </div> </div> <br>

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.In the "pages" folder, add a new file name as "ShowPlayers.razor". Add players route in the file using "@page" directive as below.Run command "dotnet watch run" and navigate to "http://localhost:5000/players".Add the HTML to show all the cricket players that we had created in our application as below. "" property is accessed from c# code block "@code{}", it is a collection of players going to display on the page.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 belowNow in "PlayersLogic.cs " file we need to call API to get all player's data. So add the following in "PlayersLogic.cs" fileNow add the following code in "IPlayerLogic.cs" as belowNow inject "IPlayerLogic.cs" into the "ShowPlayers.razor" file as belowNow navigate to "http://localhost:5000/players" as shown belowFinally to create more players add a button at the top of the page.