DevDiary

ASP.NET Core Web API CRUD with Angular 11

Description

This material is public and published on YouTube by "CodAffection".

It is a 2 hour tutorial titled "ASP.NET Core Web API CRUD with Angular 11".

The tutorial first builds the API in .NET Core and test the CRUD functions.

Then an Angular app is created and developed in VS code.

Finally, the angular app is connected the API and the CRUD functionality is tested again.

Tools used = .NET 5, Visual Studio, Entity Framewrk Core, Swagger, VS Code, Node, NPM, Angular, SQL Server Management Studio, etc.

Model: Payment Details

Packages: Entity Framework Core

DbContext

Connection String

StartUp

PM Console: Add-Migration "Initial"

Migration Added

PM Console: Update Database

Create Database

'Add Migration "Initial"', this command creates a migrations folder.

The migration file contains two methods.

One to upgrade the database and one to downgrade the database.

The "update database" command applies te latest migration.

In this case it executes the code inside the "initial" migations folder.

This creates the SQL database.

Database Design

Database Set to Generate Id's

API Controller: POST Method

Testing POST Method

This controller was created with "scaffolding".

Swagger was used to test the API endpoints.

Below I have entered data into the request body and posted it.

The resource was created successfully (201).

I created two more resources and then tested the "Get All" method.

Finally I checked the database aswell to see if it contained the data.

Swagger (POST): Enter Body

Swagger (POST): Resource Created

Swagger (GET): Get All Resources

Check Database Contains Data

CMD: Installed Node, Check Version

CMD: Check Version of NPM

CMD: Installed Angular, Check Version

CMD: Update NPM

CMD: Create Angular App

Tools: Node, NPM, Angular, VS Code

In order to keep following the tutorial I had to install node.js, npm manager, angular and VS code.

The Angular app was built in ""VS code"" whilst the .NET Core API was built in Visual Studio.

npm install npm@latest -g

ng new nameOfFile

ng g c payment-details -s --skip-tests

Generate Payment Details Component

ng g c payment-details-form -s --skip-tests

Generate Payment Detail Form Component

ng g s shared/payment-detail --skip-tests

Generate Payment Detail Model and Service

Add Bootstrap and FavIcons CDN

Strict Property Initialization: False

payment-detail.model.ts: class PaymentDetail

New PaymentDetail()

payment-detail-form.component.ts

Constructor: Dependency Injection

Inject service class into form component ts file (dependency injection constructor).

payment-detail-form.component.html

payment-detail-form.component.html

payment-details.component.ts

app.component.html

payment-details.component.html

payment-details.component.html

This inserts the form.

Import FormsModule

Added Title and Grid (1x2)

Added CSS

Compile and Run: Display Form

Form Validation 1

Form Validation 2

onSubmit()

postPaymentDetail()

Import HttpClientModule

Allow Cors (localhost:4200)

Submit Form Data to API

API has created Resource and saved to DB

Reset Form

Install Toastr Package

Import Toastr

Import Toastr

Import Toastr: Payment Detail Form

Import Toastr: Payment Detail Form

Submit Form Function: Success Message

Add Toastr CSS

Submit Form Function: Success Message

Get API Data: refreshList()

Get API Data: payment-details-component.ts

Get API Data: Display Table

Get API Data: Rendered Table

Database: Table

Click on Table Record

populateForm() Function

onSubmit Function

Update or Insert Record

The id field for te form is hidden.

If it is a POST, the id will be 0 which triggers "insertRecord".

If it is a PUT, the id will not be 0 which triggers "updateRecord".

Insert Method

Update Method

onDelete Function

deletePayment Detail

Add Toastr to Constructor

onDelete Function

Update Record

Delete Record