Creating ASP.NET Core, Angular2 Shopping Cart Using Web API And EF 1.0.1
In this article, we will be creating an application using Web API and Entity Framework.
Lets Start:
Creating Database
- First let us create a database in SQL named ShoppingDB
- Create a table in the newly created database and name it “ItemDetails”.
You can just copy the following code snippet and paste it in your Sql query and execute it.
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] = 'ShoppingDB' )
DROP DATABASE ShoppingDB
GO
CREATE DATABASE ShoppingDB
GO
USE ShoppingDB
GO
-- 1) //////////// ItemDetails table
-- Create Table ItemDetails,This table will be used to store the details like Item Information
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ItemDetails' )
DROP TABLE ItemDetails
GO
CREATE TABLE ItemDetails
(
Item_ID int identity(1,1),
Item_Name VARCHAR(100) NOT NULL,
Item_Price int NOT NULL,
Image_Name VARCHAR(100) NOT NULL,
Description VARCHAR(100) NOT NULL,
AddedBy VARCHAR(100) NOT NULL,
CONSTRAINT [PK_ItemDetails] PRIMARY KEY CLUSTERED
(
[Item_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
-- Insert the sample records to the ItemDetails Table
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Access Point',950,'AccessPoint.png','Access Point for Wifi use','Shanu')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('CD',350,'CD.png','Compact Disk','Afraz')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Desktop Computer',1400,'DesktopComputer.png','Desktop Computer','Shanu')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('DVD',1390,'DVD.png','Digital Versatile Disc','Raj')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('DVD Player',450,'DVDPlayer.png','DVD Player','Afraz')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Floppy',1250,'Floppy.png','Floppy','Mak')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('HDD',950,'HDD.png','Hard Disk','Albert')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('MobilePhone',1150,'MobilePhone.png','Mobile Phone','Gowri')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Mouse',399,'Mouse.png','Mouse','Afraz')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('MP3 Player ',897,'MultimediaPlayer.png','Multi MediaPlayer','Shanu')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Notebook',750,'Notebook.png','Notebook','Shanu')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Printer',675,'Printer.png','Printer','Kim')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('RAM',1950,'RAM.png','Random Access Memory','Jack')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Smart Phone',679,'SmartPhone.png','Smart Phone','Lee')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('USB',950,'USB.png','USB','Shanu')
select * from ItemDetails
At first we have to download required template for our project from “https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack”,. And Install the downloaded file.
Now let us move into Visual Studio and Create a Asp.Net Core Application 2 application.
- File >> New Project
- On the right side of window, Select Web from Templates.
- Choose Framework 4.6.
- Select Asp.Net Core Angular 2 Starter.
- Provide a suitable name for the project and click on OK.
Visual Studio will create restore the packages. It may take a while.
Entity Framework
We will add the Entity Framework Packages in our application. For this open the project.json file and add the dependencies as shown in the code snippet below.
Now Save it and it will restore the project, it will take few seconds. You can see the packages installed under References tab >> >NetCoreApp.Version: as shown in the figure below:
Add Connection String
Now we need to connect our application with database and to do that lets go to appsettings.json file and add the following code as shown in the figure below:
Now we will add a folder a named “Data” to create our model and DBContext class.
Create a model class:
- Right click on “Data” folder >>Add >> Class.
Provide a name for the class as “ItemDetails”.
In this class, we need to create property variable and add the ItemDetails as shown in the code snippet below:
Now In the same “Data” folder we will create a Database Context for establishing connection to database.
As earlier process add a new class and name it “ItemContext”.
In this class we will inherit DbContext and created Dbset for our ItemDetails table as shown in the code snippet below:
Now we need to add our database connection string and provider as SQL Server. To do this we add the code in StartUp.cs under Configureservices method as shown in the code snippet below:
Create Web API
We will create Web API Controller.
- Right Click on the controller folder in Solution Explorer.
- Add >> New Item
- Select Web API Controller class and name it “ItemDetailsAPI”
- Click Add.
- The Web API Controller contains the default methods for CRUD operations.
Now add some code in the ItemDetailsAPI.cs as shown in the code snippet below:
Now let’s test whether our WebAPI Controller is working or not. Run the application and in the address bar enter http://localhost:5510/api/ItemDetailsAPI/Details
This must and will give us the output as shown in the code snippet below:
To get the Item Details by ItemName enter:
http://localhost:5510/api/ItemDetailsAPI/Details/Huwaie
Working with Angular2
Create a new folder named “ClientApp” and under it “app” folder to create all Angular2 related Apps,Modules, Services, Components and html templates as shown in the code snippet below:
Now create a folder named “Images” under shopping folder to display all shopping cart images. You can keep the images somewhere else too but that will make you need to change code accordingly.
TypeScript
We will now create first component TypeScript. To do so:
- Right Click on shopping folder >> Add >> New Item.
- Select .Net Core and select TypeScript File.
- Provide name as “shopping.component”
- Add.
Now create ItemDetails.ts and CartItemDetails.ts under model folder of app folder as typescript file and add some properties to it as shown in the code snippet below:
Now we will import this class in our Shopping component for binding the result of Json results.
Let’s get back to students.components.ts file. Here we will create three parts:
- Import part
- Component Part
- Class for writing our business logic
First, import Angular files to be used in our component; here, we import HTTP for using HTTP client in our Angular 2 component.
In component, we have selector and template. Selector is to give a name for this app and in our HTML file, we can use this selector name to display in our HTML page. And Template is to give our output html file name. Here we will create one Html File as “shopping.component.html”.
Export Class is the main class where we perform all our business logic and variable declaration to be used in our component template. In this class, we get the API method result and bind the result to the student array.
Copy the following code and paste it in shopping.components.ts file:
import { Component, Injectable, Inject, EventEmitter, Input, OnInit, Output, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { Http,Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http";
import { ItemDetails } from '../model/ItemDetails';
import { CartItemDetails } from '../model/CartItemDetails';
@Component({
selector: 'shopping',
template: require('./shopping.component.html')
})
export class shoppingComponent {
//Declare Variables to be used
//To get the WEb api Item details to be displayed for shopping
public ShoppingDetails: ItemDetails[] = [];
myName: string;
//Show the Table row for Items,Cart and Cart Items.
showDetailsTable: Boolean = true;
AddItemsTable: Boolean = false;
CartDetailsTable: Boolean = false;
public cartDetails: CartItemDetails[] = [];
public ImageUrl = require("./Images/CD.png");
public cartImageUrl = require("./Images/shopping_cart64.png");
//For display Item details and Cart Detail items
public ItemID: number;
public ItemName: string = "";
public ItemPrice: number = 0;
public Imagename: string = "";
public ImagePath: string = "";
public Descrip: string = "";
public txtAddedBy: string = "";
public Qty: number = 0;
//For calculate Total Price,Qty and Grand Total price
public totalPrice: number = 0;
public totalQty: number = 0;
public GrandtotalPrice: number = 0;
public totalItem: number = 0;
//Inital Load
constructor(public http: Http) {
this.myName = "Shanu";
this.showDetailsTable = true;
this.AddItemsTable = false;
this.CartDetailsTable = false;
this.getShoppingDetails('');
}
//Get all the Item Details and Item Details by Item name
getShoppingDetails(newItemName) {
if (newItemName == "") {
this.http.get('/api/ItemDetailsAPI/Details').subscribe(result => {
this.ShoppingDetails = result.json();
});
}
else {
this.http.get('/api/ItemDetailsAPI/Details/' + newItemName).subscribe(result => {
this.ShoppingDetails = result.json();
});
}
}
//Get Image Name to bind
getImagename(newImage) {
this.ImageUrl = require("./Images/" + newImage);
}
// Show the Selected Item to Cart for add to my cart Items.
showToCart(Id, Name, Price, IMGNM, Desc,user)
{
this.showDetailsTable = true;
this.AddItemsTable = true;
this.CartDetailsTable = false;
this.ItemID = Id;
this.ItemName = Name;
this.ItemPrice = Price;
this.Imagename = require("./Images/" + IMGNM);
this.ImagePath = IMGNM
this.Descrip = Desc;
this.txtAddedBy = user;
}
// to Show Items to be added in cart
showCart() {
this.showDetailsTable = false;
this.AddItemsTable = true;
this.CartDetailsTable = true;
this.addItemstoCart();
}
// to show all item details
showItems() {
this.showDetailsTable = true;
this.AddItemsTable = false;
this.CartDetailsTable = false;
}
//to Show our Shopping Items details
showShoppingItems() {
if (this.cartDetails.length <= 0)
{
alert("Ther is no Items In your Cart.Add Items to view your Cart Details !")
return;
}
this.showDetailsTable = false;
this.AddItemsTable = false;
this.CartDetailsTable = true;
}
//Check the Item already exists in Cart,If the Item is exist then add only the quantity else add selected item to cart.
addItemstoCart() {
var count: number = 0;
var ItemCountExist: number = 0;
this.totalItem = this.cartDetails.length;
if (this.cartDetails.length > 0) {
for (count = 0; count < this.cartDetails.length; count++) {
if (this.cartDetails[count].CItem_Name == this.ItemName) {
ItemCountExist = this.cartDetails[count].CQty + 1;
this.cartDetails[count].CQty = ItemCountExist;
}
}
}
if (ItemCountExist <= 0)
{
this.cartDetails.push(
new CartItemDetails(this.ItemID, this.ItemName, this.ImagePath, this.Descrip, this.txtAddedBy, this.ItemPrice, 1, this.ItemPrice));
}
this.getItemTotalresult();
}
//to calculate and display the total price information in Shopping cart.
getItemTotalresult() {
this.totalPrice = 0;
this.totalQty = 0;
this.GrandtotalPrice = 0;
var count: number = 0;
this.totalItem = this.cartDetails.length;
for (count = 0; count < this.cartDetails.length; count++) {
this.totalPrice += this.cartDetails[count].CItem_Price;
this.totalQty += (this.cartDetails[count].CQty);
this.GrandtotalPrice += this.cartDetails[count].CItem_Price * this.cartDetails[count].CQty;
}
}
//remove the selected item from the cart.
removeFromCart(removeIndex) {
alert(removeIndex);
this.cartDetails.splice(removeIndex, 1);
this.getItemTotalresult();
}
}
Now let’s create our first Component Html File. To do so:
- Right click on shopping folder >> Add>>New Item.
- .Net core >> choose Html file
- Provide the name as “shopping.component”.
- Add.
In this html file add the following code to bind the result in the Html Page to display all the “Shopping Items” and “Shopping Cart” details.
<h1>{{myName}} ASP.NET Core , Angular2 Shopping Cart using Web API and EF 1.0.1 </h1>
<hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" />
<p *ngIf="!ShoppingDetails"><em>Loading Student Details please Wait ! ...</em></p>
<!--<pre>{{ ShoppingDetails | json }}</pre>-->
<table id="tblContainer" style='width: 99%;table-layout:fixed;'>
<tr *ngIf="AddItemsTable">
<td>
<table style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;" cellpadding="2"
cellspacing="2">
<tr style="height: 30px; color:#ff0000 ;border: solid 1px #659EC7;">
<td width="40px"> </td>
<td>
<h2> <strong>Add Items to Cart</strong></h2>
</td>
</tr>
<tr>
<td width="40px"> </td>
<td>
<table>
<tr>
<td>
<img src="{{Imagename}}" width="150" height="150" />
</td>
<td width="30"></td>
<td valign="top">
<table style="color:#9F000F;font-size:large" cellpadding="4" cellspacing="6">
<tr>
<td>
<b>Item code </b>
</td>
<td>
: {{ItemID}}
</td>
</tr>
<tr>
<td>
<b> Item Name</b>
</td>
<td>
: {{ItemName}}
</td>
</tr>
<tr>
<td>
<b> Price </b>
</td>
<td>
: {{ItemPrice}}
</td>
</tr>
<tr>
<td>
<b> Description </b>
</td>
<td>
: {{Descrip}}
</td>
</tr>
<tr>
<td align="center" colspan="2">
<table>
<tr>
<td>
<button (click)=showCart() style="background-color:#4c792d;color:#FFFFFF;font-size:large;width:200px">
Add to Cart
</button>
</td>
<td rowspan="2"><img src="{{cartImageUrl}}" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" /></td>
</tr>
<tr *ngIf="CartDetailsTable">
<td>
<table width="100%">
<tr>
<td>
<table style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2"
cellspacing="2">
<tr style="height: 30px; color:#123455 ;border: solid 1px #659EC7;">
<td width="40px"> </td>
<td width="60%">
<h1> My Recent Orders Items <strong style="color:#0094ff"> ({{totalItem}})</strong></h1>
</td>
<td align="right">
<button (click)=showItems() style="background-color:#0094ff;color:#FFFFFF;font-size:large;width:300px;height:50px;
border-color:#a2aabe;border-style:dashed;border-width:2px;">
Add More Items
</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="background-color:#FFFFFF; border:solid 2px #6D7B8D;padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2" cellspacing="2">
<tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="30" align="center">No</td>
<td width="80" align="center">
<b>Image</b>
</td>
<td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Item Code</b>
</td>
<td width="140" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Item Name</b>
</td>
<td width="160" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Decription</b>
</td>
<td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Price</b>
</td>
<td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Quantity</b>
</td>
<td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Total Price</b>
</td>
<td></td>
</tr>
<tbody *ngFor="let detail of cartDetails ; let i = index">
<tr>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;" align="center">
{{i+1}}
</td>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F" *ngIf!="getImagename(detail.CImage_Name)">
<img src="{{ImageUrl}}" style="height:56px;width:56px">
</span>
</td>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{detail.CItem_ID}}
</span>
</td>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{detail.CItem_Name}}
</span>
</td>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{detail.CDescription}}
</span>
</td>
<td align="right" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{detail.CItem_Price | number}}
</span>
</td>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;" align="right">
<span style="color:#9F000F">
{{detail.CQty}}
</span>
</td>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;" align="right">
<span style="color:#9F000F">
{{detail.CTotalPrice*detail.CQty | number}}
</span>
</td>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<button (click)=removeFromCart(i) style="background-color:#e11919;color:#FFFFFF;font-size:large;width:220px;height:40px;">
Remove Item from Cart
</button>
</td>
</tr>
</tbody>
<tr>
<td colspan="5" height="40" align="right" > <strong>Total </strong></td>
<td align="right" height="40"><strong>Price: {{ totalPrice | number}}</strong></td>
<td align="right" height="40"><strong>Qty : {{ totalQty | number}}</strong></td>
<td align="right" height="40"><strong>Sum: {{ GrandtotalPrice | number}}</strong></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr *ngIf="showDetailsTable">
<td>
<table width="100%" style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2"
cellspacing="2">
<tr>
<td>
<table style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2"
cellspacing="2">
<tr style="height: 30px; color:#134018 ;border: solid 1px #659EC7;">
<td width="40px"> </td>
<td width="60%">
<h2> <strong>Item Details</strong></h2>
</td>
<td align="right">
<button (click)=showShoppingItems() style="background-color:#d55500;color:#FFFFFF;font-size:large;width:300px;height:50px;
border-color:#a2aabe;border-style:dashed;border-width:2px;">
Show My Cart Items
</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="background-color:#FFFFFF; border: solid 2px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2" cellspacing="2" *ngIf="ShoppingDetails">
<tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="40" align="center">
<b>Image</b>
</td>
<td width="40" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Item Code</b>
</td>
<td width="120" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Item Name</b>
</td>
<td width="120" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Decription</b>
</td>
<td width="40" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>Price</b>
</td>
<td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
<b>User Name</b>
</td>
</tr>
<tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="40" align="center">
Filter By ->
</td>
<td width="200" colspan="5" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;">
Item Name :
<input type="text" (ngModel)="ItemName" (keyup)="getShoppingDetails(myInput.value)" #myInput style="background-color:#fefcfc;color:#334668;font-size:large;
border-color:#a2aabe;border-style:dashed;border-width:2px;" />
</td>
</tr>
<tbody *ngFor="let detail of ShoppingDetails">
<tr>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F" *ngIf!="getImagename(detail.image_Name)">
<img src="{{ImageUrl}}" style="height:56px;width:56px" (click)=showToCart(detail.item_ID,detail.item_Name,detail.item_Price,detail.image_Name,detail.description,detail.addedBy)>
</span>
</td>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{detail.item_ID}}
</span>
</td>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{detail.item_Name}}
</span>
</td>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{detail.description}}
</span>
</td>
<td align="right" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{detail.item_Price}}
</span>
</td>
<td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{detail.addedBy}}
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Now we can add our newly created details menu in existing menu. To add our new Navigation menu, create a navmenu.component.html under nav menu. Write the code as shown in code snippet below:
App Module
App Module is root for all files so create a app.module.ts TypeScript file under ClientApp/app folder. Now add the following code as shown in the code snippet below:
Now build and run the application.
