Skip to main content

Posts

Showing posts from March, 2023

Part-9 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Pagination

The main objective of the article is: Implements Pagination. Implement Pagination In API Project: Let's change our HTTP GET Endpoint where we have to fetch the total number of records in the API response. Let's create a new API response like 'SuperHeroesContainerDto'. API_Project/Dtos/SuperHeroesContainerDto.cs: namespace Dot7.Api.Dtos { public class SuperHeroesContainerDto { public int TotalCount { get; set; } public List<SuperHeroesDto> SuperHeroes { get; set; } } public class SuperHeroesDto { public int Id { get; set; } public string? Name { get; set; } public string? Franchise { get; set; } public string? Gender { get; set; } public string? ImageURL { get; set; } } } Here we have properties like 'TotalCount'  and a collection of  'SuperHeroesDto'. Install the Automapper NuGet package. Now create an auto mapper profiler class like 'AppMapperProfile.cs' in

Part-8 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Search

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") {

Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting

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'. Update the 'GetSuperHeroesAsync' method in the 'ISuperHeroesService' API_Project/Services/ISuperHeroesService.cs: Task<List<SuperHeroes>> GetSuperHeroesAsync(SuperHeroFiltersDto filters); Now implement the sorting logic in our 'SuperHeroesService.cs'. API_Project/Services/SuperHeroes Service .cs: public async Task<List<SuperHeroes>> GetSuperHeroesAsync(Sup

Part-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation

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 comp

Part-5 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Update Operation

The main objective of this article is: 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. Now let's add the action method in the 'SuperHeroesController'. Api_Project/Controllers/SuperHeroesController.cs: [HttpGet("{id}")] public async Task<IActionResult> GetAsync(int id) {

Part-4 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Create Operation

The main objectives of this article are: Implement HTTP Post Endpoint. In Blazor WebAssembly Create A Form Implement Insert Logic In Service Files In API Project: Let's add a method definition like 'CreateSuperHeroesAsync()' in 'ISuperHeroesService.cs' API_Project/Services/ISuperHeroesService.cs: Task<SuperHeroes> CreateSuperHeroesAsync(SuperHeroes newSuperHeroes); Let's implement the 'CreateSuperHeroesAsync()' in 'SuperHeroesService.cs' API_Project/Services/SuperHeroesService.cs: public async Task<SuperHeroes> CreateSuperHeroesAsync(SuperHeroes newSuperHeroes) { _myWorldDbContext.SuperHeroes.Add(newSuperHeroes); await _myWorldDbContext.SaveChangesAsync(); return newSuperHeroes; } Here we save the new item into the database. Create HTTP Post Endpoint In API Project: Let's add a new action method i.e HTTP Post endpoint in our 'SuperHeroesController.cs' API_Project/Controllers/SuperHeroesController.cs: [HttpPos

Part-3 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Read Operation

The main objectives of this article are: Create HTTP GET endpoint in API Project. Consume The GET API In Blazor WebAssembly Application Create A Service File And Implement Read Logic In API Project: Let's create a folder like 'Services' in our API project. Now add the 'ISuperHeroesService.cs' interface in the 'Services' folder. API_Project/Services/ISuperHeroesService.cs: using Dot7.Api.Data.Entities; namespace Dot7.Api.Services { public interface ISuperHeroesService { Task<List<SuperHeroes>> GetSuperHeroesAsync(); } } In the 'ISuperHeroesService' interface defined method definition like 'GetSuperHeroesAsync()'. Now add the 'SuperHeroesService.cs' class in the 'Services' folder. API_Project/Services/SuperHeroesService.cs: using Dot7.Api.Data.Entities; using Microsoft.EntityFrameworkCore; namespace Dot7.Api.Services { public class SuperHeroesService: ISuperHeroesService { priv