The main objective of this article is:
(Step 2)
- Create HTTP GET endpoint by 'Id' In API Project.
- Create HTTP PUT endpoint In API Project.
- Add The Update Form In Blazor Application.
Create HTTP GET By 'Id' Endpoint:
Let's add a method definition like 'GetSuperHeroesByIdAsync' in 'ISuperHeroesService'.
Api_Project/Services/ISuperHereosService.cs:
Task<SuperHeroes> GetSuperHeroesByIdAsync(int id);Now implement the 'GetSuperHeroesByIdAsync' method in 'SuperHeroesService'.
Api_Project/Services/SuperHeroesServices.cs:
public async Task<SuperHeroes> GetSuperHeroesByIdAsync(int id) { return await _myWorldDbContext.SuperHeroes.FirstOrDefaultAsync(x => x.Id == id); }
- Here fetch the item by 'id' from the database.
Api_Project/Controllers/SuperHeroesController.cs:
[HttpGet("{id}")] public async Task<IActionResult> GetAsync(int id) { var results = await _superHeroesService.GetSuperHeroesByIdAsync(id); return Ok(results); }
- Here is our endpoint to fetch the 'SuperHeroes' item by 'id' value.
Create A HTTP PUT Endpoint:
Let's add a method definition like 'UpdateSuperHeroesAsync' in 'IServiceSuperHeroes'.
Api_Project/Services/IServicesSuperHeroes.cs:
Task<SuperHeroes> UpdateSuperHeroesAsync(SuperHeroes updateSuperHeroes);Now implement the 'UpdateSuperHeroesAsync' method in 'ServiceSuperHeroes'.
Api_Project/Services/ServicesSuperHeroes.cs:
public async Task<SuperHeroes> UpdateSuperHeroesAsync(SuperHeroes updateSuperHeroes) { _myWorldDbContext.SuperHeroes.Update(updateSuperHeroes); await _myWorldDbContext.SaveChangesAsync(); return updateSuperHeroes; }
- Use the entity framework core 'Update' to save the data into the database.
Api_Project/Controllers/SuperHeroesController.cs:
[HttpPut] public async Task<IActionResult> PutAsync(SuperHeroes updateSuperHeroes) { var result = await _superHeroesService.UpdateSuperHeroesAsync(updateSuperHeroes); return Ok(result); }
Add A Form To Update The Item In Blazor WebAssembly:
Add a new blazor component like 'EditSuperHereos.razor' in 'Pages/SuperHeroes' folder.
Let's invoke the HTTP PUT endpoint in 'EditSuperHeroes.razor'.
BlazorWasm_Project/Pages/SuperHeroes/EditSuperHeroes.razor:(HTML Part)
@page "/superheroes/edit/{id:int}" @inject HttpClient Http @inject NavigationManager navigation <div class="ma-6 d-flex justify-center"> <MudChip Color="Color.Primary"> <h3>Update Super Hero</h3> </MudChip> </div> <div class="ma-6 d-flex justify-center"> <EditForm Model="@superHeroesFormModel" OnSubmit="UpdateAsync"> <MudCard Class="d-flex justify-center" Width="800px"> <MudCardContent Class="d-flex flex-column"> <MudTextField Label="Name" Class="mt-2" @bind-Value="superHeroesFormModel.Name" For="@(() => superHeroesFormModel.Name)" /> <MudTextField Label="Image URL" Class="mt-2" @bind-Value="superHeroesFormModel.ImageURL" For="@(() => superHeroesFormModel.ImageURL)" /> <MudSelect Margin="Margin.Dense" Class="mt-2" T="string" Label="Franchise" Variant="Variant.Text" @bind-Value="superHeroesFormModel.Franchise"> <MudSelectItem Value="@("dc")">DC</MudSelectItem> <MudSelectItem Value="@("marvel")">Marvel</MudSelectItem> </MudSelect> <MudField Label="Gender" Class="mt-2" Variant="Variant.Text" InnerPadding="false"> <MudRadioGroup T="string" @bind-SelectedOption="superHeroesFormModel.Gender"> <MudRadio T="string" Option="@("male")" Color="Color.Primary">Male</MudRadio> <MudRadio T="string" Option="@("female")" Color="Color.Primary">Female</MudRadio> <MudRadio T="string" Option="@("others")" Color="Color.Primary">Others</MudRadio> </MudRadioGroup> </MudField> <MudButton Variant="Variant.Filled" ButtonType="ButtonType.Submit" Color="Color.Primary" Class="mt-2">Update</MudButton> </MudCardContent> <MudCardContent Class="d-flex"> <div class="d-flex justify-center"> <MudImage ObjectFit="ObjectFit.Cover" Height="200" Width="250" Src="@superHeroesFormModel.ImageURL" Elevation="25" Class="rounded-lg" /> </div> </MudCardContent> </MudCard> </EditForm> </div>
- (Line: 1) Using '@page' directive defined route like '/superheroes/edit/{id:int}', here 'id' will be the dynamic route value.
- (Line: 2) Injected the 'HTTPClient' instance.
- (Line: 3) Injected the 'NavigationManger' instance.
- (Line: 5-40) Rendered our update form using mudblazor components.
- Here '@bind-value' enables 2way binding with text and dropdown component.
- Here '@bind-SelectedOption' enables 2way binding for radio button group component
- (Line: 12) The 'EditForm' is the blazor form component, we have to assign a model for the form by decorating the 'Model' attribute. Here form submission registered with the 'OnSubmit' event.
@code { SuperHeroesVM superHeroesFormModel = new SuperHeroesVM(); [Parameter] public int Id{ get; set; } protected override async Task OnInitializedAsync() { superHeroesFormModel = await Http.GetFromJsonAsync<SuperHeroesVM>($"/api/superheroes/{Id}"); } private async Task UpdateAsync() { await Http.PutAsJsonAsync<SuperHeroesVM>("/api/superheroes", superHeroesFormModel); navigation.NavigateTo("/superheroes/home"); } }
- (Lines: 3&4) Here 'Id' property is decorated with the 'Parameter' attribute to read the dynamic value from the URL.
- (Line: 5-8) Here 'OnInitializedAsync' is the life cycle method, here we invoke the HTTP GET by 'id' value endpoint to populate the edit form.
- (Line: 10-14) Here invoking the HTTP PUT endpoint to update the data.
Configure The Edit Button In 'AllSuperHeroes' Blazor Component:
Let's add an edit icon for each item in the 'AllSuperHeroes' component.
BlazorWasm_Project/Pages/SuperHeroes/AllSuperHeroes.razor:
<MudCardActions> <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Edit" Color="Color.Primary" Size="Size.Large" Title="Edit" @onclick="@(() => {navigation.NavigateTo($"/superheroes/edit/{item.Id}");})" /> </MudCardActions>(Step 1)
(Step 2)
(Step 3)
In the next article, we are going to implement the Update Operation.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on the.NET7 Blazor WebAssembly CRUD sample. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-2 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Create API Project
Part-3 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Read Operation
Part-3 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Read Operation
Part-4 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Create Operation
Part-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-8 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Search
Part-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-8 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Search
Comments
Post a Comment