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:.

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.

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
  8. CREATE DATABASE ShoppingDB
  9. GO
  11. USE ShoppingDB
  12. GO
  14. -- 1) //////////// ItemDetails table
  15. -- Create Table ItemDetails,This table will be used to store the details like Item Information
  17. IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ItemDetails' )
  18. DROP TABLE ItemDetails
  19. GO
  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]
  35. GO
  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')
  54. select * from ItemDetails

Step 2- Create ASP.NET Core Angular 2 application


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;
  7. namespace Angular2ASPCORE.Data
  8. {
  9. public class ItemDetails
  10. {
  11. [Key]
  12. public int Item_ID { get; set; }
  14. [Required]
  15. [Display(Name = "Item_Name")]
  16. public string Item_Name { get; set; }
  18. [Required]
  19. [Display(Name = "Item_Price")]
  20. public int Item_Price { get; set; }
  22. [Required]
  23. [Display(Name = "Image_Name")]
  24. public string Image_Name { get; set; }
  26. [Required]
  27. [Display(Name = "Description")]
  28. public string Description { get; set; }
  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;
  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;
  7. public ItemDetailsAPI(ItemContext context)
  8. {
  9. _context = context;
  10. }
  12. // GET: api/values
  14. [HttpGet]
  15. [Route("Details")]
  16. public IEnumerable<ItemDetails> GetItemDetails()
  17. {
  18. return _context.ItemDetails;
  20. }
  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';
  10. @Component({
  11. selector: 'shopping',
  12. template: require('./shopping.component.html')
  13. })
  16. export class shoppingComponent {
  17. //Declare Variables to be used
  19. //To get the WEb api Item details to be displayed for shopping
  20. public ShoppingDetails: ItemDetails[] = [];
  21. myName: string;
  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[] = [];
  29. public ImageUrl = require("./Images/CD.png");
  30. public cartImageUrl = require("./Images/shopping_cart64.png");
  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;
  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;
  48. public totalItem: number = 0;
  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. }
  60. //Get all the Item Details and Item Details by Item name
  61. getShoppingDetails(newItemName) {
  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. }
  75. //Get Image Name to bind
  76. getImagename(newImage) {
  77. this.ImageUrl = require("./Images/" + newImage);
  78. }
  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. }
  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. }
  109. //to Show our Shopping Items details
  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. }
  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() {
  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));
  141. }
  142. this.getItemTotalresult();
  143. }
  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. }
  158. }
  160. //remove the selected item from the cart.
  161. removeFromCart(removeIndex) {
  162. alert(removeIndex);
  163. this.cartDetails.splice(removeIndex, 1);
  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;" />
  5. <p *ngIf="!ShoppingDetails"><em>Loading Student Details please Wait ! ...</em></p>
  6. <!--<pre>{{ ShoppingDetails | json }}</pre>-->
  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>
  20. </tr>
  21. <tr>
  22. <td width="40px"> </td>
  23. <td>
  24. <table>
  25. <tr>
  27. <td>
  29. <img src="{{Imagename}}" width="150" height="150" />
  31. </td>
  32. <td width="30"></td>
  33. <td valign="top">
  34. <table style="color:#9F000F;font-size:large" cellpadding="4" cellspacing="6">
  36. <tr>
  37. <td>
  38. <b>Item code </b>
  39. </td>
  41. <td>
  42. : {{ItemID}}
  43. </td>
  45. </tr>
  46. <tr>
  47. <td>
  48. <b> Item Name</b>
  49. </td>
  51. <td>
  52. : {{ItemName}}
  53. </td>
  55. </tr>
  56. <tr>
  57. <td>
  58. <b> Price </b>
  59. </td>
  61. <td>
  62. : {{ItemPrice}}
  63. </td>
  65. </tr>
  66. <tr>
  67. <td>
  68. <b> Description </b>
  70. </td>
  71. <td>
  72. : {{Descrip}}
  73. </td>
  75. </tr>
  76. <tr>
  77. <td align="center" colspan="2">
  78. <table>
  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>
  87. </td>
  88. <td rowspan="2"><img src="{{cartImageUrl}}" /></td>
  89. </tr>
  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>
  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>
  125. </td>
  126. </tr>
  127. </table>
  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>
  160. <tbody *ngFor="let detail of cartDetails ; let i = index">
  162. <tr>
  163. <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;" align="center">
  164. {{i+1}}
  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>
  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>
  184. <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
  185. <span style="color:#9F000F">
  186. {{detail.CDescription}}
  187. </span>
  188. </td>
  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>
  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>
  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>
  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>
  226. </table>
  227. </td>
  228. </tr>
  230. <tr *ngIf="showDetailsTable">
  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>
  250. </td>
  251. </tr>
  252. </table>
  253. </td>
  254. </tr>
  256. <tr>
  257. <td>
  259. <table style="background-color:#FFFFFF; border: solid 2px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;" cellpadding="2" cellspacing="2" *ngIf="ShoppingDetails">
  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>
  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>
  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>
  275. <td width="120" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
  276. <b>Decription</b>
  277. </td>
  279. <td width="40" align="center" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;">
  280. <b>Price</b>
  281. </td>
  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>
  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>
  293. <td width="200" colspan="5" style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;">
  295. Item Name :
  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>
  302. </tr>
  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>
  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>
  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>
  324. <td style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
  325. <span style="color:#9F000F">
  326. {{detail.description}}
  327. </span>
  328. </td>
  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>
  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”.