使用 ASP.NET Core Blazor、EF 和 Web API 学习创建购物车
4.79/5 (5投票s)
在本文中，我们将学习如何使用 Entity Framework 和 Web API 创建我们自己的 ASP.NET Core Blazor 购物车。
引言
在本文中，我们将学习如何使用 Entity Framework 和 Web API 创建我们自己的 ASP.NET Core Blazor 购物车。请阅读我之前的文章，其中深入介绍了 ASP.NET Core Blazor 的入门知识。
- 使用 Entity Framework 和 Web API 实现 ASP.NET Core Blazor CRUD
- 使用 Entity Framework 和 Web API 实现 ASP.NET Core Blazor 筛选和排序
- 使用 EF 和 Web API 实现 ASP.NET Core Blazor 主从表格（含筛选和排序）
- 使用 EF 和 Web API 实现 ASP.NET Core Blazor 主/明细 CRUD 及过滤和排序
本文将介绍
- 在 SQL Server 中创建带有
ItemDetails和ShoppingDetails表的示例数据库，以便在我们的 Web 应用程序中显示 - 创建 ASP.NET Core Blazor 应用程序
- 在 Blazor Shared 项目中创建 EF、
DBContext类和模型类 - 在 Blazor Server 项目中创建 WEB API
- 创建 Razor 页面以显示
Itemdetails以将商品添加到购物车 - 按商品名称过滤商品。从 Item 文本框，
keyup事件通过搜索名称显示商品 - 选择商品并添加到购物车
- 将选中的商品保存到数据库
- 显示我的购物订单详情
- 删除已订购的商品
在这个购物车演示应用程序中，我们有 3 个部分
- 使用 ASP.NET Core Blazor 从 Web API 在 HTML 表格中显示所有商品并过滤商品
- 将商品添加到购物车并将已购商品保存到数据库
- 在主页上显示用户的购物订单商品
显示所有商品并过滤商品
首先，我们使用 ASP.NET Core Blazor 在购物页面上显示所有商品详情。所有商品详情将从 Web API 结果加载并绑定到 Razor 页面。用户还可以按“商品名称”过滤商品。当用户在“商品名称”过滤文本框中输入任何字符时，相关的商品详情将动态地从数据库加载到购物页面。
将商品添加到购物车
当用户点击“图像名称”时，我们会在顶部显示商品详情，以便将选中的商品添加到购物车。用户可以从选中的购物车中添加或减少商品的数量。用户可以将选中的商品保存到数据库。这里，我们不关注用户登录部分，而是默认固定一个用户为“Shanu”。
购物订单商品
在主页上，我们显示用户的购物订单详情，包括商品图片、商品名称、购物描述、购买数量、总金额以及删除订单选项。
背景
请确保您已在计算机上安装了所有必需的软件。如果没有，请逐一下载并安装所有软件。请注意，由于 Blazor 是一个新框架，我们必须安装 Visual Studio 2017 (15.7) 或更高版本的预览版。
- 安装 .NET Core 2.1 Preview 2 SDK。（您可以在此 链接 中找到所有版本。）
- 安装 Visual Studio 2017 (15.7) 的最新预览版。
- 为 Blazor 扩展安装 ASP.NET Core Blazor 语言服务。
Using the Code
步骤 1 - 创建数据库和表
我们将使用我们的 SQL Server 数据库来构建 WEB API 和 EF。首先，我们创建一个名为 ShoppingDB 的数据库，并创建 ItemDetails 和 ShoppingDetails 表。以下是创建数据库表和在表中插入示例记录的 SQL 脚本。请在您的本地 SQL Server 中运行以下查询，以创建将在我们的项目中使用的数据库和表。
-- =============================================
-- Author : Shanu
-- Create date : 2018-08-01
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2018-08-01
-- =============================================
--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
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,'Images/AccessPoint.png','Access Point for Wifi use','Shanu')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('CD',350,'Images/CD.png','Compact Disk','Afraz')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('Desktop Computer',1400,'Images/DesktopComputer.png','Desktop Computer','Shanu')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('DVD',1390,'Images/DVD.png','Digital Versatile Disc','Raj')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('DVD Player',450,'Images/DVDPlayer.png','DVD Player','Afraz')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('Floppy',1250,'Images/Floppy.png','Floppy','Mak')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('HDD',950,'Images/HDD.png','Hard Disk','Albert')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('MobilePhone',1150,'Images/MobilePhone.png','Mobile Phone','Gowri')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('Mouse',399,'Images/Mouse.png','Mouse','Afraz')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('MP3 Player ',897,'Images/MultimediaPlayer.png','Multi MediaPlayer','Shanu')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('Notebook',750,'Images/Notebook.png','Notebook','Shanu')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('Printer',675,'Images/Printer.png','Printer','Kim')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('RAM',1950,'Images/RAM.png','Random Access Memory','Jack')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('Smart Phone',679,'Images/SmartPhone.png','Smart Phone','Lee')
Insert into ItemDetails(Item_Name,Item_Price,Image_Name,Description,AddedBy) _
values('USB',950,'Images/USB.png','USB','Shanu')
select * from ItemDetails
-- 2) //////////// ShoppingDetails table
-- Create Table ShoppingDetails,This table will be used to store the user shopped items
CREATE TABLE ShoppingDetails
(
shopId int identity(1,1),
Item_ID int ,
UserName VARCHAR(100) NOT NULL,
Qty int NOT NULL,
TotalAmount int,
Description VARCHAR(200) NOT NULL,
shoppingDate DateTime,
CONSTRAINT [PK_ShoppingDetails] PRIMARY KEY CLUSTERED
(
[shopId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, _
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
select * from ShoppingDetails
步骤 2 - 创建 ASP.NET Core Blazor 应用程序
安装完以上所有必需软件和 ASP.NET Core Blazor 语言服务后，请单击桌面上的“开始”>>“程序”>>“Visual Studio 2017”>>“Visual Studio 2017”。单击“新建”>>“项目”。选择“Web”>>“ASP.NET Core Angular Web Application”。输入您的项目名称，然后单击“确定”。
选择 Blazor (ASP.NET Core hosted)，然后单击“确定”。
创建 ASP.NET Core Blazor 应用程序后，请等待几秒钟。您将在解决方案资源管理器中看到以下结构。
ASP.NET Core Blazor 解决方案有什么新内容？
当我们创建一个新的 ASP.NET Core Blazor 应用程序时，我们会在解决方案资源管理器中看到自动创建的 3 个项目。
客户端项目
创建的第一个项目是 Client 项目，它将是我们的 Solutionname.Client。在这里，我们将看到我们的 Solutionname 为“BlazorASPCORE”。由于该项目命名为 client，因此该项目将主要专注于所有客户端视图。在这里，我们将添加所有将在浏览器中显示的客户端页面视图。
我们可以看到这里已经添加了一些示例页面，并且还有一个共享文件夹，与我们的 MVC 应用程序类似，其中包含用于主页的 Sharedfolder 和 Layout 页面。在 Blazor 中，我们有 MainLayout，它将像主页面一样工作，以及用于左侧菜单显示的 NavMenu。
服务器项目
顾名思义，此项目将用作服务器项目。此项目主要用于创建所有控制器和 WEB API 控制器，以执行所有业务逻辑并通过 WEB API 执行 CRUD 操作。在我们的演示应用程序中，我们将在该服务器项目中添加一个 Web API，并在我们的客户端应用程序中添加所有 Web API。该服务器项目将像从数据库获取/设置数据一样工作，而我们的客户端项目将数据绑定或将结果发送到此服务器以在数据库中执行 CRUD 操作。
共享项目
顾名思义，此项目将用作共享项目。该项目将作为我们服务器项目和客户端项目的模型。在此共享项目中声明的模型将在服务器和客户端项目中同时使用。我们还将在此共享项目中安装项目所需的所有包，例如，要使用 Entity Framework，我们将在此共享项目中安装所有包。
运行以测试应用程序
当我们运行应用程序时，我们可以看到左侧有导航，右侧包含数据。我们可以看到我们的 Blazor 网站将显示默认的示例页面和菜单。我们可以使用这些页面，也可以删除它们并开始使用我们自己的页面。
现在，让我们看看如何添加新页面来执行在线购物网站。
使用 Entity Framework
要在我们的 Blazor 应用程序中使用 Entity Framework，我们需要安装以下包
安装包
转到“工具”，然后选择 ->“NuGet 包管理器” ->“程序包管理器控制台”。
您可以看到 VS 2017 IDE 底部的控制台，在控制台上的组合框的右侧，将默认项目选择为我们的共享项目“选择共享”。
您将看到 PM>，然后复制并粘贴下面的行以安装数据库提供程序包。此包用于将数据库提供程序设置为 SQL Server。
Install-Package Microsoft.EntityFrameworkCore.SqlServer
我们可以看到包已安装在我们的共享文件夹中。
安装 Entity Framework
您将看到 PM>，然后复制并粘贴下面的行以安装 EF 包。
Install-Package Microsoft.EntityFrameworkCore.Tools
创建 DB Context 并设置 DB 连接字符串
您可以看到 PM>，复制并粘贴以下行，设置连接字符串并创建 DB Context。这是重要部分，因为我们提供了 SQL Server 名称、数据库名称以及 SQL Server 用户 ID 和 SQL Server 密码来连接到我们的数据库以显示我们的购物车详情。我们还提供了两个 SQL 表名“ItemDetails、ShoppingDetails”来在我们的共享项目中创建Model类。
Scaffold-DbContext "Server= YourServerName;Database=ShoppingDB;user id=SQLID;
password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true"
Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables ItemDetails ,ShoppingDetails
按 Enter 键创建连接字符串、Model 类和数据库上下文。
我们将在我们的共享项目中看到 ItemDetails 和 ShoppingDetails Model 类以及 ShoppingDBContext 类。我们将在服务器项目中使用此Model和DBContext来创建我们的 Web API。
创建用于获取商品详情的 Web API
要创建我们的 WEB API 控制器，请右键单击“Controllers”文件夹。单击“添加新控制器”。
在这里，我们将使用 `Scaffold` 方法来创建我们的 WEB API。我们选择“带有操作的 API 控制器，使用 Entity Framework”。
从共享项目中选择我们的 `Model` 和 `DatabaseContext`。
从共享项目中选择我们的 ItemDetails 模型。
选择数据上下文类作为我们共享项目中的 ShoppingDBContext。如果您需要，Controller 名称将自动添加，您可以更改它，然后单击 ADD。
我们将仅使用 Web API 的 `Get` 方法。
同样，我们还为 ShoppingDetails 创建了一个 Web API。
在 ShoppingDetails Web API 控制器的 get 方法中，我们将使用 LINQ join 查询来选择 Item 和 Shopping Details，以便在主页上显示商品详情以及购物详情给用户。
[HttpGet]
public IEnumerable<myShopping> GetShoppingDetails()
{
var results = (from items in _context.ItemDetails
join shop in _context.ShoppingDetails
on items.ItemId equals shop.ItemId
select new myShopping
{
ShopId = shop.ShopId,
ItemName = items.ItemName,
ImageName = items.ImageName,
UserName = shop.UserName,
Qty = shop.Qty,
TotalAmount = shop.TotalAmount,
Description = shop.Description,
ShoppingDate = shop.ShoppingDate
}).ToList();
return results;
}
要测试 Get 方法，我们可以运行我们的项目并复制 GET 方法的 API 路径。在这里，我们可以看到获取api/ItemDetails / 的 API 路径。
运行程序并粘贴 API 路径以测试我们的输出。
对于 ShoppingDetails，我们可以获取 Itemdetails 和 ShoppingDetails 表的结果。在这里，我们可以看到来自 Web API 路径/api/ ShoppingDetails 的结果。
现在，我们将把所有这些 WEB API 的 JSON 结果绑定到我们 Client 项目中的 Razor 视图页面，以显示购物列表。
处理客户端项目
注意：在本文中，我们将创建 2 个 Razor 页面。在一个 Razor 页面中，我们将显示商品详情，用户可以通过将选定的商品添加到购物车来购物，并将已购详情保存到数据库。在主页上，我们将用户购买的详情与Item和Shopping详情一起绑定。
创建购物页面
添加 Razor 视图
要添加 Razor 视图页面，请右键单击Client项目中的Pages文件夹。单击“添加”>>“新建项”
选择 Razor View >> 输入您的页面名称，这里我们将其命名为Shopping.chtml。
在 Razor 视图页面中，我们有 3 部分代码：第一部分是导入部分，我们在其中导入所有要在视图中使用的引用和模型；第二部分是 HTML 设计和数据绑定部分；最后，我们有函数部分，用于调用所有 Web API 以绑定到我们的 HTML 页面，并执行要在视图页面中显示的客户端业务逻辑。
导入部分
首先，我们在 Razor 视图页面中导入所有必需的支持文件和引用。在这里，我们首先导入了要在视图中使用的Model类，还导入了HTTPClient用于调用 Web API 以将结果 JSON 绑定到我们的 Razor 页面。
@page "/Shopping"
@using BlazorShoppingCarts.Shared
@using BlazorShoppingCarts.Shared.Models
@using Microsoft.AspNetCore.Blazor.Browser.Interop
@using System.Collections.Generic
@using Microsoft.AspNetCore.Blazor
@inject HttpClient Http
显示所有商品并过滤商品
首先，我们将商品详情与过滤选项绑定，用户可以通过单击图像将商品添加到购物车。
在这里，我们绑定了所有商品详情。
绑定商品详情及过滤代码的 HTML 部分
在 Init 方法中，我们从 Web API 获取ItemDetails，并使用foreach循环将结果绑定到 HTML 表格。我们添加选项作为网格的过滤项，为此，我们在表格中添加了一个新行，并为ItemName添加了一个用于过滤的文本框。在过滤文本框的onChange事件中，我们将按下的键值传递以过滤商品。在商品列表中，我们还使用图像绑定商品，在单击图像时，我们将选定的商品添加到购物车以供购物。
@if (itmDetail == null)
{
<p><em>Loading...</em></p>
}
else
{
<table style="background-color:#FFFFFF; border: solid 2px #6D7B8D;
padding: 5px;width: 100%;table-layout:fixed;"
cellpadding="2" cellspacing="2">
<tr style="height: 30px; background-color:#336699 ;
color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="40" align="center">
<b>Image</b>
</td>
<td width="40" align="center"
style="border: solid 1px #FFFFFF; padding: 5px;
table-layout:fixed;cursor: pointer;">
<b>Item Code</b>
</td>
<td width="120" align="center"
style="border: solid 1px #FFFFFF; padding: 5px;
table-layout:fixed;cursor: pointer;">
<b>Item Name</b>
</td>
<td width="120" align="center"
style="border: solid 1px #FFFFFF; padding: 5px;
table-layout:fixed;cursor: pointer;">
<b>Decription</b>
</td>
<td width="40" align="center"
style="border: solid 1px #FFFFFF; padding: 5px;
table-layout:fixed;cursor: pointer;">
<b>Price</b>
</td>
<td width="90" align="center"
style="border: solid 1px #FFFFFF; padding: 5px;
table-layout:fixed;cursor: pointer;">
<b>User Name</b>
</td>
</tr>
<tr style="height: 30px; background-color:#336699 ;
color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="40" align="center">
Filter By ->
</td>
<td style="border: solid 1px #FFFFFF; padding: 5px;
table-layout:fixed;">
Item Name :
</td>
<td width="200" colspan="4"
style="border: solid 1px #FFFFFF; padding: 5px;
table-layout:fixed;">
<input width="70"
onchange=@OnItemNameChanged oninput="(this.dispatchEvent
(new CustomEvent('change', {bubbles: true})))" />
</td>
</tr>
<tbody>
@foreach (var itmDtl in itmDetail)
{
<tr>
<td align="center"
style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
<img src="@itmDtl.ImageName"
style="height:56px;width:56px"
onclick="@(async () =>
await AddItemtoShoppingCart(@itmDtl))" />
</span>
</td>
<td style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
@itmDtl.ItemId
</span>
</td>
<td style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
@itmDtl.ItemName
</span>
</td>
<td style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
@itmDtl.Description
</span>
</td>
<td align="right" style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
@itmDtl.ItemPrice
</span>
</td>
<td style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
@itmDtl.AddedBy
</span>
</td>
</tr>
}
</tbody>
</table>
}
Blazor 函数部分，用于将商品详情绑定到带有过滤功能的 HTML 网格
函数部分
函数部分用于调用 Web API 以绑定到我们的 HTML 页面，并执行将在视图页面中显示的客户端业务逻辑。在函数部分，我们首先声明页面所需的所有对象。
@functions {
string UserName = "Shanu";
string selectItemImage = "";
string selectedItemName = "";
int initialPrice = 0;
string Messages = "";
ShoppingDetails[] shoppingDetails;
ItemDetails[] itmDetail;
ShoppingDetails SD = new ShoppingDetails();
ItemDetails ID = new ItemDetails();
Boolean showAddtoCart = false;
Init 方法
在 Init 方法中，我们获取ItemDetails的 Web API 结果，并将其存储在itemDetail对象中。我们使用此对象通过foreach语句将其绑定到 HTML 表格。
在 Item Name 列标题部分，我们添加了一个新行用于过滤 HTML 网格。在 ItemName 列过滤器文本框的Change事件中，我们传递Textbox值。我们调用一个通用的过滤方法FilteringList，在该方法中，我们传递过滤列Textbox值和列名称来过滤ItemDetails并将结果绑定到 HTML 网格。
protected override async Task OnInitAsync()
{
itmDetail = await Http.GetJsonAsync<ItemDetails[]>("/api/ItemDetails/");
}
// For Filtering by Item Name
void OnItemNameChanged(UIChangeEventArgs args)
{
string values = args.Value.ToString();
FilteringList(values);
}
//Filtering
protected async Task FilteringList(String Value)
{
itmDetail = await Http.GetJsonAsync<ItemDetails[]>("/api/ItemDetails/");
if (Value.Trim().Length > 0)
{
itmDetail = itmDetail.Where(x => x.ItemName.Contains(Value)).ToArray();
}
else
{
itmDetail = await Http.GetJsonAsync<ItemDetails[]>("/api/ItemDetails/");
}
}
将商品添加到购物车
用户可以通过单击List中的商品图像将商品添加到购物车。在商品图像单击时，我们调用函数将结果绑定到购物车以供购物。默认情况下，我们对用户隐藏购物车部分，并在页面加载时将showAddtoCart设置为false，当用户单击商品图像时，我们将showAddtoCart设置为true以显示购物详情。这是设计购物车部分的 HTML。
@if (showAddtoCart == true)
{
<table style="background-color:#FFFFFF; border: dashed 3px #d55500;
padding: 5px;width: 99%;table-layout:fixed;" cellpadding="2"
cellspacing="6">
<tr style="height: 30px; color:#336699 ;border: solid 1px #659EC7;">
<td width="40px">
<img src="Images/shopping_cart64.png"
height="38" width="38" /></td>
<td>
<h2> <strong>Add Items to Cart</strong></h2>
</td>
</tr>
<tr>
<td width="10px"> </td>
<td>
<table >
<tr >
<td style="width:250px;-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px #888;
box-shadow: inset 1px 1px 5px #888;
display: block;">
<img src="@selectItemImage"
style="height:250px;width:250px" />
</td>
<td width="10"></td>
<td align="left" width="500px"
valign="top">
<table style="width:500px;color:#9F000F;font-size:large;
width:98%;" cellpadding="4" cellspacing="6">
<tr style="height: 30px;
color:#416048 ;border-bottom: solid 1px #659EC7;">
<td>
<h2>
@selectedItemName
</h2>
</td>
</tr>
<tr style="height: 30px; color:#e13a19 ;
border-bottom: solid 1px #659EC7;">
<td>
<h3>
Price : @initialPrice
</h3>
</td>
</tr>
<tr style="height: 30px; color:#3a729a ;
border-bottom: solid 1px #659EC7;">
<td>
<table>
<tr>
<td>
<h3>
Qty : @SD.Qty
</h3>
</td>
<td>
<table>
<tr>
<td>
<img src="Images/UP.png"
height="20" width="20"
onclick="@IncreaseQty" />
</td>
</tr>
<tr>
<td>
<img src="Images/Down.png"
height="20" width="20"
onclick="@DecreaseQty" />
</td>
</tr>
</table>
</td>
<td style="color:#e13a19 ;">
<h4>
Total Amount : @SD.TotalAmount
</h4>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 30px; color:#e13a19 ;">
<td>
<h3>
Notes : <input type="text"
class="form-control"
bind="@SD.Description" />
</h3>
</td>
</tr>
<tr >
<td>
<h3>
<button type="submit"
class="btn btn-success"
onclick="@(async () =>
await SaveShoppingetails())"
style="width:220px;">
<img src="Images/shopping_cart64.png"
height="32" width="32" />
BUY NOW</button>
</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
}
商品图像单击事件
当用户从列表中单击商品图像时，我们将调用AddItemtoShoppingCart并将选定的ItemDetails传递给该函数。在此函数中，我们首先将showAddtoCart设置为true以显示购物列表。我们还将选定的商品详情绑定到购物列表以添加到购物车。
protected async Task AddItemtoShoppingCart(ItemDetails itemAdd)
{
showAddtoCart = true;
initialPrice = 0;
SD.ItemId = itemAdd.ItemId;
selectedItemName = itemAdd.ItemName;
SD.Qty = 1;
initialPrice = itemAdd.ItemPrice;
SD.TotalAmount = itemAdd.ItemPrice;
SD.UserName = UserName;
selectItemImage = itemAdd.ImageName;
SD.ShoppingDate = DateTime.Now;
SD.Description = "";
}
购物车数量增加和减少
在购物车中，用户可以增加/减少购物数量。当用户单击Qty附近的向上箭头图像时，我们将调用IncreaseQty方法，在此方法中，我们将Quantity增加并更新总金额。同样，当用户单击向下箭头图标时，我们将调用DecreaseQty方法以反向操作，减少数量并更新总金额。
void IncreaseQty()
{
if (SD.Qty > 0)
{
SD.Qty = SD.Qty + 1;
SD.TotalAmount = initialPrice * SD.Qty;
}
}
void DecreaseQty()
{
if (SD.Qty > 1)
{
SD.Qty = SD.Qty - 1;
SD.TotalAmount = initialPrice * SD.Qty;
}
}
保存购物列表
最后，当用户单击立即购买按钮时，我们将购物详情传递给我们的数据库中的ShoppingDetails表以保存结果。
//Save Shopping Details
protected async Task SaveShoppingetails()
{
await Http.SendJsonAsync(HttpMethod.Post, "/api/ShoppingDetails/", SD);
Messages = "Your Shopping is completed! Enjoy more shopping from my Site :)";
SD = null;
showAddtoCart = false;
}
购物订单商品
在主页上，我们将用户的已购详情与商品名称、图像、订单日期、订购数量和总金额一起绑定。用户还可以从主页取消订单。当用户单击取消订单时，我们将从表中删除购物订单详情。
@if (myShopList == null)
{
<p><em>Loading...</em></p>
}
else
{
@foreach (var myShoppings in myShopList)
{
<table>
<tr>
<td>
<table class="divContainer">
<tr>
<td align="left" width="112px">
<span style="color:#9F000F">
<img src="@myShoppings.ImageName"
style="height:110px;width:110px" />
</span>
</td>
<td align="left" valign="top">
<table>
<tr>
<td valign="top">
<h2 style="color:#244f2b">
@myShoppings.ItemName </h2>
</td>
</tr>
<tr>
<td>
Order Date : @myShoppings.ShoppingDate.
Value.ToString("yyyy-MM-dd HH:mm")
</td>
</tr>
<tr>
<td>
@myShoppings.Description
</td>
</tr>
<tr>
<td>
<h3 style="color:#ff0000">
@myShoppings.TotalAmount (INR) /
@myShoppings.Qty (QTY)</h3>
</td>
</tr>
</table>
</td>
<td>
<h3>
<button type="submit" class="btn btn-danger"
onclick="@(async () => await deleteConfirm
(@myShoppings))" style="width:220px;">
<img src="Images/delete.png" /> Cancel Order
</button>
</h3>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:10px;">
</td>
</tr>
</table>
}
}
在函数部分，我们首先声明此页面所需的所有对象，并在Init方法中，我们加载所有ShoppingDetails并将结果绑定到 HTML 网格。
@functions {
string UserName = "Shanu";
ShoppingDetails SD = new ShoppingDetails();
string Messages = "";
myShopping[] myShopList;
int shopID = 0;
protected override async Task OnInitAsync()
{
shopID = 0;
myShopList = await Http.GetJsonAsync<myShopping[]>("/api/ShoppingDetails/");
}
取消订单
当用户单击取消订单按钮时，我们将调用deleteConfirm方法，并将选定的ShoppingDetails ID 传递给删除。在删除之前，我们会收到一个确认消息：“您确定要取消您的商品订单吗？”。
@if (Messages != "")
{
<div id="outPopUp" style="position: absolute; width: 552px; height: 320px; z-index: 15;
top: 38%; left: 50%; margin: -100px 0 0 -150px; background: #fbde5a;">
<div id="outPopUp" style="position: absolute; width: 551px;
height: 248px; background: #fc3a2e;">
<img src="Images/C1.png" onclick="@closeMessage" />
<span style="color:#ECF3F4;font-size:xx-large;display: inline-block;
margin: 10px 10px 0 0; padding: 5px 10px ">
@Messages
</span>
</div>
<div id="outPopUp" style="position: absolute;
top:260px; width:350px;left:24%; height: 70px; ">
<h3>
<button type="submit" class="btn btn-success"
onclick="@(async () => await deleteShopping())" style="width:150px;">
<img src="Images/tick.png" height="32px" width="32px"/> Ok
</button>
<button type="submit" class="btn btn-danger"
onclick="@closeMessage" style="width:150px;">
<img src="Images/delete1.png"
height="32px" width="32px"/> Cancel
</button>
</h3>
</div>
</div>
}
protected async Task deleteConfirm(myShopping sds)
{
shopID = sds.ShopId;
Messages = "Are you Sure to Cancel your " + sds.ItemName + " Order ?";
}
如果用户单击“确定”按钮，我们将调用deleteShopping方法，在该方法中，我们将按选定的 Shopping ID 删除ShoppingDetails。如果用户单击“取消”按钮，我们将隐藏确认消息并取消删除购物订单。
protected async Task deleteShopping()
{
await Http.DeleteAsync("/api/ShoppingDetails/" + Convert.ToInt32(shopID));
Messages = "";
myShopList = await Http.GetJsonAsync<myShopping[]>("/api/ShoppingDetails/");
}
void closeMessage()
{
shopID = 0;
Messages = "";
}
导航菜单
现在，我们需要将这个新添加的 Shopping Razor 页面添加到我们的左侧导航栏。为此，请打开 Shared 文件夹并打开NavMenu.cshtml页面，然后添加菜单。
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match=NavLinkMatch.All>
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="Shopping">
<img src="Images/shopping_cart64.png"
height="32" width="32" /> Let's Shop
</NavLink>
</li>
关注点
创建DBContext并设置连接字符串时，不要忘记添加您的 SQL 连接字符串。希望大家喜欢这篇文章，在下一篇文章中，我们将看到更多关于 Blazor 的示例，并且使用 Blazor 真的非常酷炫和棒。
历史
- 2018-08-01: BlazorShoppingCarts.zip