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

  • 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

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; }
}
}
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; }
}
}
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

dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer

Defining the Database Configuration Strings

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

Creating the Database Context Class

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

Creating the Database Migration

cd d:
cd FullStackApp/ServerApp
dotnet ef migrations add initial
dotnet ef database update
Database Diagram

Add sample data to Database

Creating the Angular Data Model

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[]) { }
}
export class Supplier {
constructor(
public supplierId?: number,
public name?: string,
public city?: string,
public state?: string
public products?: Product[]) { }
}
import { Product } from "./product.model";export class Rating {
constructor(
public ratingId?: number,
public stars?: number,
public product?: Product) { }
}

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store