ASP。NET Core, Angular2购物车使用Web API和EF 1.0.1
介绍 在本文中，让我们看看如何使用ASP创建购物车。NET Core, Angular 2, Entity Framework 1.0.1和Web API的模板包。 请注意 请阅读我们的前一篇文章，它对如何开始使用ASP做了深入的解释。NET Core模板包 ASP。NET Core Angular 2 EF 1.0.1 Web API使用模板包。https://www.codeproject.com/Articles/1164078/ASP-NET-Core-Angular-Master-Detail-HTML-Grid-using 在这篇文章中， 在SQL Server中创建示例数据库和ItemDetails表，以显示在我们的web应用程序中。创建ASP。NET Core Angular 2 Starter应用程序(。使用模板包创建EF, DBContext类和模型类。创建我们的组件TypeScript文件，以获得WEB API JSON结果使用Http模块。按项目名称过滤项目。从项目文本框keyup事件显示项目的搜索名称。选择和添加项目到购物车。在购物车中显示总价格，总数量和总价格。显示购物车细节。 这篇文章将详细解释如何使用ASP创建一个简单的购物车。NET Core, Angular2, Web API和EF模板包。 在这个购物车演示应用程序中，我们有3个部分 显示所有项目和过滤器项目在HTML表使用Angular2从WEB API。将选定的项目添加到购物车前详细显示。显示价格，数量和总计所有项目在购物车。 显示所有项目和筛选项目 首先，我们使用Angular2在购物页面中显示所有商品的详细信息。所有项目细节都将从WEB API加载。用户还可以根据项目名称筛选项目。当用户在项目名称过滤文本框中输入任何字符时，相关项目的详细信息将从数据库动态加载到购物页面。 显示所选项目的详细信息 当用户点击图像名称时，我们会在顶部显示详细的项目细节，以将选中的项目添加到购物车中。当用户点击“添加到购物车”按钮时，选中的商品将被添加到购物车中。 购物车的细节 当用户点击“添加商品到购物车”按钮时，选中的商品将被添加到购物车中，在添加到购物车之前，我们检查商品是否已经添加到购物车中。如果项目已经添加到购物车，那么我们将增加购物车中的数量，如果项目没有添加，那么新选择的项目将添加到购物车。在购物车中，我们还显示已添加到购物车中的商品的数量。在购物车中，我们还计算总数量，总价格和Grand Price的总购物细节，将显示在购物项目细节的最后。 先决条件 确保已在计算机中安装了所有先决条件。如果没有，那么下载并安装所有，一个一个。 首先，从这个链接下载并安装带有更新3的Visual Studio 2015。如果你有Visual Studio 2015，但还没有更新到更新3，从这个链接下载并安装Visual Studio 2015更新3。下载并安装。net Core 1.0.1下载并安装TypeScript 2.0下载安装Node.js v4.0或以上版本。我安装了V6.9.1(下载链接)。下载和安装下载ASP。NET Core模板包visz文件从这个链接。 使用的代码 步骤1创建数据库和表 我们将创建一个ItemDetails表，用于购物车网格数据绑定。 下面是创建数据库、表和示例插入查询的脚本。 在SQL服务器中运行此脚本。我用过SQL Server 2014. 隐藏,收缩,复制Code
-- ============================================= -- Author : Shanu -- Create date : 2017-02-03 -- Description : To Create Database,Table and Sample Insert Query -- Latest -- Modifier : Shanu -- Modify date : 2017-02-03 -- ============================================= --Script to create DB,Table and sample Insert data 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
步骤2-创建ASP。NET Core Angular 2应用程序 在安装了上面列出的所有先决条件和ASP。NET Core模板，点击开始>>项目在祝辞Visual Studio 2015 >>Visual Studio 2015，在你的桌面上。单击New祝辞祝辞项目。选择Web祝辞祝辞ASP。NET Core Angular 2启动器。输入项目名称并单击OK。 在创建ASP。NET Core Angular 2应用，等几秒钟。您将看到所有依赖项都自动恢复。 我们将在我们的项目中使用所有这些来创建、构建和运行我们的Angular 2。NET Core模板包，WEB API和EF 1.0.1 3 .创建实体freamework 添加实体框架包 在我们的ASP中添加实体框架包。网络核心应用程序。打开项目。JSON文件和在依赖项中添加下面一行。 请注意 这里我们使用的是EF 1.0.1版本。 隐藏,复制Code
"Microsoft.EntityFrameworkCore.SqlServer": "1.0.1", "Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final"
当我们保存项目时。我们可以看到json文件的引用被恢复。 几秒钟后，我们可以看到实体框架包已经恢复，所有的引用已经添加。 添加连接字符串 添加连接字符串我们的SQL连接打开了“appsettings”。是的，这是一个json文件，这个文件看起来像下面的默认图像。 在这个appsettings。json文件添加我们的连接字符串 隐藏,复制Code
"ConnectionStrings": {
"DefaultConnection": "Server=YOURDBSERVER;Database=ShoppingDB;user id=SQLID;password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true;"
},
注意:根据本地连接更改SQL连接字符串。 下一步是创建一个名为“Data”的文件夹来创建我们的模型和DBContext类。 为项目详细信息创建模型类 我们可以通过在数据文件夹中添加一个新的类文件来创建模型。右键单击数据文件夹，然后单击Add>单击Class。输入类名作为itemDetails并单击Add。 现在在这个类中，我们首先创建属性变量，添加ItemDetails。我们会在我们的WEB API控制器中使用它 隐藏,收缩,复制Code
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using System.ComponentModel.DataAnnotations; namespace Angular2ASPCORE.Data { public class ItemDetails { [Key] public int Item_ID { get; set; } [Required] [Display(Name = "Item_Name")] public string Item_Name { get; set; } [Required] [Display(Name = "Item_Price")] public int Item_Price { get; set; } [Required] [Display(Name = "Image_Name")] public string Image_Name { get; set; } [Required] [Display(Name = "Description")] public string Description { get; set; } [Required] [Display(Name = "AddedBy")] public string AddedBy { get; set; } } }
创建数据库上下文 DBContext是用于建立到数据库的连接的实体框架类。 我们可以通过在数据文件夹中添加一个新的类文件来创建一个DBContext类。右键单击数据文件夹，然后单击Add>单击Class。输入类名ItemContext并单击Add。 在这个类中，我们继承了DbContext并为ItemDetails表创建了Dbset。 隐藏,复制Code
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.EntityFrameworkCore; namespace Angular2ASPCORE.Data { public class ItemContext : DbContext { public ItemContext(DbContextOptions<ItemContext> options) : base(options) { } public ItemContext() { } public DbSet<ItemDetails> ItemDetails { get; set; } } }
Startup.CS 现在我们需要将数据库连接字符串和提供程序添加为SQL SERVER。要添加这个，我们在setup .cs文件中配置服务方法下添加以下代码。 隐藏,复制Code
// Add Entity framework . services.AddDbContext<ItemContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
步骤4创建Web API 要创建我们的WEB API控制器，右键单击Controllers文件夹。单击Add并单击New Item。 单击ASP。右面入网单击Web API控制器类。输入名称为“itemDetailsAPI”。然后点击添加。 在这里，我们只使用Get方法从数据库获取所有ItemDetails结果，并使用Angular2将最终结果绑定到html文件。 在这个web API中，我们获得了所有的ItemDetails和ItemDetails 由条件项目名加载。 隐藏,收缩,复制Code
[Produces("application/json")] [Route("api/ItemDetailsAPI")] public class ItemDetailsAPI : Controller { private readonly ItemContext _context; public ItemDetailsAPI(ItemContext context) { _context = context; } // GET: api/values [HttpGet] [Route("Details")] public IEnumerable<ItemDetails> GetItemDetails() { return _context.ItemDetails; } // GET api/values/5 [HttpGet] [Route("Details/{ItemName}")] public IEnumerable<ItemDetails> GetItemDetails(string ItemName) { //return _context.ItemDetails.Where(i => i.Item_Name == ItemName).ToList(); ; return _cont }
为了测试它，我们可以运行我们的项目并复制get方法的API路径，这里我们可以看到get的API路径是/ API/ ItemDetailsAPI/Details 运行程序并粘贴上面的API路径来测试我们的输出。 为了通过ItemName获得项目的详细信息，这里我们可以看到从ItemName“DVD”开始的所有项目详细信息已经被加载。 / api / ItemDetailsAPI /细节/ DVD 使用Angular2 我们在ClientApp/App文件夹下创建所有与Angular2相关的应用程序、模块、服务、组件和html模板。 我们创建“model”文件夹来添加我们的模型，并在app文件夹下创建“shopping”文件夹来创建typescript和html文件来显示项目细节。 备注-图像文件夹 首先在购物文件夹中创建一个名为“Images”的文件夹。我已经使用这个文件夹来显示所有的购物车图像。如果您将购物映像存储在代码的其他路径中，则需要相应地更改。 步骤5创建我们的第一个组件TypeScript 右键点击购物文件夹，然后点击添加新项目。从左侧选择客户端，选择TypeScript文件，并将该文件命名为“shop .component.ts”，然后点击添加。 首先我们创建ItemDetails.ts 和CartItemDetails。ts模型作为typescript文件。 ItemDetails.ts 隐藏,复制Code
//// For ItemDetails export interface ItemDetails { Item_ID: number; Item_Name: string; Item_Price: number; Image_Name: string; Description: string; AddedBy: string; }
CartItemDetails.ts 隐藏,复制Code
export class CartItemDetails { constructor( public CItem_ID: number, public CItem_Name: string, public CImage_Name: string, public CDescription: string, public CAddedBy: string, public CItem_Price: number, public CQty: number, public CTotalPrice: number ) { } }
我们将这个类导入到我们的shop .component中，以绑定JSon结果。 在students.component.ts文件中，我们有三个部分，首先是 接下来是组件部分，接下来是用于编写业务逻辑的类。 首先，我们导入angular文件以用于组件;这里我们导入http来使用我们的Angular2组件中的http客户端。 在组件中，我们有选择器和模板。Selector是为这个应用程序提供一个名称，在html文件中，我们使用这个选择器名称来显示在html页面中。 在模板中，我们给出输出的html文件名。在这里，我们将创建一个html文件为“students.component.html”。 导出类是主要类，我们在其中执行要在组件模板中使用的所有业务逻辑和变量声明。在这个类中，我们获得API方法结果并将结果绑定到学生数组。 为了便于理解，我在代码部分注释了每个部分。 隐藏,收缩,复制Code
import { Component, Injectable, Inject, EventEmitter, Input, OnInit, Output, NgModule } from <a href="mailto:'@angular/core'">'@angular/core'</a>; import { FormsModule } from <a href="mailto:'@angular/forms'">'@angular/forms'</a>; import { ActivatedRoute, Router } from <a href="mailto:'@angular/router'">'@angular/router'</a>; import { BrowserModule } from <a href="mailto:'@angular/platform-browser'">'@angular/platform-browser'</a>; 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(); } }
步骤6创建第一个组件HTML文件 右键点击购物文件夹，然后点击添加新项目。从左侧选择客户端，选择html文件，并将该文件命名为“shopping.component.html”，然后单击添加。 编写下面的html代码来将结果绑定到我们的html页面中，以显示所有的购物项目和购物车细节。 隐藏,收缩,复制Code
<h1>{{myName}} ASP.NET Core , Angular2 Shopping Cart using Web API and EF 1.0.1 </h1> <hrstyle="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>--> <tableid="tblContainer"style='width: 99%;table-layout:fixed;'> <tr*ngIf="AddItemsTable"> <td> <tablestyle="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;"cellpadding="2"cellspacing="2"> <trstyle="height: 30px; color:#ff0000 ;border: solid 1px #659EC7;"> <tdwidth="40px"> </td> <td> <h2> <strong>Add Items to Cart</strong></h2> </td> </tr> <tr> <tdwidth="40px"> </td> <td> <table> <tr> <td> <imgsrc="{{Imagename}}"width="150"height="150"/> </td> <tdwidth="30"></td> <tdvalign="top"> <tablestyle="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> <tdalign="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> <tdrowspan="2"><imgsrc="{{cartImageUrl}}"/></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td><hrstyle="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;"/></td> </tr> <tr*ngIf="CartDetailsTable"> <td> <tablewidth="100%"> <tr> <td> <tablestyle="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;"cellpadding="2"cellspacing="2"> <trstyle="height: 30px; color:#123455 ;border: solid 1px #659EC7;"> <tdwidth="40px"> </td> <tdwidth="60%"> <h1> My Recent Orders Items <strongstyle="color:#0094ff"> ({{totalItem}})</strong></h1> </td> <tdalign="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> <tablestyle="background-color:#FFFFFF; border:solid 2px #6D7B8D;padding: 5px;width: 100%;table-layout:fixed;"cellpadding="2"cellspacing="2"> <trstyle="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;"> <tdwidth="30"align="center">No</td> <tdwidth="80"align="center"> <b>Image</b> </td> <tdwidth="90"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>Item Code</b> </td> <tdwidth="140"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>Item Name</b> </td> <tdwidth="160"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>Decription</b> </td> <tdwidth="90"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>Price</b> </td> <tdwidth="90"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>Quantity</b> </td> <tdwidth="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> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"align="center"> {{i+1}} </td> <tdalign="center"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"*ngIf!="getImagename(detail.CImage_Name)"> <imgsrc="{{ImageUrl}}"style="height:56px;width:56px"> </span> </td> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> {{detail.CItem_ID}} </span> </td> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> {{detail.CItem_Name}} </span> </td> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> {{detail.CDescription}} </span> </td> <tdalign="right"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> {{detail.CItem_Price | number}} </span> </td> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"align="right"> <spanstyle="color:#9F000F"> {{detail.CQty}} </span> </td> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"align="right"> <spanstyle="color:#9F000F"> {{detail.CTotalPrice*detail.CQty | number}} </span> </td> <tdalign="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> <tdcolspan="5"height="40"align="right"> <strong>Total </strong></td> <tdalign="right"height="40"><strong>Price: {{ totalPrice | number}}</strong></td> <tdalign="right"height="40"><strong>Qty : {{ totalQty | number}}</strong></td> <tdalign="right"height="40"><strong>Sum: {{ GrandtotalPrice | number}}</strong></td> <td></td> </tr> </table> </td> </tr> </table> </td> </tr> <tr*ngIf="showDetailsTable"> <td> <tablewidth="100%"style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;"cellpadding="2"cellspacing="2"> <tr> <td> <tablestyle="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;"cellpadding="2"cellspacing="2"> <trstyle="height: 30px; color:#134018 ;border: solid 1px #659EC7;"> <tdwidth="40px"> </td> <tdwidth="60%"> <h2> <strong>Item Details</strong></h2> </td> <tdalign="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> <tablestyle="background-color:#FFFFFF; border: solid 2px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;"cellpadding="2"cellspacing="2"*ngIf="ShoppingDetails"> <trstyle="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;"> <tdwidth="40"align="center"> <b>Image</b> </td> <tdwidth="40"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>Item Code</b> </td> <tdwidth="120"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>Item Name</b> </td> <tdwidth="120"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>Decription</b> </td> <tdwidth="40"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>Price</b> </td> <tdwidth="90"align="center"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;cursor: pointer;"> <b>User Name</b> </td> </tr> <trstyle="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;"> <tdwidth="40"align="center"> Filter By -> </td> <tdwidth="200"colspan="5"style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;"> Item Name : <inputtype="text"(ngModel)="ItemName"(keyup)="getShoppingDetails(myInput.value)"#myInputstyle="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> <tdalign="center"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"*ngIf!="getImagename(detail.image_Name)"> <imgsrc="{{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> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> {{detail.item_ID}} </span> </td> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> {{detail.item_Name}} </span> </td> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> {{detail.description}} </span> </td> <tdalign="right"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> {{detail.item_Price}} </span> </td> <tdstyle="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> {{detail.addedBy}} </span> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>
构建并运行应用程序 的兴趣点 首先在SQL服务器中创建数据库和表。您可以运行本文中的SQL脚本来创建ShoppingDB数据库和ItemDetails表，并且不要忘记更改“appsettings.json”中的连接字符串。 历史 ASPCoreAngular2Shopping.zip——2017/02/03 本文转载于：http://www.diyabc.com/frontweb/news17330.html
