Table of Contents
Introduction
If you are new to Angular 5 and ASP.NET Core, then kindly read our previous article.
In our previous article, We have explained how to get started with Angular 5 and ASP.NET Core. Now, in this article, let's see in depth how to work with WEB API, EF for performing a CRUD operation for Angular 5 and ASP.NET Core application.
For performing CRUD operation here, We have taken the concept as Inventory Management priority based Reorder level system.
Inventory management and Reorder Level
Inventory management is very important to maintain and manage the stocks in small shops or in a big warehouse. For example, let’s consider a small shop where they sell items like Tooth Paste, Soap, Shampoo, etc. For all the items in the shop, they will make a list with the item name and they will add the total available stock quantity for each item, Total Sales quantity per item and Total Quantity received to be added in the stock. If the items are small in number, it will be easy to find the items needed to be purchased again to maintain the stock quantity, consider if it’s a big factory and needs to maintain all the stock quantity. Using Inventory Management software, the end user can easily track Inventory items, Total available Stock Quantity, Total Arrived and Issued Stock Quantity, Reorder Level for each item, Reorder Date for each Item and priority based reorder for the items which need to be stocked immediately.
Reorder Level
In Inventory Management Reorder Level or Point is an important part which will be used to indicate the customer as this item Stock is going to be finished and need to be purchased or produced for sales or delivered to the end user.
Inventory Management has many processes to be taken care of to maintain the software. In this article, we will make a simple project to display the web-based Monitoring system for indicating the priority based Inventory Management Reorder System.
For Reorder Level there has to be some formula for displaying the indicator on each item which needs to be stocked. In our simple project, We have used the type of Priority-based indication to the customer as manual and automatic.
Note: In Inventory Management we will be having Item Master table, Item Detail Table, Inventory tables and etc. For this simple project, We have used only one table as Inventory table and added the Item Name directly with Stock Qty, Reorder Qty and Priority Status, Using the Priority status user can add or edit the priority for each item which needs to be stocked immediately. Here priority Status is to manually add or edit the priority for each item which needs to be stocked.
Manual Priority setting for Reorder Level
When a customer adds /edits each Inventory item they can set manually priority for reordering the stock. If you ask me what this means, Consider a case where we have 1000 stock in Samsung S7 Edge Item and let's consider this stock can be used for two months. But there is a high demand for the Samsung S7 Edge phone and the price will be increased after a week and now we need to immediately increase the stock quantity. We have many branches around the world by editing the stock priority all our branches can view this from our web application and add the stock to the priority item; or let’s consider one more example as we have 1000 quantity stock and our customer makes a phone call and asks us to deliver 5000 stock quantity within a couple of days, in this case, the manual priority will be more useful. Like this, in many scenarios, it's good to have a manual priority for maintaining each item stock. This is a simple demo project so we didn’t add many field examples. We can also add the field like reorder date until we need to increase the stock quantity and notes for priority etc.
Now let’s add a new Item to our Inventory and click Save. Here we didn’t check the Priority Status while adding new Item, which means this item has good stock Quantity and it's not required for now to add more stock quantity.
We can see as the Priority Status Column with red and green color with Checked and unchecked boxes. When we add or edit the item if we have checked the Priority Status and saved
then the item column will be displayed in green along with checkbox image. If the Item is not saved with priority status then it displays with red color. Here we used the green color to indicate the customer as this item has high priority and stock item needs
to be increased with new Reorder Qty.
When we save the same item with Priority Status checked, we can see the indicator with Green Color along with the Checked image.
Automatic Priority Status for Reorder Level
As we already told you, for reorder level we will be using the formula to indicate the customer for increasing the stock quantity with new reorder quantities.
Here we can see the Required Priority Status Column with Sky Blue and Light Green Color. Light Blue color indicates the Item is not needed for reordering and the Green color indicates the Item needs to be reordered.
For the automatic display we have set the formula as if StockQty>ReorderQty+50 then set the Required Priority Status as Light Blue Color
which indicates the customer as the item is not needed for reorder and the if StockQty<=ReorderQty+50 then set the Required Priority Status as Light Green Color which indicates the customer as the item needed for immediate stock maintenance.
From the above image for the newly added Samsung S7 Edge Item Stock Qty is 750 and Reorder Qty is 50 so the Required Priority Status is displayed as blue color.
Now let’s edit the item like below and set the Reorder Quantity as 700 and save to check the changes.
Here now we can see the Required Priority Status color has been automatically changed as the Stock Qty is 750 and the Reorder Qty is 700.
Now let's see how to create this web application using Angular5,ASP.NET Core using EF and Web API.
Prerequisites
Make sure you have installed all the prerequisites on your computer. If not, then donents-files/00-00-00-00-05/5466.7.png" style="border-width:0px;border-style:solid;" />
Here now we can see the Required Priority Status color has been automatically changed as the Stock Qty is 750 and the Reorder Qty is 700.
Now let's see how to create this web application using Angular5,ASP.NET Core using EF and Web API.
First, download and install Visual Studio 2017 from this link.
Download and install .NET Core 2.0
Download and install Node.js v9.0 or above. I have installed V9.1.0 (Download link).
Code part
Now, it’s time to create our first Angular5 and ASP.NET Core application.
Step 1 - Create a database and a table
We will be using our SQL Server database for our WEB API and EF. First, we create a database named InventoryPDB and a table as InventoryMaster. Here is the SQL script to create a database table and sample record insert query in our table. Run the query given
below in your local SQL Server to create a database and a table to be used in our project.
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'InventoryPDB' )
DROP DATABASE InventoryPDB
GO
CREATE DATABASE InventoryPDB
GO
USE InventoryPDB
GO
-- 1) //////////// StudentMasters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'InventoryMaster' )
DROP TABLE InventoryMaster
GO
CREATE TABLE [dbo].[InventoryMaster](
[InventoryID] INT IDENTITY PRIMARY KEY,
[ItemName] [varchar](100) NOT NULL,
[StockQty] int NOT NULL,
[ReorderQty] int NOT NULL,
[PriorityStatus] int NOT NULL -- 0 for low and 1 for High
pan>
[ItemName] [varchar](100) NOT NULL,
[StockQty] int NOT NULL,
[ReorderQty] int NOT NULL,&n
)
-- insert sample data to Student Master table
INSERT INTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
VALUES ('HardDisk',500,300,0)
INSERT INTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
VALUES ('Mouse',600,550,1)
INSERT INTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
VALUES ('USB',3500,3000,0)
select * from InventoryMaster
Step 2- Create Angular5TemplateCore
After installing all the prerequisites listed above and Angular5TemplateCore, click Start >> Programs >> Visual Studio 2017 >> Visual Studio 2017, on your desktop.
Click New >> Project. Select Visual C# >> Select Angular5Core2. Enter your project name and click OK.
Once our project is created we can see in solution explorer with Angular5 sample components, HTML and app in ClientApp Folder along with Asp.NET Core Controllers and view folder.
Package.json File
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'InventoryPDB' )
DROP DATABASE InventoryPDB
GO
CREATE DATABASE InventoryPDB
GO
USE InventoryPDB
GO
-- 1) //////////// StudentMasters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'InventoryMaster' )
DROP TABLE InventoryMaster
GO
CREATE TABLE [dbo].[InventoryMaster](
[InventoryID] INT IDENTITY PRIMARY KEY,
[ItemName] [varchar](100) NOT NULL,
[StockQty] int NOT NULL,
[ReorderQty] int NOT NULL,
[PriorityStatus] int NOT NULL -- 0 for low and 1 for High
pan>
[ItemName] [varchar](100) NOT NULL,
[StockQty] int NOT NULL,
[ReorderQty] int NOT NULL,&n
)
-- insert sample data to Student Master table
INSERT INTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
VALUES ('HardDisk',500,300,0)
INSERT INTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
VALUES ('Mouse',600,550,1)
INSERT INTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
VALUES ('USB',3500,3000,0)
select * from InventoryMaster
If we open the package.json file, we can see all the dependencies needed for Angular 5 and the Angular CLI has already been added by default.
Adding Webpack in Package.json
Step 3 – Working with Model and Context Class
Adding connection string
To add the connection string with our SQL connection, open the “appsettings.json” file. Yes, this is a JSON file and this file looks as shown below.
In this appsettings.json file, have added the connection string.
"ConnectionStrings"
: {
"DefaultConnection"
:
"Server=SQLSERVERNAME;Database=InventoryPDB;user id=SQLID;password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true;"
}
Creating Model class for Inventory
We can create a model by adding a new class file in our Data folder. Right Click Data folder and click Add>Click Class. Enter the class name as InventoryMasters and click Add. Now, in this class, we first create a property variable, add InventoryMaster. We will be using this in our WEB API controller.Note that here we will be adding the filed name same as our Database table column names.
using
System;
using
System.Collections.Generic;
using
System.ComponentModel.DataAnnotations;
using
System.Linq;
using
System.Threading.Tasks;
namespace
Angular5Core2.Data
{
public
class
InventoryMaster
{
[Key]
public
int
InventoryID {
get
;
set
; }
[Required]
[Display(Name =
"ItemName"
)]
public
string
ItemName {
get
;
set
; }
[Required]
[Display(Name =
"StockQty"
)]
public
int
StockQty {
get
;
set
; }
[Required]
[Display(Name =
"ReorderQty"
)]
public
int
ReorderQty {
get
;
set
; }
public
int
PriorityStatus {
get
;
set
; }
}
}
Creating Database Context
DBContext is Entity Framework class to establish a connection to the database
We can create a DBContext class by adding a new class file in our Data folder. Right-click Data folder and click Add > click Class. Enter the class name as InventroyContext and click Add. In this class, we inherit DbContext and created Dbset for our students' table.
using
Microsoft.EntityFrameworkCore;
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Threading.Tasks;
namespace
Angular5Core2.Data
{
public
class
InventoryContext : DbContext
{
public
InventoryContext(DbContextOptions<InventoryContext> options)
:
base
(options) { }
public
InventoryContext() { }
public
DbSet<InventoryMaster> InventoryMaster {
get
;
set
; }
}
}
Startup.CS
Now, we need to add our database connection string and provider as SQL SERVER. To add this, we add the code given below in Startup.cs file under ConfigureServices method.
public
void
ConfigureServices(IServiceCollection services)
{
// Add Entity framework .
services.AddDbContext<InventoryContext>(options => options.UseSqlServer(Configuration.GetConnectionString(
"DefaultConnection"
)));
services.AddMvc();
}
Step 4 - Creating Web API for CRUD operation
To create our WEB API Controller, right-click Controllers folder. Click Add >> Click Controller. Select API Controller Empty and click Add button to create our Web API.
Enter the name as “InventoryMasterAPI.cs” and click Add.
As we all know, Web API is a simple and easy way to build HTTP Services for the Browsers and Mobiles.
Web API has four methods given below as Get/Post/Put and Delete.
- Get is to request the data. (Select)
-
To create our WEB API Controller, right-click Controllers folder. Click Add >> Click Controller. Select API Controller Empty and click Add button to create our Web API.
Enter the name as “InventoryMasterAPI.cs” and click Add.
Post is to create a data. (Insert)
- Put is to update the data.
- Delete is to delete data.
First, we create the object for DBContext in our Web API class.
[Produces(
"application/json"
)]
[Route(
"api/InventoryMasterAPI"
)]
public
class
InventoryMasterAPIController : Controller
{
private
readonly
InventoryContext _context;
public
InventoryMasterAPIController(InventoryContext context)
{
_context = context;
}
Get Method (Select Operation)
Get Method is to request single item or list of items from our selected database. Here, we will get all Inventory information from InventoryMasters table.
// GET: api/InventoryMasterAPI
[HttpGet]
[Route(
"Inventory"
)]
public
IEnumerable<InventoryMaster> GetInventoryMaster()
{
return
_context.InventoryMaster;
}
Post Method (Insert Operation)
Post Method will be used to insert the data into our database. In Post Method, we will also check if Inventory Id is already created and return the message. We will pass all inventory
Master Column parameters to be inserted into the Inventory Master table.
}
Post Method (Insert Operation)
Post Method will be used to insert the data into our database. In Post Method, we will also check if Inventory Id is already created and return the message. We will pass all inventory
Master Column parameters to be inserted into the Inventory Maiv style="background-color:#ffffff;">// POST: api/InventoryMasterAPI