The main objective of this article is:
- Implement Search
Implement Search Logic In API Project:
Let's add a new query property in 'SuperHeroFilterDto'.
API_Project/Dtos/SuperHeroFilterDto.cs:
public class SuperHeroFiltersDto { public string? Sort { get; set; } public string? OrderBy { get; set; } public string? Search { get; set; } }In 'SuperHeroesService' let's add the filter logic.
API_Project/Services/SuperHeroesService.cs:
public async Task<List<SuperHeroes>> GetSuperHeroesAsync(SuperHeroFiltersDto filters) { var superHereos = _myWorldDbContext.SuperHeroes.AsQueryable(); if(!string.IsNullOrEmpty(filters.Sort) && !string.IsNullOrEmpty(filters.OrderBy)) { if(filters.Sort.ToLower() == "id" && filters.OrderBy.ToLower() == "asc") { superHereos = superHereos.OrderBy(_ => _.Id); } else if (filters.Sort.ToLower() == "id" && filters.OrderBy.ToLower() == "desc") { superHereos = superHereos.OrderByDescending(_ => _.Id); } else if (filters.Sort.ToLower() == "franchise" && filters.OrderBy.ToLower() == "asc") { superHereos = superHereos.OrderBy(_ => _.Franchise); } else if (filters.Sort.ToLower() == "franchise" && filters.OrderBy.ToLower() == "desc") { superHereos = superHereos.OrderByDescending(_ => _.Franchise); } } if (!string.IsNullOrEmpty(filters.Search)) { superHereos = superHereos.Where(_ => _.Franchise.ToLower() == filters.Search.ToLower()); } return await superHereos.ToListAsync(); }
- (Line: 25-28) Here filtering data based on the 'Franchise' column.
Implement Search Logic In Blazor WebAssembly Application:
Let's add the search box in 'AllSuperHeroes.razor'.
BlazorWasm_Project/Pages/SuperHeroes/AllSuperHeroes.razor:(HTML Part)
The lang-* class specifies the language file extensions. @page "/superheroes/home" @inject HttpClient Http @inject NavigationManager navigation; @inject IDialogService _dialogService <MudContainer Class="ma-4"> <div class="d-flex ma-2"> <MudGrid> <MudItem md="4"> <MudSelect Margin="Margin.Dense" Class="mt-2" T="string" Label="Sorting" Variant="Variant.Text" ValueChanged="DoSorting"> <MudSelectItem Value="@("id-by-desc")">ID BY Desc</MudSelectItem> <MudSelectItem Value="@("id-by-asc")">ID By Asc</MudSelectItem> <MudSelectItem Value="@("franchise-by-desc")">Franchise BY Desc</MudSelectItem> <MudSelectItem Value="@("franchise-by-asc")">Franchise By Asc</MudSelectItem> </MudSelect> </MudItem> <MudItem md="4"> <MudTextField @bind-Value="SearchKey" Label="Search" Variant="Variant.Text" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" OnAdornmentClick="GetAllSuperHeroesAsync" AdornmentColor="Color.Primary" /> </MudItem> </MudGrid> </div> <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: 18-20) Configured the search box, Here 'OnAdornmentClick' event of the search icon to which we registered our 'GetAllSuperHeroesAsync' method. The 'SearchKey' property is bound to the search box.
@code { private List<SuperHeroesVM> allHeroes = new List<SuperHeroesVM>(); private string SortingKey { get; set; } private string SearchKey{ get; set; } protected override async Task OnInitializedAsync() { await GetAllSuperHeroesAsync(); } private async Task GetAllSuperHeroesAsync() { var url = "/api/superheroes"; var sortingParams = GetSoringValues(); url = $"{url}?sort={sortingParams.Sort ?? string.Empty}&orderby={sortingParams.OrderBy ?? string.Empty}&search={SearchKey ?? string.Empty}"; allHeroes = await Http.GetFromJsonAsync<List<SuperHeroesVM>>(url); } private (string Sort, string OrderBy) GetSoringValues() { if (!string.IsNullOrEmpty(SortingKey)) { if (SortingKey.ToLower() == "id-by-desc") { return ("id", "desc"); } else if (SortingKey.ToLower() == "id-by-asc") { return ("id", "asc"); } else if (SortingKey.ToLower() == "franchise-by-desc") { return ("franchise", "asc"); } else if (SortingKey.ToLower() == "franchise-by-desc") { return ("franchise", "asc"); } } return (string.Empty, string.Empty); } private async Task DoSorting(string sortKey) { SortingKey = sortKey; await GetAllSuperHeroesAsync(); } 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(); } } }
- (Line: 4) The 'SearchKey' property is used to bind to the search box.
- (Line: 18) Here we add the 'search' query parameter.
In the next article, we will implement 'Pagination'.
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-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-9 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Pagination
Part-5 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Update Operation
Part-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-9 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Pagination
Comments
Post a Comment