ASP.NET Core CRUD operations Using MVC | WEB API | Angular 7 | Entity Framework

Introduction

Hi All, it's been a while since I wrote my last blog post. So I thought of writing a new blog post due to a special request I got !! (If he is reading this article, he must be laughing now !! ☺)

In this article, I am going to show you how to build CRUD Operations web application using:

• ASP.NET Core MVC
• WEB API
• Angular
• Entity Framework

You can download the complete source code for this tutorial from GitHub

Prerequisites

• .NET Core 2.1 SDK Download
• Visual Studio 2017 Download
• Node.js Download
• Angular 7
• SQL Server 2008 (or above)

Checking the installed versions

Run bellow commands to check out the versions:

Cmd to check .Net version:
dir %windir%\Microsoft.NET\Framework /AD

Cmd to check Node version:
npm -v

Cmd to check Angular version:
ng version

Creating SQL table

Next we’ll get the table created in SQL Server called “tblCustomer”.

Create table tblCustomer (      
    ID int IDENTITY(1,1) NOT NULL,      
    Name varchar(50) NOT NULL,      
    Country varchar(50) NOT NULL,      
    Email varchar(50) NOT NULL,      
    Gender varchar(6) NOT NULL      
)

Create MVC Application

Open Visual Studio and select File >> New >> Project

On the next window select “ASP.NET Core Web Application”

On the next window select “Angular” template

It will create the project with bellow folder structure:

Since this is an Angular related tutorial we are not going to create MVC views.

Next we are going to create few folders and files.

Create new Folder called “Models” and inside that create a new Class called “Customer.cs”

Customer.cs

https://github.com/patricksameerajayalath/CRUD-Operations/blob/master/Models/Customer.cs

Create new Folder called “EF” and inside that create a new Class called “DataContext.cs”

DataContext.cs

https://github.com/patricksameera/CRUDOperations/blob/master/CRUDOperations/EF/DataContext.cs

Create new Folder called “DataAccessLayer” and inside that create a new Class called “CustomerDataAccessLayer.cs”

CustomerDataAccessLayer.cs

https://github.com/patricksameerajayalath/CRUD-Operations/blob/master/DataAccessLayer/CustomerDataAccessLayer.cs

Create new Folder called “Controllers” and inside that create a new API Controller Class called “CustomerController.cs”

CustomerController.cs

https://github.com/patricksameerajayalath/CRUD-Operations/blob/master/Controllers/CustomerController.cs

Creating Angular Components

Inside the “app” folder add new Type Script file called “customerservice.service.ts” file under “app” folder

customerservice.service.ts

https://github.com/patricksameerajayalath/CRUD-Operations/blob/master/ClientApp/src/app/customerservice.service.ts

Inside the “app” folder create a new Folder called “addcustomer” and inside that create html and transcript file with bellow names:

• addcustomer.component.html
• addcustomer.component.ts

addcustomer.component.html

https://github.com/patricksameerajayalath/CRUD-Operations/blob/master/ClientApp/src/app/addcustomer/addcustomer.component.html

addcustomer.component.ts

https://github.com/patricksameerajayalath/CRUD-Operations/blob/master/ClientApp/src/app/addcustomer/addcustomer.component.ts

Inside the “app” folder create a new Folder called “getcustomer” and inside that create a html and transcript file with bellow names:

• getcustomer.component.html
• getcustomer.component.ts