Angular 7 and Asp.Net Core 2.2 CRUD Operation: Step-by-Step Guide

The source code of demo project about Angular 7 and Asp.Net Core 2.2 CRUD operation is accessible with the link available on the bottom of this article.

Its been few years, AngularJs was re-architect-ed to create an Typescript based open-source web application framework powered by Google. By the time of writing this article, Angular 7 was the stable version and it’s upgrading so fast.

On the other side, Asp.net Core has its own swag.

Along with the official release of Visual Studio 2019 on April 2 2019, Asp.Net Core 3.0 came into existence but it is not stable yet. By this time the latest stable Version is Asp.Net Core 2.2.

Angular 7 and Asp.Net Core 2.2 is the perfect combination to create a modern web application which is the current demand of software market.

So, In this article I will help you to create an Angular 7 and Asp.Net Core 2.2 CRUD operations along with EntityFrameworkCore as an ORM and Bootstrap for design purpose.

Let’s get started.

Prerequisites

  • Use updated version of VS 2017 or Install Visual Studio 2019 from here.
  • Install .Net Core 2.2 from here.
  • SQL Server 2016 will be used for database.
  • You must have latest version of Nodejs installed on your machine.

I am going to use Visual Studio 2019 as an IDE which has a quite different interface than Visual Studio 2017. You can read my previous article to know about the new features of Visual Studio 2019.

Basic project setups  for Angular 7 and Asp.Net Core 2.2 CRUD

Create a new Asp.Net Core Project by selecting Asp.Net Core Web Application.

Angular 7 and Asp.Net Core 2.2 CRUD

On the next window, select Asp.Net Core 2.2 from the drop down and also select Angular template as shown on the picture and hit Create.

Angular 7 and Asp.Net Core 2.2 CRUD

 

After that, Visual Studio will create a new project with basic file structure. If you look into the Startup.cs file, you can see the setups for running Angular SPA from Asp.Net Core.

The folder ClientApp will have all the files related to Angular. While you select Angular Template with Asp.Net Core 2.2, you will the Angular Version 6.* which is not the latest stable version. To verify this you can check package.json inside ClientApp.

Angular 7 and Asp.Net Core 2.2 CRUD

Not a big deal here. You can upgrade the angular template into Version 7 with a command. For upgrading, you can run the command below from the directory of ClientApp.

ng update @angular/cli @angular/core

Or, you can get the help from angular update guide.

After that, recheck your package.json file, the previous version number may have changed by now.

FYI, you have the option to create Angular template with latest version using Angular CLI instead of selecting Angular template on Visual Studio. For more information, you can read my previous article about creating SPA with Asp.Net Core and Angular 7 CLI project.

Now, if you run the application hitting F5, your browser will deliver you the default view as show below.

Angular 7 and Asp.Net Core 2.2 CRUD

So far, we have set up our Asp.Net Core 2.2 application with Angular 7.

Back-end Code Implementation

The Solution Explorer looks like this after adding all the required files and folders.

Angular 7 and Asp.Net Core 2.2 CRUD

First thing first, I am going to create a simple application that will be able to handle the student’s information. So, lets create an entity class as StudentEntity.

Here are very basic properties which represent the students information and decorated with Data Annotations that helps to maintain the server side validation while creating or updating the student entity.

The StudentController handles the request that come from client site and it looks like this.

As you can see here, I am accessing Student Service using IServiceProvider which is later utilized from the action methods of Student Controller to perform the CRUD operations.

FYI : IServiceProvider is the dependency container available on Asp.Net Core. You can learn more about it from my previous article on Dependency Injection in Asp.Net Core.

Writing all your data access logic inside the controller is not a better approach of application development so, the service layer is handling all the data access logic.

The code from IStudentService and StudentService looks like this.

The IStudentService interface helps to maintain the loose coupling of an application which is later implemented on StudentService as shown below.

Here also, I have injected the IServiceProvider for accessing the instance of ApplicationDbContext.

One thing important, you have to register your service with IServiceCollection inside the ConfigureServices method on Startup before accessing it from IServiceProvider.

So, the service registration code looks like this.

The ApplicationDbContext is simply inherited from DbContext  which is the bridge between entity and database and it looks like this.

The connection string for database creation resides inside secrets.json. You can also keep it inside appsettings.json, but the Asp.Net Core will prioritize secrets.json over appsettings.json.

secrets.json is not the part of Visual Studio files and folders so, you can not find it inside the folder structure of your project. It resides inside your computer’s user profile and you can open it by right clicking the project node from solution explorer and then ‘Manage User Secrets‘.

Now let’s create a database using entity framework migration.

Open ‘Package Manager Console‘ from Tools > NuGet Package Manager > Package Manager Console and then run this command.

add-migration -context ApplicationDbContext InitialCreate

Here, -context ApplicationDbContext is optional when you have only one context throughout your application. This command will create a new Migrations folder with two new files. These files are created base on the properties defined on StudentEntity that we have registered on ApplicationDbContext with DbSet.

Just digging inside the *_InitialCreate.cs file, you can see all the properties defined inside our entity which are now ready to create a table inside the database defined on connection string on secrets.json.

Now let’s fire a final command for database creation as shown below.

update-database -context ApplicationDbContext

If every thing has went right by now, the package manager console window looks like this.

Angular 7 and Asp.Net Core 2.2 CRUD

Now open SSMS (SQL Server Management Studio) and the check you database node for final approval. You might have new database there with the name that you set as value on Initial Catalog from connection string.

So far, so good.

Let’s hit some front-end code.

Front-end Code Implementation

As I already mentioned, all our front-end related files are located inside ClientApp.

Though you can use Visual Studio as an IDE to edit front-end files but, I prefer to use Visual Studio Code instead. Inside ClientApp create a new folder naming student, where we will create the component, model and services in different sub folders.

After creating the necessary files and folder the file explorer looks like this.

Angular 7 and Asp.Net Core 2.2 CRUD

Components are the basic building blocks of an angular application. The collection of many angular components helps to create a feature rich application.

Each component is associated with Template and Style-sheet. The codes inside student.component.ts looks like this.

This looks live a huge mess of code at first sight but, each of them have their own meaning. 😀

The import keyword on the top are like the using keywords  uses with namespace on C# classes. We have to use it, when there is a need of predefined functionalities outside of this file.

@Componet decorator is necessary to decorate the component class in angular where we define the selector, that is useful while implementing this component.

The HTML and CSS files path are also defined inside this decorator. Component class must be followed by the export keyword to be able to use it somewhere in the application.

StudentCrudService is the another service layer that is being injected inside the constructor along with the builtin ToastrManager service. The ToastrManager service will be utilize to show the notifications after certain action.
The individual functions are defined after that for handling CRUD request from HTML and forwarding it to the back-end controller throughout the StudentCrudService.
The StudentCrudService is like the StudentService in back-end code where we write our final HTTP request to the StudentController.
The HTML code inside student.component.html looks like this.

I have used bootstrap and font-awesome along with custom CSS code inside student.student.css for design purpose.

The student.model.css is useful for binding student information from component to the HTML.

The StudentCrudService is also a simple class in angular where we use HttpClient service that offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers.

And it looks like this.

Before wrapping up, It’s worth mentioning few more things that might help you.

The StudentComponent must be listed inside declarations array on app.module.ts.

Install font-awesome and ng6-toastr-notifications using these commands respectively.

  • npm install –save font-awesome angular-font-awesome
  • npm install ng6-toastr-notifications –save

styles.css is the global style-sheet file for overall application where you can import font-awesome like this.

  • @import “../node_modules/font-awesome/css/font-awesome.min.css”;

RelatedHow to Use External JavaScript with Angular project?

This article is purely focused for newbie developers and I tried to explain the very basic things about Angular 7 and Asp.Net Core 2.2 CRUD operations.However, I may not be able to explain as much as you expected. Please leave a comment below for any queries or discussions.

Get the source code of this demo from GitHub.

Have a bug free day.

About dipneupane

Dip is a passionate Software Developer based in Kathmandu, Nepal. He chew code and smash keyboard for living. Apart from that, he writes about almost everything on buzzedcode.com.

View all posts by dipneupane →

4 Comments on “Angular 7 and Asp.Net Core 2.2 CRUD Operation: Step-by-Step Guide”

  1. Is there supposed to be a UI that we can see? I downloaded from Git hub, and the projects builds fine, but I never see a UI?

    1. Hi Michael Kelly,
      Yes there is UI. There are 2 options for running the Application.

      Option 1:
      You can use Visual Studio to run the application.

      Option 2:
      Alternatively you can run it on Angular style,

      – run npm install from the directory where package.json exist.
      – run ng serve
      – then, run the application on http://localhost:4200 (the default port)

      P.s You API need to be running for data related stuff.

    1. secrets.json is not the part of your solution files, it resides inside computer’s user profile (C:\Users\\AppData\Roaming\Microsoft\UserSecrets\ where matches your Windows user and is a randomly generated GUID). For production, you can use appsettings.json.

Leave a Reply

Your email address will not be published. Required fields are marked *