Tech Seeker

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 .NET7 API Project Install Entity Framework Core Package Setup Database Context Create A .NET7 Web API Project: Let's create a sample .Net 7 API application to accomplish our demo. (Step 1) (Step 2) (Step 3) (Step 4) Install Entity Framework Core NuGet Package: Let's install the entity framework core package. Let's install the entity framework core SQL NuGet package. SQL Connection String: Let's prepare the SQL connection string. Sample SQL Connection String: Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=MyWorldDB;Integrated Security=True;Connect Timeout=30 Data Source - SQL server name. Initial Catalog - Database name Integrated Security -windows authentication. Connect Time -connection time period. Let's configure the connection string in 'appsettings.Development.json'. appsettings.Development.json: "ConnectionStrings": { "MyWorldDbConnection": "Data Source=(localdb)\\M

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?

In this article, we will render items using angular material card components and then implement 'Search', 'Sorting', and 'Pagination'. Create Angular(v15) Application: To accomplish our demo let's create the Angular(v15) application. Make sure to install the Angular CLI tool into our local machine because it provides easy CLI commands to play with the angular application npm install -g @angular/cli Run the below command to create Angular application ng new name_of_your_project Setup JSON Server(Fake API): Let's set up a fake API by setting up the JSON server on our local machine. Run the below command to install the JSON server globally onto your local system. npm install -g json-server Now go to our angular application and add a command to run the JSON server into the 'package.json' file. Now to invoke the above-added command run the below command in the angular application root folder. npm run json-server After running the above comm