Tech Seeker

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

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

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

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

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

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

The main objectives of this article are: Create A Sample SQL Table. Create Blazor WebAssembly Application Script To Create Sample Table: Let's create a sample table like 'SuperHeroes' by running the following command. CREATE TABLE SuperHeroes ( Id INT IDENTITY(1,1) NOT NULL, Name VARCHAR(200) NULL, Franchise VARCHAR(20) NULL, Gender VARCHAR(20) NULL, ImageURL VARCHAR(1000) NULL CONSTRAINT PK_SuperHeroes PRIMARY KEY (Id) ) Create A Blazor WebAssembly(.NET 7) Application: Let's create a sample Blazor WebAssembly(.NET7) application. To create .NET7 application we can use either 'Visual Studio 2022' or 'Visual Studio Code' editor.  (Step 1) (Step 2) (Step 3) (Step 4) Configure MudBlazor UI Library: Install the MudBlazor NuGet package. Add the MudBlazor namespace in '_Imports.razor'. _Imports.razor: @using MudBlazor Add the below CSS into the closing head tag in 'wwwroot/index.html'. <link href="https://fonts.googleapis.com/css?