Introduction:
In Part 2 we created a page to fetch all the data in Blazor Client-Side application. Now we are going hands-on UPDATE Operation.
Update Operation:
Step 1:
In the "Pages" folder create a new razor file name it as "EditPlayer.razor".This page is used to update or edit the data in our Balzor Client-Side application. Now to navigate to this new page we need to add Blazor routing with "@page" directives. Add the routing code as below.
"PlayerId:int" is a placeholder in the URL, where the application expects numeric value in that place from the incoming requests. If we try to pass any string value in place of numeric, the application throws an error as no end found with your request.
"PlayerId" data get accessed in c# code by creating c# property with same name "PlayerId" and it should be decorated with attribute "[Parameter]" which can observe in following steps
Step 2:
Add the Html in "EditPlayer.razor" file as below
. "@bing" 2-way binding
. "@click" click events which invoke the method in c# code
Step 3:
C# code for updating data in the application, add the below code in "EditPlayer.razor" file
1. "PlayerId" gets route value, it is decorated with the "[Parameter]" attribute.
2. "private Player player = new Player();" player to be edited and it is used in HTML for 2-way binding
3. "OnInitializedAsync()" is Blazor life-cycle method, here we are going to load data to be edited.
Data gets loaded at the time of component initialization.
4. "UpdatePlayer()" method to update the data by calling API. This method gets invoked by "@click" event
Step 4:
After successful editing to view the data need to navigate to "http://localhost:5000/players" where all the data displayed. To navigate Blazor provides "NavigationManager" and it needs to be injected into our component. Also, we need to inject inject "IPlayerLogic.cs" which contains API call logics. Inject the following code in "EditPlayer.razor"
Step 5:
Now run the command "http://localhost:5000/players" and click on the edit button.
After clicking edit we navigated to edit component as shown below
Update any data and click on the update button after successfully updating navigate back to the players' page URL "http://localhost:5000/players"
Refer:
. Part-2
. Part-4
. API
. Source Code
In Part 2 we created a page to fetch all the data in Blazor Client-Side application. Now we are going hands-on UPDATE Operation.
Update Operation:
Step 1:
In the "Pages" folder create a new razor file name it as "EditPlayer.razor".This page is used to update or edit the data in our Balzor Client-Side application. Now to navigate to this new page we need to add Blazor routing with "@page" directives. Add the routing code as below.
@page "/player/edit/{PlayerId:int}"
"PlayerId:int" is a placeholder in the URL, where the application expects numeric value in that place from the incoming requests. If we try to pass any string value in place of numeric, the application throws an error as no end found with your request.
"PlayerId" data get accessed in c# code by creating c# property with same name "PlayerId" and it should be decorated with attribute "[Parameter]" which can observe in following steps
Step 2:
Add the Html in "EditPlayer.razor" file as below
<h4>Edit Player</h4> <form class="justify-content-center"> <div class="form-group row"> <label for="txtFirstName" class="col-sm-2 col-form-label">FirstName</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtFirstName" placeholder="First Name" @bind="@player.FirstName" /> </div> </div> <div class="form-group row"> <label for="txtLastName" class="col-sm-2 col-form-label">Last Name</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtLastName" placeholder="Last Name" @bind="@player.LastName" /> </div> </div> <div class="form-group row"> <label for="txtCurrentAge" class="col-sm-2 col-form-label">Current Age</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtCurrentAge" placeholder="Current Age" @bind="@player.CurrentAge" /> </div> </div> <div class="form-group row"> <label for="txtTeams" class="col-sm-2 col-form-label">Major Teams</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtTeams" placeholder="Teams" @bind="@player.Teams" /> </div> </div> <div class="form-group row"> <label for="txtPlayingRole" class="col-sm-2 col-form-label">Playing Role</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtPlayingRole" placeholder="Playing Role" @bind="@player.PlayingRole" /> </div> </div> <div class="form-group row"> <label for="txtBattingStyle" class="col-sm-2 col-form-label">Batting Style</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtBattingStyle" placeholder="Batting Style" @bind="@player.BattingStyle" /> </div> </div> <div class="form-group row"> <label for="txtBowlingStyle" class="col-sm-2 col-form-label">Bowling Style</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtBowlingStyle" placeholder="Bowling style" @bind="@player.BowlingStyle" /> </div> </div> <div class="form-group row"> <label for="txtImageName" class="col-sm-2 col-form-label">Image Name</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtImageName" placeholder="*.png or *.jpg" /> </div> </div> <div class="form-group row"> <div class="col-sm-8"> <button type="button" class="btn btn-primary" @onclick = "UpdatePlayer" >Update</button> </div> </div> </form>
. "@bing" 2-way binding
. "@click" click events which invoke the method in c# code
Step 3:
C# code for updating data in the application, add the below code in "EditPlayer.razor" file
@code { [Parameter] public int PlayerId { get;set; } private Player player = new Player(); protected override async Task OnInitializedAsync() { var result = await _playerLogic.GetById(PlayerId); player = result ?? new Player(); } private async Task UpdatePlayer() { bool status = await _playerLogic.UpdatePlayer(player); if(status) { _navigationManager.NavigateTo("players"); } } }
1. "PlayerId" gets route value, it is decorated with the "[Parameter]" attribute.
2. "private Player player = new Player();" player to be edited and it is used in HTML for 2-way binding
3. "OnInitializedAsync()" is Blazor life-cycle method, here we are going to load data to be edited.
Data gets loaded at the time of component initialization.
4. "UpdatePlayer()" method to update the data by calling API. This method gets invoked by "@click" event
Step 4:
After successful editing to view the data need to navigate to "http://localhost:5000/players" where all the data displayed. To navigate Blazor provides "NavigationManager" and it needs to be injected into our component. Also, we need to inject inject "IPlayerLogic.cs" which contains API call logics. Inject the following code in "EditPlayer.razor"
@page "/player/edit/{PlayerId:int}" @inject IPlayersLogic _playerLogic @inject NavigationManager _navigationManager
Step 5:
Now run the command "http://localhost:5000/players" and click on the edit button.
After clicking edit we navigated to edit component as shown below
Update any data and click on the update button after successfully updating navigate back to the players' page URL "http://localhost:5000/players"
Refer:
. Part-2
. Part-4
. API
. Source Code
Comments
Post a Comment