Skip to main content


Part-2 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Create API Project

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

Part-1 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Create Sample SQL Table & MudBlazor Project

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="

Angular(v15) | Sorting | Search | Pagination | On Material Card Items

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

A Demo On Clean Architecture | MediatR CQRS Pattern | .NET7 Web API

In this article, we will learn about 'Clean Architecture', 'CQRS Pattern With MediatR' by implementing in .NET7 Web API. Clean Architecture: The Clean Architecture comprises of: Domain Layer Application Layer Infrastructure Layer UI Layer Clean Architecture lives on the dependency inversion principle. In general business logic depends on the data access layer or infrastructure layer. But in clean architecture, it is inverted, which means the data access layer or infrastructure layers depends on the business logic layer(which means the Application Layer) . Domain Layer: the domain layer project will have 'Entities'(Domain Models), 'Domain Services', and 'Value Object'. This project is a parent project and it is independent on all other projects. Application Layer: the application layer project contains business logic files, DTOs, mapper, etc. This project can depend only on the 'Domain Layer Project'. Infrastructure Layer: the infrastruct