Full-stack application development with AngularJS 11 and Asp.Net MVC Core 5.0 — Creating Data Models [part2/4]

Make sure you have read and completed the code defined in Part 1 of this series before you begin.

In this article, I will be doing the following;

• I will add functionality to the ASP.NET Core MVC and Angular parts of the project to create a data model.
• I will set up a SQL Server database to store the application data and define the model classes that Entity Framework Core will use to represent the data.
• I will define the TypeScript classes on the angular side that will represent the data and define a repository that will make the data available throughout the application.

Starting the Data Model

Creating the ASP.NET Core MVC Data Model

Add three class to ServerApp/Models folder as shown below:

The Contents of the Product.cs File in the ServerApp/Models Folder

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations.Schema;
namespace ServerApp.Models
{
     public class Product
     {
          public long ProductId { get; set; }
          public string Name { get; set; }
          public string Category { get; set; }
          public string Description { get; set; }
          [Column(TypeName = "decimal(8, 2)")]
          public decimal Price { get; set; }
          public Supplier Supplier { get; set; }
          public List<Rating> Ratings { get; set; }
     }
}

The Contents of the Supplier.cs File in the ServerApp/Models Folder

using System.Collections.Generic;
namespace ServerApp.Models
{
     public class Supplier
     {
          public long SupplierId { get; set; }
          public string Name { get; set; }
          public string City { get; set; }
          public string State { get; set; }
          public IEnumerable<Product> Products { get; set; }
     }
}

The Contents of the Rating.cs File in the ServerApp/Models Folder

namespace ServerApp.Models
{
     public class Rating
     {
          public long RatingId { get; set; }
          public int Stars { get; set; }
          public Product Product { get; set; }
     }
}

Adding the Entity Framework Core Packages

The data will be stored in LocalDB and the data will be managed by Entity Framework Core, which is the standard data access layer for ASP.NET Core MVC applications.

Installing the Entity Framework Core Tools Package

To install the global tools package that provides the commands for Entity Framework Core, use a PowerShell command prompt to run the commands shown below:

dotnet tool install --global dotnet-ef

Adding the Entity Framework Core Packages

To add the .NET packages for Entity Framework Core, use the command prompt to navigate to the FullStackApp/ServerApp folder and run the commands:

dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer

You can also install the above packages using Nuget Packages feature of Visual Studio. Right-click to ServerApp and then select Manage NuGet Packages as shown below:

You can see installed packages of ServerApp so far:

You can browse and search for any package you want to install if you do not prefer the command-line tool to install packages.

Defining the Database Configuration Strings

Entity Framework Core needs to know how it should connect to a database, which is done using a connection string. Add the configuration properties shown below to the appsettings.Development.json file in the ServerApp folder.

"ConnectionStrings": {
"DefaultConnection": "Server=(localdb)\\MSSQLLocalDB;Database=FullStackApp;MultipleActiveResultSets=true"
}

Creating the Database Context Class

Add a C# class file called DataContext.cs to the ServerApp/Models folder and add the statements shown below:

using Microsoft.EntityFrameworkCore;
namespace ServerApp.Models
{
     public class DataContext : DbContext
     {
          public DataContext(DbContextOptions<DataContext> options):base(options) { }
          public DbSet<Product> Products { get; set; }
          public DbSet<Supplier> Suppliers { get; set; }
          public DbSet<Rating> Ratings { get; set; }
     }
}

Registering the Context Class in the Startup.cs File

Register the service of context class in Startup.cs as highlighted below:

Creating the Database Migration

Database migration is required to create the database schema that will allow the database to store the application data.

Open Windows Powershell and execute the following commands;

cd d:
cd FullStackApp/ServerApp
dotnet ef migrations add initial

The result of running this command is that a Migrations folder is added to the project that contains C# class files with statements that generate the database schema when the migration is applied to the database.

Updating the Database Schema by executing the command below; this command will use the files generated by the migration feature and create the database schema.

dotnet ef database update

Go to View> SQL Server Object Explorer

The database will contain three tables, called Products, Suppliers, and Ratings, corresponding to each of the three data model types. Each table has columns that correspond to the properties defined by the equivalent data model class, while the navigation properties are translated into foreign key relationships between the tables.

Database Diagram

Add sample data to Database

Right-click to any table and click View Data.

Insert some sample data in all tables.

Creating the Angular Data Model

Create a ClientApp/src/app/models folder and add three files called product.model.ts, supplier.model.ts, and rating.model.ts.

If you are using Visual Studio, right-click the models' folder, select Add >Add New Item from the popup menu, and use the TypeScript File template to create the product.model.ts file as shown below.

Add three model files the same described above.

The Contents of the product.model.ts File in the ClientApp/src/app/models Folder

import { Supplier } from "./supplier.model";
import { Rating } from "./rating.model";
export class Product {
  constructor(
    public productId?: number,
    public name?: string,
    public category?: string,
    public description?: string,
    public price?: number,
    public supplier?: Supplier,
    public ratings?: Rating[]) { }
}

The Contents of the supplier.model.ts File in the ClientApp/src/app/models Folder.

export class Supplier {
  constructor(
    public supplierId?: number,
    public name?: string,
    public city?: string,
    public state?: string
    public products?: Product[]) { }
}

The Contents of the rating.model.ts File in the ClientApp/src/app/models Folder.

import { Product } from "./product.model";
export class Rating {
  constructor(
    public ratingId?: number,
    public stars?: number,
    public product?: Product) { }
}

Summary

In this article, I started to add functionality to both the ASP.NET Core MVC and Angular parts of the application, focusing on the data model. I created a SQL Server database and created C# data model classes so that the MVC controller and view were able to send JSON data to the application. On the client-side, I defined the TypeScript classes that represent the application data.

The full code of this article can be downloaded from the Github repository.

https://github.com/gulraizgulshan2k18/angular-mvc-fullstack

Now proceed to Part 3 for creating and consuming web services.