The main objectives of this article are:
- Create A HTTP Delete Endpoint In API Project
- Consume HTTP Delete Endpoint In Blazor WebAssembly Application.
Create A HTTP Delete Endpoint In API Project:
Let's add a method definition like the 'DeleteSuperHeroesAsync()' method in the 'ISuperHeroesService'.
API_Project/Services/ISuperHeroesService.cs:
Task<int> DeleteSuperHeroesAsync(int id);Let's implement the 'DeleteSuperHeroesAsync()' method in the 'SuperHeroesService.cs'
API_Project/Services/SuperHeroesService.cs:
public async Task<int> DeleteSuperHeroesAsync(int id) { await _myWorldDbContext.SuperHeroes.Where(_ => _.Id == id).ExecuteDeleteAsync(); return id; }
- Here using entity framework core method 'ExecuteDeleteAsync' for deleting the item from the database.
Invoke The HTTP Delete Endpoint In The Blazor WebAssembly Application:
First, let's create a delete confirmation popup for that let's create a new component like 'SuperHeroesDeletePopup.razor' in 'Components/SuperHeroes'(new folders).
BlazorWasm_App/Components/SuperHeroes/SuperHeroesDeletePopup.razor:(HTML Part)
@inject HttpClient Http; <MudDialog> <DialogContent> Are you Sure to delete the item? </DialogContent> <DialogActions> <MudButton OnClick="Cancel">Cancel</MudButton> <MudButton Color="Color.Error" OnClick="ConfirmDeleteAsync">Delete</MudButton> </DialogActions> </MudDialog>
- (Line: 1) Injected the HttpClient instance
- Here we render the MudlBlazor dialog component. The 'Cancel' button click event is registered with the 'Cancel' method. The 'Delete' button click even registered with the 'ConfirmDeleteAsync'.
@code { [CascadingParameter] MudDialogInstance MudDialog{ get; set; } [Parameter] public int Id{ get; set; } private void Cancel() { MudDialog.Cancel(); } private async Task ConfirmDeleteAsync() { await Http.DeleteFromJsonAsync<int>($"/api/superheroes/{Id}"); MudDialog.Close(DialogResult.Ok(true)); } }
- (Lines: 2&3) Here 'MudDialogInstance' is 'CascadingParameter' that gives control over the MudBlazor dialog box.
- (Lines: 5&6) Here 'Id' is decorated with a 'Parameter' directive, so here 'Id' is the input parameter for the dialog box.
- (Line: 8-11) Here 'Cancel' method contains logic to invoke the 'Cancel' popup.
- (Line: 12-16) Here 'ConfirmDeleteAsync' method invokes the HTTP Delete endpoint.
BlazorWasm_Project/Pages/SuperHeroes/AllSuperHeroes.razor:(HTML Part)
@page "/superheroes/home" @inject HttpClient Http @inject NavigationManager navigation; @inject IDialogService _dialogService <MudContainer Class="ma-4"> <div class="d-flex ma-2 justify-center"> <MudFab Color="Color.Primary" Label="Add" @onclick="@(() => {navigation.NavigateTo("/superheroes/add");})" /> </div> <div class="d-flex flex-wrap justify-center"> @foreach (var item in allHeroes) { <MudCard Width="250px;" Class="ma-2"> <MudCardHeader> <CardHeaderAvatar> <MudAvatar Color="Color.Secondary">@item.Id</MudAvatar> </CardHeaderAvatar> <CardHeaderContent> <MudText Typo="Typo.body1">@item.Name</MudText> </CardHeaderContent> </MudCardHeader> <MudCardMedia Image="@(item.ImageURL)" Height="250" /> <MudCardContent> <MudText Typo="Typo.body2">Franchise - @item.Franchise</MudText> <MudText Typo="Typo.body2">Gender - @item.Gender</MudText> </MudCardContent> <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}");})" /> <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Delete" Color="Color.Primary" Size="Size.Large" Title="Delete" @onclick="@(() => {DeleteSuperHeroesAsync(item.Id);})" /> </MudCardActions> </MudCard> } </div> </MudContainer>
- (Line: 4)Injected the 'IDialogService'
- (Line: 31) Integrated the 'Delete' button and its click event registered with 'DeleteSuperHeroesAsync()' method.
@code { private List<SuperHeroesVM> allHeroes = new List<SuperHeroesVM>(); protected override async Task OnInitializedAsync() { await GetAllSuperHeroesAsync(); } private async Task GetAllSuperHeroesAsync() { allHeroes = await Http.GetFromJsonAsync<List<SuperHeroesVM>>("/api/superheroes"); } private async Task DeleteSuperHeroesAsync(int id) { var parameters = new DialogParameters(); parameters.Add("Id", id); var dialog = await _dialogService.ShowAsync<SuperHeroesDeletePopup>("Delete Confirmation", parameters, new DialogOptions{}); var result = await dialog.Result; if (!result.Canceled) { allHeroes = allHeroes.Where(_ => _.Id != id).ToList(); StateHasChanged(); } } }
- (Lines: 16-17) The 'DialogParmeters' object is to define the input parameters to the dialog modal. Here we pass the item 'id' we have to delete.
- (Line: 18) To open the MudBlazor dialog we have to use 'IDialogService.ShowAsync()'. Here type 'SuperHeroesDeletePopup' is the component we created above.
- (Line: 20) Here waiting for the 'IDialogReference.Result' which means click event of buttons on dialog popup.
- (Lines: 23&24) After HTTP Delete endpoint success, we remove the item from allHeroes. To refresh the UI changes we need to invoke the 'StateHasChanged'.
(Step 2)
Next article we will implement 'Sorting'.
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-5 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Update Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-5 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Update Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-8 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Search
Part-9 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Pagination
Part-9 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Pagination
I think you didn't mention the http delete method for the controller. Anyway, great blog article
ReplyDelete