Friday 5 January 2018

Entity Framework Core with Angular 2




Let’s start how to work with entity framework Core with Angular 2 and ASP.NET Core 2.0.

Download Sample Project “Entity Framework with Angular 2 and ASP.NET Core 2.0”

Step # 1 – Create a New Project

If you don’t know how to create a new project using Angular2 and ASP.NET Core 2.0, then Click here or click below link to learn how to create a new project.

Step # 2 – Create Models

In this step, we will create a model class (Student.cs) with some properties like StudentID, Name, Email, and Department. Now let’s start how to create a class.
  • First of all, Create a new folder. Open the terminal, run the command “mkdir Models”. It will create a new folder in your project folder structure.
  • Now, right click on the Model folder => select new C# class => enter name (E.g. Student.cs). It will create a new class. Now enter the following properties in this class.
Note:- If you don’t see “New C# Class” after right clicking on the Model folder, then you need to install some C# extensions. Open your VSCode and press “ctrl+shift+x”, It will open a sidebar with search box. Just write C# classes. Then you will see a list on extensions with green color button “Install”. Just press install button and extension will be installed.
Entity Framework Core Model Properties
Note: – Don’t forget to add the below reference above the class.
using System.ComponentModel.DataAnnotations;

Step # 3 – Adding Entity Framework Core.

In this step, we will add entity framework in our project. As you know in visual studio IDE, we use package manager console for adding packages, but there is no package manager Console. So, we need some commands to install entity framework in our project.
  • First of all, right the below command in terminal to add package. It will add package in your project.
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
Note: – when you will execute the dotnet add package command, then It will add an entry to csproj file.
  • Now run the below command in terminal to restore all the packages.
Dotnet restore
  • Install Entity Framework Command Line Tool.
Go to project folder structure => Open .csproj file => add the following code just below the ItemGroup end tag.
Entity Framework Core adding command line tool
  • Then again restore all the packages.
Run the command (“dotnet restore”) in terminal.
Note:- if you want to see all the available commands, then write this command “dotnet ef” in terminal. It will show all the commands. And moreover, if you want to use dotnet migration command, but don’t know how to use this command, then just write this command (“ dotnet ef migrations –help ”). It will show details of migrations command. And moreover, if you want to use “add” command and need some help, then write this command (“dotnet ef migrations add –help”). And so on.

Step # 4 – Create a DbContext class.

In this step, we will add a DbContext class. First of all, we will make a folder (E.g. Persistence), and then add a class with the name of StudentDbContext.cs. So, let’s start,
  • run the command “mkdir persistence”, It will add the folder with the name of “persistence”.
  • Right click on the “persistence” folder => choose “new C# class” => enter the name StudentDbContext.cs. It will add a new class under the folder persistence.
  • Write the below code.
Entity Framework Core Adding DbContext class
Note: – Don’t forget to add below DbContext reference library.
using Microsoft.EntityFrameworkCore
  • Now go to project folder structure and open startup class. Add the below code just under the ConfigureServices method.
Entity Framework Core Adding Config Services
Note: – Add below libraries.
using Microsoft.EntityFrameworkCore;
using myFirstApp.persistence;
  • Add Configuration.
Open appsettings.json file => then add connection strings as below in screenshot.
Entity Framework Core ConnectionString

Step # 5 – Creating Database.

Now it’s time to create database using code first.
  • Add DbSet<> into StudentDbContext class as below in screenshot.
Entity Framework Core Adding DbSet
  • Now add migration. Just run this command “dotnet ef migrations add initialModel”. It will add the migration folder into your project.
Entity Framework Core Adding Migration
  • Now finally, run this command “dotnet ef database update” to update database. It will create a database in your sql server. Now open sql server, then you will see a database with the name of students.
Entity Framework Core Database

Download Sample Project “Entity Framework with Angular 2 and ASP.NET Core 2.0”

No comments:

Post a Comment

Angular Tutorial (Update to Angular 7)

As Angular 7 has just been released a few days ago. This tutorial is updated to show you how to create an Angular 7 project and the new fe...