The main objective of the article is:
- Sorting
Add Sorting Changes To HTTP GET Endpoint In API Project:
Let's create a DTO(Data Transfer Object) like 'SuperHeroFilterDto' in 'Dtos' folder(new folder).
API_Project/Dtos/SuperHeroFilterDto.cs:
namespace Dot7.Api.Dtos { public class SuperHeroFiltersDto { public string? Sort { get; set; } public string? OrderBy { get; set; } } }
- The 'Sort' property can have a column name by which we want to sort.
- The 'OrderBy' property can have value like 'Asc' & 'Desc'.
API_Project/Services/ISuperHeroesService.cs:
Task<List<SuperHeroes>> GetSuperHeroesAsync(SuperHeroFiltersDto filters);Now implement the sorting logic in our 'SuperHeroesService.cs'.
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); } } return await superHereos.ToListAsync(); }
- (Line: 3) The 'AsQueryable' helps to add dynamic filtering to the query.
- (Line: 15-23) Here we conditionally apply our sorting.
API_Project/Controllers/SuperHeroesController.cs:
[HttpGet] public async Task<IActionResult> GetAsync([FromQuery] SuperHeroFiltersDto filters) { var results = await _superHeroesService.GetSuperHeroesAsync(filters); return Ok(results); }
Add Sorting Logic In Blazor WebAssembly Application:
Let's implement the sorting logic into the Blazor WebAssembly application.
BlazorWasm_Project/Pages/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"> <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> </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: 10-15) Added the MudBlazor dropdown with sorting options. The 'ValueChanged' event is registered with the 'DoSomething' method. The 'ValueChanged' event gets fired for dropdown value change.
@code { private List<SuperHeroesVM> allHeroes = new List<SuperHeroesVM>(); private string SortingKey { 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}"; 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: 3) The 'SortingKey' property is used to store the value from the sorting dropdown.
- (Line: 10-20) Here prepare the URL with query parameters.
- (Line: 22-44) The 'GetSortingValue()' method prepares 'Sort'(column name) and 'OrderBy'(Asc or Desc) based on the sorting dropdown value.
- (Line: 46-50) The 'DoSorting()' method is registered with our dropdown change event.
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-5 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Update Operation
Part-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation
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
Comments
Post a Comment