Database first in .Net Core 2.0 step by step: Angular 4 + Core 2.0 CRUD operation Part I

In my previous post, I have explained how to create an Angular 5 application in Visual Studio 2017 using .Net Core templates which you can find here.

If you want to know more about Angular in .Net Core then my post may help you to get the basic which you can find here and if you want to see how can we deploy the Angular applications on Azure then have a look at my post here.

In this series of posts, I will explain the Create, Read, Update, Delete(CRUD) using Angular 5 with .Net Core 2 API.

In this part I post, we will see how to do Database first set up in Angular(.Net Core 2.0 project) and will set up the Employee API.

prerequisite:

• Visual studio 2017  community edition, download here
• .Net Core 2.0 SDK  from here (I have written a post to install SDK here)

Create the Angular application using .Net Core 2.0 template in VS 2017

Once you have all these installed, open your Visual Studio 2017 -> Create New Project -> Select Core Web application:

Click on Ok and in next window, select Angular as shown below:

Visual Studio will create a well-structured application for you(Note that I have manually added Models folder as we will require this in future):

I will not go deep into the Angular structure in this post but if you require more details then I have written a detailed post on Angular and .Net Core 2.0 which you find here.

Once you run the application on  IISExpress , it will have the landing page as below:

Creation of Employee Database

Let us Create Employee database in SQL, you can use below queries to create the database and table:

CREATE DATABASE AngularCRUDTest; CREATE TABLE Employees
( StudentId [bigint] IDENTITY(1,1) NOT NULL, EmpName varchar(50), EmpAge int, EmpCity varchar(50), EmpCountry varchar(50), CONSTRAINT [PK_Student] PRIMARY KEY CLUSTERED ( [StudentId] ASC
)
); INSERT INTO Employees
(EmpName, EmpAge, EmpCity, EmpCountry)
VALUES
('Neel', 27, 'Pune', 'India'); INSERT INTO Employees
(EmpName, EmpAge, EmpCity, EmpCountry)
VALUES
('Neel2', 27, 'Pune', 'India'); INSERT INTO Employees
(EmpName, EmpAge, EmpCity, EmpCountry)
VALUES
('Neel3', 27, 'Pune', 'India');

Once the database is created successfully. it will look as below:

Add EntityFramework references

Once the database is created, let us add EntityFrameworkCore.SqlServer(Microsoft SQL Server database provider for Entity Framework Core), this will help us to go further with EntityFramework operations.

Search with “ Microsoft.EntityFrameworkCore.SqlServer ” in Nuget Package Manager and click on Install:

As we are going to use Database First development approach, we need to install the additional packages below as well:

• Microsoft.EntityFrameworkCore.Tools(Includes Scaffold-DbContext, Add-Migration, and Update-Database)

• Microsoft.EntityFrameworkCore.SqlServer.Design(Design-time Entity Framework Core Functionality for Microsoft SQL Server)

Entity Model creation

Once we have installed all required references, let us add required context and model classes from existing databases.

.Net Team has made this step easier and now we just need to run below line in Package Manager Console :

Scaffold-DbContext “Server=.\SQL2012;Database=AngularCRUDTest;Trusted_Connection=True;” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

Here use the connection string as per your database and the  –OutputDir  attribute allows you to specify the location of the files generated. In this case, we’ve set it to Models (folder which we have added previously).

Once you run above code, it will create the Context class and Employee class into the Models folder as shown below:

AngularCRUDTestContext.cs class**(https://github.com/NeelBhatt/Angular4_2_5CRUD/blob/master/NeelAngular4CRUD/Models/AngularCRUDTestContext.cs)*

Employees.cs class represents the Employees table**(https://github.com/NeelBhatt/Angular4_2_5CRUD/blob/master/NeelAngular4CRUD/Models/Employees.cs)*

Once this is done, we will add the connection string into appsettings.json file, in .Net core we have json file instead of web.config files(https://github.com/NeelBhatt/Angular4_2_5CRUD/blob/master/NeelAngular4CRUD/appsettings.json):

Next step is to add DB Context to the Startup.cs class.

Add below references into the Startup.cs class:

using NeelAngular5CRUD.Models;
using Microsoft.EntityFrameworkCore;

Add below lines into the ConfigureService method:

services.AddDbContext<AngularCRUDTestContext>(options => options.UseSqlServer(Configuration.GetConnectionString("AngularCRUDTestDatabase")));

Statup.cs class looks like below(https://github.com/NeelBhatt/Angular4_2_5CRUD/blob/master/NeelAngular4CRUD/Startup.cs):

As shown in above code, we are passing configuration to AddDbContext so we are required to add a constructor in  AngularCRUDTestContext that accepts DbContextOptions<AngularCRUDTestContext>.

For that go to  AngularCRUDTestContext class and remove  OnConfiguring method as we do not need it and add the constructor to allow the configuration to be passed into the context by dependency injection:

public AngularCRUDTestContext(DbContextOptions<AngularCRUDTestContext> options) : base(options) { }

After making the changes,  AngularCRUDTestContext  class looks as below(https://github.com/NeelBhatt/Angular4_2_5CRUD/blob/master/NeelAngular4CRUD/Models/AngularCRUDTestContext.cs):

If we do not add above constructor then after running we will get below exception:

That is it. We have completed all required code.

Add API controller with actions using Entity Framework

Right click on Controllers folder -> Add new Controller -> select API controller with actions using Entity Framework:

In next window, select Employees in Model drop-down and AngularCRUDTestContext in Data context drop-down:

Once you click on Add, an EmployeeController API class will be created with all the CRUD operations as shown below:

Let us test our API, run the application:

http://localhost:53008/api/Employees

As you can see all the employees which we added to the database are returned which shows our code is working fine.

In my next post, we will add different Angular component class to do the CRUD operation using the API we created in this post and will show the details on UI.

Hope it helps.