Post
Ask Question

Creating ASP.NET Core, Angular2 Shopping Cart Using Web API And EF 1.0.1

 

Introduction

In this article, let’s see how to create a shopping cart using ASP.NET Core, Angular 2, Entity Framework 1.0.1, and Web API with Template pack .

Note

Kindly read my previous articles which explain in-depth about getting started with ASP.NET Core Template Pack.

In this article, we will learn about:.

  • Creating sample database and ItemDetails table in SQL Server to display in our web application.
  • Creating ASP.NET Core Angular 2 Starter Application (.NET Core) using Template pack.
  • Creating EF, DBContext Class, and Model Class.
  • Creating WEB API.
  • Creating Component TypeScript file to get Web API JSON result using HTTP Module.
  • Filtering Items by Item Name. From Item textbox, keyup event displays the items by search name.
  • Selecting and adding items to shopping cart.
  • Displaying Total Price, Total Qty, and Grand Price Total in shopping cart.
  • Displaying shopping cart details.

This article will explain how to create a simple shopping cart using ASP.NET Core, Angular 2, Web API and EF with Template Pack. 

In this shopping cart demo application, we have 3 parts.

  • Display all items and filter items in HTML Table using Angular 2 from Web API.
  • Display the selected items in details before adding to shopping cart.
  • Add the selected item to shopping cart. Show Price, Quantity, and Grand Total of all items in shopping cart. 
  • Display All Items and Filter Items



    First, we display all item details in the shopping page using Angular 2. All the item details will be loaded from Web API. User can also filter the items by "Item Name". When users enter any character in the "Item Name" Filter textbox, the related item details will be loaded dynamically from the database to the shopping page. 
  • Display the Selected Items in details



    When user clicks on "Image name", we display the item details at the top, to add the selected item to shopping cart. When user clicks on the “Add to cart” button, the selected item will be added to the shopping cart.
  • Shopping Cart Details



    Before adding to cart, we need to check if the item is already added to the cart. If the item is already added to the cart, then we will increase the quantity in Shopping Cart. If the item is not added, then newly selected items will be added to Shopping Cart.

    In the Shopping Cart, we also display the number of items that have been added. We can also calculate the Total Quantity, Total Price, and Grand Price of total items, which will be displayed at the end of Shopping Item details.

Prerequisites

Make sure you have installed all the prerequisites on your computer. If not, then download and install all of them, one by one.

  1. First, download and install Visual Studio 2015 with Update 3 from this link.
  2. If you have Visual Studio 2015 and have not yet updated with update 3, download and install the Visual Studio 2015 Update 3 from this link. 
  3. Download and install .NET Core 1.0.1 
  4. Download and install TypeScript 2.0 
  5. Download and install Node.js v4.0 or above. I have installed V6.9.1 (Download link).
  6. Download and install Download ASP.NET Core Template Pack visz file from this link. 

Code Part

Step 1 Create a Database and Table

We will create "ItemDetails" table to be used for the Shopping Cart Grid data binding. The following is the script to create a database, table, and sample insert query.

Run this script in your SQL Server. I have used SQL Server 2014.

  1. USE MASTER    
  2. GO    
  3. -- 1) Check for the Database Exists .If the database is exist then drop and create new DB    
  4. IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'ShoppingDB' )    
  5. DROP DATABASE ShoppingDB    
  6. GO    
  7.     
  8. CREATE DATABASE ShoppingDB    
  9. GO    
  10.     
  11. USE ShoppingDB    
  12. GO    
  13.     
  14. -- 1) //////////// ItemDetails table    
  15. -- Create Table ItemDetails,This table will be used to store the details like Item Information     
  16.     
  17. IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ItemDetails' )    
  18. DROP TABLE ItemDetails    
  19. GO    
  20.     
  21. CREATE TABLE ItemDetails    
  22. (    
  23. Item_ID int identity(1,1),    
  24. Item_Name VARCHAR(100) NOT NULL,    
  25. Item_Price int NOT NULL,    
  26. Image_Name VARCHAR(100) NOT NULL,    
  27. Description VARCHAR(100) NOT NULL,    
  28. AddedBy VARCHAR(100) NOT NULL,    
  29. CONSTRAINT [PK_ItemDetails] PRIMARY KEY CLUSTERED     
  30. (     
  31. [Item_ID] ASC     
  32. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]     
  33. ) ON [PRIMARY]     
  34.     
  35. GO    
  36.     
  37. -- Insert the sample records to the ItemDetails Table    
  38. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Access Point',950,'AccessPoint.png','Access Point for Wifi use','Shanu')    
  39. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('CD',350,'CD.png','Compact Disk','Afraz')    
  40. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Desktop Computer',1400,'DesktopComputer.png','Desktop Computer','Shanu')    
  41. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('DVD',1390,'DVD.png','Digital Versatile Disc','Raj')    
  42. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('DVD Player',450,'DVDPlayer.png','DVD Player','Afraz')    
  43. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Floppy',1250,'Floppy.png','Floppy','Mak')    
  44. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('HDD',950,'HDD.png','Hard Disk','Albert')    
  45. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('MobilePhone',1150,'MobilePhone.png','Mobile Phone','Gowri')    
  46. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Mouse',399,'Mouse.png','Mouse','Afraz')    
  47. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('MP3 Player ',897,'MultimediaPlayer.png','Multi MediaPlayer','Shanu')    
  48. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Notebook',750,'Notebook.png','Notebook','Shanu')    
  49. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Printer',675,'Printer.png','Printer','Kim')    
  50. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('RAM',1950,'RAM.png','Random Access Memory','Jack')    
  51. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('Smart Phone',679,'SmartPhone.png','Smart Phone','Lee')    
  52. Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) values('USB',950,'USB.png','USB','Shanu')    
  53.     
  54. select * from ItemDetails    

Step 2- Create ASP.NET Core Angular 2 application

  • After installing all the prerequisites listed above and ASP.NET Core Template, click Start >> Programs >> Visual Studio 2015 >> Visual Studio 2015, on your desktop.
  • Click New >> Project. Select Web >> ASP.NET Core Angular 2 Starter.
  • Enter your project name and click OK.

 


After creating ASP.NET Core Angular 2 application, wait for a few seconds. You will see that all the dependencies are automatically restored.

 

We will be using all these in our project to create, build, and run our Angular 2 with ASP.NET Core Template Pack, Web API, and EF 1.0.1.

Step 3 Creating Entity Framework 

Add Entity Framework Packages

To add our Entity Framework Packages in our ASP.NET Core application, open the Project.JSON file and in dependencies add the below line.

Note

Here, we have used EF version 1.0.1. 

  1. "Microsoft.EntityFrameworkCore.SqlServer": "1.0.1",  
  2.     "Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final"   

When we save the project,.json file, we can see that the Reference has been restored.

  

After a few seconds, we can see Entity Framework package has been restored and all references have been added.

  

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 like the below image by default.

In this appsettings.json file, add the connection string.

  1. "ConnectionStrings": {  
  2.     "DefaultConnection": "Server=YOURDBSERVER;Database=StudentsDB;user id=SQLID;password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true;"  
  3.   },   

Note - change the SQL connection string as per your local connection.

The next step is to create a folder named “Data” to create our model and DBContext class.

  

Creating Model Class for Student Master

We can create a model by adding a new class file in our "Data" folder. Right click "Data" folder and click Add >>  Class. Enter the class name as itemDetails and click "Add".

Now, in this class, we first create property variable, add ItemDetails. We will be using this in our Web API Controller.  

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Threading.Tasks;  
  5. using System.ComponentModel.DataAnnotations;  
  6.   
  7. namespace Angular2ASPCORE.Data  
  8. {  
  9. public class ItemDetails  
  10.     {  
  11.         [Key]  
  12.         public int Item_ID { get; set; }  
  13.   
  14.         [Required]  
  15.         [Display(Name = "Item_Name")]  
  16.         public string Item_Name { get; set; }  
  17.   
  18.         [Required]  
  19.         [Display(Name = "Item_Price")]  
  20.         public int Item_Price { get; set; }  
  21.   
  22.         [Required]  
  23.         [Display(Name = "Image_Name")]  
  24.         public string Image_Name { get; set; }  
  25.   
  26.         [Required]  
  27.         [Display(Name = "Description")]  
  28.         public string Description { get; set; }  
  29.   
  30.         [Required]  
  31.         [Display(Name = "AddedBy")]  
  32.         public string AddedBy { get; set; }  
  33.     }  
  34. }   

Creating Database Context

DBContext is Entity Framework Class for establishing connection to database.

We can create a DBContext class by adding a new class file in our Data folder. Right click Data folder and click Add >> Class. Enter the class name as ItemContext and click "Add".

In this class, we inherit DbContext and create Dbset for our ItemDetails table. 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Threading.Tasks;  
  5. using Microsoft.EntityFrameworkCore;  
  6.   
  7. namespace Angular2ASPCORE.Data  
  8. {  
  9.     public class ItemContext : DbContext  
  10.     {  
  11.         public ItemContext(DbContextOptions<ItemContext> options)  
  12.             : base(options) { }  
  13.         public ItemContext() { }  
  14.         public DbSet<ItemDetails> ItemDetails { get; set; }  
  15.     }  
  16. }   

Startup.CS

Now, we need to add our database connection string and provider as SQL SERVER.To add this, we add the below code in Startup.cs file under ConfigureServices method. 

  1. // Add Entity framework .  
  2.             services.AddDbContext<studentContext>(options =>  
  3.              options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));   

Step 4 Creating Web API

To create our Web API Controller, right click "Controllers" folder. Click Add >> New Item.

   

Click ASP.NET in right side >> Click Web API Controller Class. Enter the name as “itemDetailsAPI.cs” and click "Add".

In this, we are using only Get method to get all the ItemDetails result from database and binding the final result using Angular 2 to HTML file.

Here, in this Web API, we get all ItemDetails and ItemDetails loaded by condition ItemName. 

  1. [Produces("application/json")]  
  2.     [Route("api/ItemDetailsAPI")]   
  3.     public class ItemDetailsAPI : Controller  
  4.     {  
  5.         private readonly ItemContext _context;  
  6.   
  7.         public ItemDetailsAPI(ItemContext context)  
  8.         {  
  9.             _context = context;  
  10.         }  
  11.   
  12.         // GET: api/values  
  13.   
  14.         [HttpGet]  
  15.         [Route("Details")]  
  16.         public IEnumerable<ItemDetails> GetItemDetails()  
  17.         {  
  18.             return _context.ItemDetails;  
  19.   
  20.         }  
  21.   
  22.   
  23.         // GET api/values/5  
  24.         [HttpGet]  
  25.         [Route("Details/{ItemName}")]  
  26.         public IEnumerable<ItemDetails> GetItemDetails(string ItemName)  
  27.         {  
  28.             //return _context.ItemDetails.Where(i => i.Item_ID == id).ToList(); ;  
  29.             return _context.ItemDetails.Where(i => i.Item_Name.Contains(ItemName)).ToList();   
  30.         }   

 To test it, we can run our project and copy the get method API path. Here, we can see that our API path for get is /api/ItemDetailsAPI/Details

Run the program and paste the above API path to test our output.

To get the Item Details by ItemName. Here, we can see all the ItemDetails which start from ItemName “DVD” has been loaded.

/api/ItemDetailsAPI/Details/DVD

  

Working with Angular 2

Create all Angular 2 related Apps, Modules, Services, Components, and HTML templates under ClientApp/App folder.

We need to create “model” folder adding our models and create “shopping” folder under app folder to create our TypeScript and HTML file for displaying Item details.

 

Note - Images Folder

First create a folder called “Images” inside the "Shopping" folder. I have used this folder to display all shopping cart images. If you store shopping image in some other path in your code, change accordingly.

Step 5 Creating our First Component TypeScript

Right click on Shopping folder and click on add new Item. Select client-side from left side and select TypeScript file and name the file as “shopping.component.ts” and click "Add".

  

In students.component.ts file, we have three parts -

  1. import part
  2. component part
  3. 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.

In template.give your output html file name. Here, we will create one HTML file as “students.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. 

Here, in the code part, I have commented each section for easy understanding. 

  1. import { Component, Injectable, Inject, EventEmitter, Input, OnInit, Output, NgModule  } from '@angular/core';  
  2. import { FormsModule  } from '@angular/forms';  
  3. import { ActivatedRoute, Router } from '@angular/router';  
  4. import { BrowserModule } from '@angular/platform-browser';   
  5. import { Http,Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http";  
  6. import { ItemDetails } from '../model/ItemDetails';  
  7. import { CartItemDetails } from '../model/CartItemDetails';  
  8.   
  9.   
  10. @Component({  
  11.     selector: 'shopping',  
  12.     template: require('./shopping.component.html')  
  13. })  
  14.   
  15.   
  16. export class shoppingComponent {  
  17.     //Declare Variables to be used  
  18.   
  19.     //To get the WEb api Item details to be displayed for shopping  
  20.     public ShoppingDetails: ItemDetails[] = [];     
  21.     myName: string;  
  22.   
  23.     //Show the Table row for Items,Cart  and Cart Items.  
  24.     showDetailsTable: Boolean = true;  
  25.     AddItemsTable: Boolean = false;  
  26.     CartDetailsTable: Boolean = false;  
  27.     public cartDetails: CartItemDetails[] = [];  
  28.   
  29.     public ImageUrl = require("./Images/CD.png");  
  30.     public cartImageUrl = require("./Images/shopping_cart64.png");  
  31.   
  32.   
  33.     //For display Item details and Cart Detail items  
  34.     public ItemID: number;  
  35.     public ItemName: string = "";  
  36.     public ItemPrice: number = 0;  
  37.     public Imagename: string = "";  
  38.     public ImagePath: string = "";  
  39.     public Descrip: string =  "";     
  40.     public txtAddedBy: string = "";  
  41.     public Qty: number = 0;   
  42.   
  43.     //For calculate Total Price,Qty and Grand Total price  
  44.     public totalPrice: number = 0;  
  45.     public totalQty: number = 0;  
  46.     public GrandtotalPrice: number = 0;  
  47.   
  48.     public totalItem: number = 0;  
  49.   
  50.   
  51.     //Inital Load  
  52.     constructor(public http: Http) {  
  53.         this.myName = "Shanu";  
  54.         this.showDetailsTable = true;   
  55.         this.AddItemsTable = false;  
  56.         this.CartDetailsTable = false;  
  57.         this.getShoppingDetails('');  
  58.     }  
  59.   
  60.     //Get all the Item Details and Item Details by Item name  
  61.     getShoppingDetails(newItemName) {  
  62.        
  63.         if (newItemName == "") {  
  64.             this.http.get('/api/ItemDetailsAPI/Details').subscribe(result => {  
  65.                 this.ShoppingDetails = result.json();  
  66.             });  
  67.         }  
  68.         else {  
  69.             this.http.get('/api/ItemDetailsAPI/Details/' + newItemName).subscribe(result => {  
  70.                 this.ShoppingDetails = result.json();  
  71.             });  
  72.         }  
  73.     }  
  74.   
  75.     //Get Image Name to bind  
  76.     getImagename(newImage) {   
  77.         this.ImageUrl = require("./Images/" + newImage);  
  78.     }  
  79.   
  80.     // Show the Selected Item to Cart for add to my cart Items.  
  81.     showToCart(Id, Name, Price, IMGNM, Desc,user)  
  82.     {  
  83.         this.showDetailsTable = true;  
  84.         this.AddItemsTable = true;  
  85.         this.CartDetailsTable = false;  
  86.         this.ItemID = Id;  
  87.         this.ItemName = Name;  
  88.         this.ItemPrice = Price;  
  89.         this.Imagename = require("./Images/" + IMGNM);  
  90.         this.ImagePath = IMGNM  
  91.         this.Descrip = Desc;  
  92.         this.txtAddedBy = user;  
  93.     }  
  94.   
  95.     // to Show Items to be added in cart  
  96.     showCart() {  
  97.         this.showDetailsTable = false;  
  98.         this.AddItemsTable = true;  
  99.         this.CartDetailsTable = true;  
  100.         this.addItemstoCart();   
  101.     }  
  102.     // to show all item details  
  103.     showItems() {  
  104.         this.showDetailsTable = true;  
  105.         this.AddItemsTable = false;  
  106.         this.CartDetailsTable = false;        
  107.     }  
  108.   
  109.     //to Show our Shopping Items details  
  110.   
  111.     showShoppingItems() {  
  112.         if (this.cartDetails.length <= 0)  
  113.         {  
  114.             alert("Ther is no Items In your Cart.Add Items to view your Cart Details !")  
  115.             return;  
  116.         }  
  117.         this.showDetailsTable = false;  
  118.         this.AddItemsTable = false;  
  119.         this.CartDetailsTable = true;  
  120.     }  
  121.   
  122.     //Check the Item already exists in Cart,If the Item is exist then add only the quantity else add selected item to cart.  
  123.     addItemstoCart() {  
  124.         
  125.         var count: number = 0;  
  126.         var ItemCountExist: number = 0;  
  127.         this.totalItem = this.cartDetails.length;  
  128.       if (this.cartDetails.length > 0) {  
  129.           for (count = 0; count < this.cartDetails.length; count++) {  
  130.               if (this.cartDetails[count].CItem_Name == this.ItemName) {  
  131.                   ItemCountExist = this.cartDetails[count].CQty + 1;  
  132.                   this.cartDetails[count].CQty = ItemCountExist;  
  133.               }  
  134.           }  
  135.       }  
  136.             if (ItemCountExist <= 0)  
  137.             {   
  138.                 this.cartDetails.push(  
  139.                     new CartItemDetails(this.ItemID, this.ItemName, this.ImagePath, this.Descrip, this.txtAddedBy, this.ItemPrice, 1, this.ItemPrice));   
  140.       
  141.             }  
  142.             this.getItemTotalresult();  
  143.     }  
  144.   
  145.     //to calculate and display the total price information in Shopping cart.  
  146.      getItemTotalresult() {  
  147.     this.totalPrice = 0;  
  148.     this.totalQty = 0;  
  149.     this.GrandtotalPrice = 0;  
  150.     var count: number = 0;  
  151.     this.totalItem = this.cartDetails.length;  
  152.     for (count = 0; count < this.cartDetails.length; count++) {  
  153.         this.totalPrice += this.cartDetails[count].CItem_Price;  
  154.         this.totalQty += (this.cartDetails[count].CQty);  
  155.         this.GrandtotalPrice += this.cartDetails[count].CItem_Price * this.cartDetails[count].CQty;  
  156.     }    
  157.   
  158. }  
  159.   
  160.     //remove the selected item from the cart.  
  161.     removeFromCart(removeIndex) {  
  162.         alert(removeIndex);  
  163.         this.cartDetails.splice(removeIndex, 1);  
  164.   
  165.         this.getItemTotalresult();  
  166.     }  
  167. }   

Step 6 Creating our First Component HTML File

Right click on shopping folder and click on "Add New Item". Select client-side from left side and select HTML file and name the file as “shopping.component.html” and click "Add".

  

Write the below HTML code to bind the result in the HTML page to display all the "Shopping Items" and "Shopping Cart" details.

  1. <h1>{{myName}} ASP.NET Core , Angular2 Shopping Cart using   Web API and EF 1.0.1    </h1>  
  2. <hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" />  
  3.    
  4.   
  5. <p *ngIf="!ShoppingDetails"><em>Loading Student Details please Wait ! ...</em></p>  
  6.  <!--<pre>{{ ShoppingDetails | json }}</pre>-->   
  7.   
  8.    
  9. <table id="tblContainer" style='width: 99%;table-layout:fixed;'>  
  10.     <tr *ngIf="AddItemsTable">  
  11.         <td>  
  12.             <table style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;" cellpadding="2"  
  13.                    cellspacing="2">  
  14.                 <tr style="height: 30px;  color:#ff0000 ;border: solid 1px #659EC7;">  
  15.                     <td width="40px"> </td>  
  16.                     <td>  
  17.                         <h2> <strong>Add Items to Cart</strong></h2>  
  18.                     </td>  
  19.   
  20.                 </tr>  
  21.                 <tr>  
  22.                     <td width="40px"> </td>  
  23.                     <td>  
  24.                         <table>  
  25.                             <tr>  
  26.                                 
  27.                                 <td>  
  28.   
  29.                                     <img src="{{Imagename}}" width="150" height="150" />  
  30.   
  31.                                 </td>  
  32.                                 <td width="30"></td>  
  33.                                 <td valign="top">  
  34.                                     <table style="color:#9F000F;font-size:large" cellpadding="4" cellspacing="6">  
  35.   
  36.                                         <tr>  
  37.                                             <td>  
  38.                                                 <b>Item code </b>  
  39.                                             </td>  
  40.   
  41.                                             <td>  
  42.                                                 : {{ItemID}}  
  43.                                             </td>  
  44.   
  45.                                         </tr>  
  46.                                         <tr>  
  47.                                             <td>  
  48.                                                 <b>   Item Name</b>  
  49.                                             </td>  
  50.   
  51.                                             <td>  
  52.                                                 : {{ItemName}}  
  53.                                             </td>  
  54.   
  55.                                         </tr>  
  56.                                         <tr>  
  57.                                             <td>  
  58.                                                 <b> Price  </b>  
  59.                                             </td>  
  60.   
  61.                                             <td>  
  62.                                                 : {{ItemPrice}}  
  63.                                             </td>  
  64.   
  65.                                         </tr>  
  66.                                         <tr>  
  67.                                             <td>  
  68.                                                 <b> Description </b>  
  69.   
  70.                                             </td>  
  71.                                             <td>  
  72.                                                 : {{Descrip}}  
  73.                                             </td>  
  74.   
  75.                                         </tr>  
  76.                                         <tr>  
  77.                                             <td align="center" colspan="2">  
  78.                                                 <table>  
  79.   
  80.                                                     <tr>  
  81.                                                         <td>  
  82.                                                             <button (click)=showCart() style="background-color:#4c792d;color:#FFFFFF;font-size:large;width:200px">  
  83.                                                                 Add to Cart  
  84.                                                             </button>   
  85.                                                               
  86.   
  87.                                                         </td>  
  88.                                                         <td rowspan="2"><img src="{{cartImageUrl}}" /></td>  
  89.                                                     </tr>  
  90.   
  91.                                                 </table>  
  92.                                             </td>  
  93.                                         </tr>  
  94.                                     </table>  
  95.                                 </td>  
  96.                             </tr>  
  97.                         </table>  
  98.                     </td>  
  99.                 </tr>  
  100.             </table>  
  101.         </td>  
  102.     </tr>  
  103.     <tr>  
  104.         <td><hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" /></td>  
  105.     </tr>  
  106.     <tr *ngIf="CartDetailsTable">  
  107.         <td>  
  108.               
  109.             <table width="100%">  
  110.                 <tr>  
  111.                     <td>  
  112.                         <table style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2"  
  113.                                cellspacing="2">  
  114.                             <tr style="height: 30px;  color:#123455 ;border: solid 1px #659EC7;">  
  115.                                 <td width="40px"> </td>  
  116.                                 <td width="60%">  
  117.                                     <h1> My Recent Orders Items <strong style="color:#0094ff"> ({{totalItem}})</strong></h1>   
  118.                                 </td>  
  119.                                 <td align="right">  
  120.                                     <button (click)=showItems() style="background-color:#0094ff;color:#FFFFFF;font-size:large;width:300px;height:50px;  
  121.                               border-color:#a2aabe;border-style:dashed;border-width:2px;">  
  122.                                         Add More Items  
  123.                                     </button>  
  124.                                        
  125.                                 </td>  
  126.                             </tr>  
  127.                         </table>  
  128.                          
  129.                     </td>  
  130.                 </tr>  
  131.                 <tr>  
  132.                     <td>  
  133.                         <table style="background-color:#FFFFFF; border:solid 2px #6D7B8D;padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2" cellspacing="2">  
  134.                             <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">  
  135.                                 <td width="30" align="center">No</td>  
  136.                                 <td width="80" align="center">  
  137.                                     <b>Image</b>  
  138.                                 </td>  
  139.                                 <td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  140.                                     <b>Item Code</b>  
  141.                                 </td>  
  142.                                 <td width="140" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  143.                                     <b>Item Name</b>  
  144.                                 </td>  
  145.                                 <td width="160" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  146.                                     <b>Decription</b>  
  147.                                 </td>  
  148.                                 <td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  149.                                     <b>Price</b>  
  150.                                 </td>  
  151.                                 <td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  152.                                     <b>Quantity</b>  
  153.                                 </td>  
  154.                                 <td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  155.                                     <b>Total Price</b>  
  156.                                 </td>  
  157.                                 <td></td>  
  158.                             </tr>  
  159.   
  160.                             <tbody *ngFor="let detail of cartDetails ; let i = index">  
  161.   
  162.                                 <tr>  
  163.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;" align="center">  
  164.                                         {{i+1}}  
  165.   
  166.                                     </td>  
  167.                                     <td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  168.                                         <span style="color:#9F000F" *ngIf!="getImagename(detail.CImage_Name)">  
  169.                                             <img src="{{ImageUrl}}" style="height:56px;width:56px">  
  170.                                         </span>  
  171.                                     </td>  
  172.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  173.                                         <span style="color:#9F000F">  
  174.                                             {{detail.CItem_ID}}  
  175.                                         </span>  
  176.                                     </td>  
  177.   
  178.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  179.                                         <span style="color:#9F000F">  
  180.                                             {{detail.CItem_Name}}  
  181.                                         </span>  
  182.                                     </td>  
  183.   
  184.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  185.                                         <span style="color:#9F000F">  
  186.                                             {{detail.CDescription}}  
  187.                                         </span>  
  188.                                     </td>  
  189.   
  190.                                     <td align="right" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  191.                                         <span style="color:#9F000F">  
  192.                                             {{detail.CItem_Price  | number}}  
  193.                                         </span>  
  194.                                     </td>  
  195.   
  196.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;" align="right">  
  197.                                         <span style="color:#9F000F">  
  198.                                             {{detail.CQty}}  
  199.                                         </span>  
  200.                                     </td>  
  201.   
  202.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;" align="right">  
  203.                                         <span style="color:#9F000F">  
  204.                                             {{detail.CTotalPrice*detail.CQty  | number}}  
  205.                                         </span>  
  206.                                     </td>  
  207.   
  208.                                     <td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  209.                                                   <button (click)=removeFromCart(i) style="background-color:#e11919;color:#FFFFFF;font-size:large;width:220px;height:40px;">  
  210.                                             Remove Item from Cart  
  211.                                         </button>  
  212.                                     </td>  
  213.                                 </tr>  
  214.                             </tbody>  
  215.                             <tr>  
  216.                                 <td colspan="5" height="40" align="right" > <strong>Total </strong></td>  
  217.                                 <td align="right" height="40"><strong>Price: {{ totalPrice | number}}</strong></td>  
  218.                                 <td align="right" height="40"><strong>Qty : {{ totalQty | number}}</strong></td>  
  219.                                 <td align="right" height="40"><strong>Sum: {{ GrandtotalPrice | number}}</strong></td>  
  220.                                 <td></td>  
  221.                             </tr>  
  222.                         </table>  
  223.                     </td>  
  224.                 </tr>  
  225.                   
  226.             </table>  
  227.         </td>  
  228.     </tr>  
  229.     
  230.     <tr *ngIf="showDetailsTable">  
  231.   
  232.         <td>  
  233.             <table width="100%" style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2"  
  234.                                cellspacing="2">  
  235.                 <tr>  
  236.                     <td>  
  237.                         <table style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2"  
  238.                                cellspacing="2">  
  239.                             <tr style="height: 30px;  color:#134018 ;border: solid 1px #659EC7;">  
  240.                                 <td width="40px"> </td>  
  241.                                 <td width="60%">  
  242.                                     <h2> <strong>Item Details</strong></h2>  
  243.                                 </td>  
  244.                                 <td align="right">  
  245.                                     <button (click)=showShoppingItems() style="background-color:#d55500;color:#FFFFFF;font-size:large;width:300px;height:50px;  
  246.                               border-color:#a2aabe;border-style:dashed;border-width:2px;">  
  247.                                         Show My Cart Items  
  248.                                     </button>  
  249.                                        
  250.                                 </td>  
  251.                             </tr>  
  252.                         </table>  
  253.                     </td>  
  254.                 </tr>  
  255.                  
  256.                 <tr>  
  257.                     <td>  
  258.   
  259.                         <table style="background-color:#FFFFFF; border: solid 2px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2" cellspacing="2" *ngIf="ShoppingDetails">  
  260.   
  261.   
  262.                             <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">  
  263.                                 <td width="40" align="center">  
  264.                                     <b>Image</b>  
  265.                                 </td>  
  266.   
  267.                                 <td width="40" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  268.                                     <b>Item Code</b>  
  269.                                 </td>  
  270.   
  271.                                 <td width="120" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  272.                                     <b>Item Name</b>  
  273.                                 </td>  
  274.   
  275.                                 <td width="120" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  276.                                     <b>Decription</b>  
  277.                                 </td>  
  278.   
  279.                                 <td width="40" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  280.                                     <b>Price</b>  
  281.                                 </td>  
  282.   
  283.                                 <td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">  
  284.                                     <b>User Name</b>  
  285.                                 </td>  
  286.   
  287.                             </tr>  
  288.                             <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">  
  289.                                 <td width="40" align="center">  
  290.                                     Filter By ->  
  291.                                 </td>  
  292.   
  293.                                 <td width="200" colspan="5" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;">  
  294.   
  295.                                     Item Name :  
  296.   
  297.   
  298.                                     <input type="text" (ngModel)="ItemName" (keyup)="getShoppingDetails(myInput.value)" #myInput style="background-color:#fefcfc;color:#334668;font-size:large;  
  299.                                                    border-color:#a2aabe;border-style:dashed;border-width:2px;" />  
  300.                                 </td>  
  301.   
  302.                             </tr>  
  303.   
  304.                             <tbody *ngFor="let detail of ShoppingDetails">  
  305.                                 <tr>  
  306.                                     <td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  307.                                         <span style="color:#9F000F" *ngIf!="getImagename(detail.image_Name)">  
  308.                                             <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)>  
  309.                                         </span>  
  310.   
  311.                                     </td>  
  312.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  313.                                         <span style="color:#9F000F">  
  314.                                             {{detail.item_ID}}  
  315.                                         </span>  
  316.                                     </td>  
  317.   
  318.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  319.                                         <span style="color:#9F000F">  
  320.                                             {{detail.item_Name}}  
  321.                                         </span>  
  322.                                     </td>  
  323.   
  324.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  325.                                         <span style="color:#9F000F">  
  326.                                             {{detail.description}}  
  327.                                         </span>  
  328.                                     </td>  
  329.   
  330.                                     <td align="right" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  331.                                         <span style="color:#9F000F">  
  332.                                             {{detail.item_Price}}  
  333.                                         </span>  
  334.                                     </td>  
  335.   
  336.   
  337.                                     <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">  
  338.                                         <span style="color:#9F000F">  
  339.                                             {{detail.addedBy}}  
  340.                                         </span>  
  341.                                     </td>  
  342.                                 </tr>  
  343.                         </table>  
  344.                     </td>  
  345.                     </tr>  
  346.                 </table>  
  347.               </td>     
  348.              </tr>  
  349.            </table>   

Step 7 Adding Students Navigation menu

We can add our newly created Student details menu in existing menu. To add our new Navigation menu, open the “navmenu.component.html” under navmenu menu.Write the below code to add our navigation menu link for students. Here, we have removed the existing Count and Fetch menu.

  1. <li [routerLinkActive]="['link-active']">  
  2.                     <a [routerLink]="['/shopping]">  
  3.                         <span class='glyphicon glyphicon-th-list'></span> Shopping  
  4.                     </a>  
  5.                 </li>  

Step 8 App Module

App Module is root for all files and we can find the app.module.ts under ClientApp\ app.

  1. Import our students component  
  2. import { shoppingComponent } from './components/shopping/shopping.component';   

Next in @NGModule add import { shoppingComponent } from '.

In routing, add your students path. The code will look like this.

  1. import { NgModule } from '@angular/core';  
  2. import { FormsModule } from '@angular/forms';  
  3. import { BrowserModule } from '@angular/platform-browser';   
  4. import { RouterModule } from '@angular/router';  
  5. import { UniversalModule } from 'angular2-universal';  
  6. import { AppComponent } from './components/app/app.component'  
  7. import { NavMenuComponent } from './components/navmenu/navmenu.component';  
  8. import { HomeComponent } from './components/home/home.component';  
  9. import { FetchDataComponent } from './components/fetchdata/fetchdata.component';  
  10. import { CounterComponent } from './components/counter/counter.component';  
  11. import { shoppingComponent } from './components/shopping/shopping.component';  
  12. @NgModule({  
  13.     bootstrap: [ AppComponent ],  
  14.     declarations: [  
  15.         AppComponent,  
  16.         NavMenuComponent,  
  17.         CounterComponent,  
  18.         FetchDataComponent,  
  19.         HomeComponent,  
  20.         shoppingComponent  
  21.     ],  
  22.     imports: [  
  23.         UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.  
  24.         RouterModule.forRoot([  
  25.             { path: '', redirectTo: 'home', pathMatch: 'full' },  
  26.             { path: 'home', component: HomeComponent },  
  27.             { path: 'counter', component: CounterComponent },  
  28.             { path: 'fetch-data', component: FetchDataComponent },  
  29.             { path: 'shopping', component: shoppingComponent },   
  30.             { path: '**', redirectTo: 'home' }  
  31.         ])  
  32.     ]  
  33. })  
  34. export class AppModule {  
  35. }   

Step 9 Build and run the application

Build and run the application and you can see that our Students Master/Detail page will be loaded with all Student Master and Detail information.

 

Note

First, create the Database and Table in your SQL Server. You can run the SQL Script from this article to create ShoppingDB database and ItemDetails Table. Also, don’t forget to change the connection string from “appsettings.json”.


Similar Articles