Added shopping cart example
This commit is contained in:
parent
9cc25157ca
commit
fcc9084c4f
10 changed files with 193 additions and 3 deletions
17
.vscode/launch.json
vendored
Normal file
17
.vscode/launch.json
vendored
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
// Use IntelliSense to find out which attributes exist for C# debugging
|
||||||
|
// Use hover for the description of the existing attributes
|
||||||
|
// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": "Launch and Debug Hosted Blazor WebAssembly App",
|
||||||
|
"type": "blazorwasm",
|
||||||
|
"request": "launch",
|
||||||
|
"hosted": true,
|
||||||
|
// If you have changed target frameworks, make sure to update the program path.
|
||||||
|
"program": "${workspaceFolder}/Server/bin/Debug/netcoreapp3.1/ShoppingCartStarter.Server.dll",
|
||||||
|
"cwd": "${workspaceFolder}/Server"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
42
.vscode/tasks.json
vendored
Normal file
42
.vscode/tasks.json
vendored
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
{
|
||||||
|
"version": "2.0.0",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"label": "build",
|
||||||
|
"command": "dotnet",
|
||||||
|
"type": "process",
|
||||||
|
"args": [
|
||||||
|
"build",
|
||||||
|
"${workspaceFolder}/Server/ShoppingCartStarter.Server.csproj",
|
||||||
|
"/property:GenerateFullPaths=true",
|
||||||
|
"/consoleloggerparameters:NoSummary"
|
||||||
|
],
|
||||||
|
"problemMatcher": "$msCompile"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "publish",
|
||||||
|
"command": "dotnet",
|
||||||
|
"type": "process",
|
||||||
|
"args": [
|
||||||
|
"publish",
|
||||||
|
"${workspaceFolder}/Server/ShoppingCartStarter.Server.csproj",
|
||||||
|
"/property:GenerateFullPaths=true",
|
||||||
|
"/consoleloggerparameters:NoSummary"
|
||||||
|
],
|
||||||
|
"problemMatcher": "$msCompile"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "watch",
|
||||||
|
"command": "dotnet",
|
||||||
|
"type": "process",
|
||||||
|
"args": [
|
||||||
|
"watch",
|
||||||
|
"run",
|
||||||
|
"${workspaceFolder}/Server/ShoppingCartStarter.Server.csproj",
|
||||||
|
"/property:GenerateFullPaths=true",
|
||||||
|
"/consoleloggerparameters:NoSummary"
|
||||||
|
],
|
||||||
|
"problemMatcher": "$msCompile"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
11
Client/Pages/Cart/Cart.razor
Normal file
11
Client/Pages/Cart/Cart.razor
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
@inherits CartBase
|
||||||
|
@page "/cart"
|
||||||
|
|
||||||
|
<h3>Your Shopping Cart</h3>
|
||||||
|
|
||||||
|
@if(Model != null){
|
||||||
|
@foreach (var line in Model.Items)
|
||||||
|
{
|
||||||
|
<Item details="@line" OnDeleted="ReloadCart" OnQuantityChanged="ReloadCart"/>
|
||||||
|
}
|
||||||
|
}
|
30
Client/Pages/Cart/Cart.razor.cs
Normal file
30
Client/Pages/Cart/Cart.razor.cs
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
using System.Net.Http;
|
||||||
|
using System.Net.Http.Json;
|
||||||
|
using System.Threading.Tasks;
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using ShoppingCartStarter.Shared.Cart;
|
||||||
|
|
||||||
|
namespace ShoppingCartStarter.Client.Pages.Cart
|
||||||
|
{
|
||||||
|
public class CartBase : ComponentBase
|
||||||
|
{
|
||||||
|
[Inject] private HttpClient Http { get; set; }
|
||||||
|
|
||||||
|
protected Details.Model Model { get; set; }
|
||||||
|
|
||||||
|
protected override async Task OnInitializedAsync()
|
||||||
|
{
|
||||||
|
await ReloadCart();
|
||||||
|
}
|
||||||
|
|
||||||
|
protected void RemoveItem(Details.Model.LineItem item)
|
||||||
|
{
|
||||||
|
Model.Items.Remove(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected async Task ReloadCart()
|
||||||
|
{
|
||||||
|
Model = await Http.GetFromJsonAsync<Details.Model>("api/cart");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
20
Client/Pages/Cart/Item.razor
Normal file
20
Client/Pages/Cart/Item.razor
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
@inherits ItemBase
|
||||||
|
|
||||||
|
<div class="row border-bottom py-4">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="media">
|
||||||
|
<img src="/images/@Details.Image" altText="@Details.Name" class="mr-3" />
|
||||||
|
<div class="media-body">
|
||||||
|
<h3>@Details.Name</h3>
|
||||||
|
<div class="form-inline">
|
||||||
|
<label for="qty" class="mr-2">Qty</label>
|
||||||
|
<Quantity Value="Details.Quantity" ValueChanged="QuantityChanged" />
|
||||||
|
<button class="btn btn-danger" @onclick="OnDeleteClicked">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
£@Details.Price
|
||||||
|
</div>
|
||||||
|
</div>
|
42
Client/Pages/Cart/Item.razor.cs
Normal file
42
Client/Pages/Cart/Item.razor.cs
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using ShoppingCartStarter.Shared.Cart;
|
||||||
|
using ShoppingCartStarter.Shared.Cart.LineItem;
|
||||||
|
using System;
|
||||||
|
using System.Net.Http;
|
||||||
|
using System.Net.Http.Json;
|
||||||
|
using System.Threading.Tasks;
|
||||||
|
|
||||||
|
namespace ShoppingCartStarter.Client.Pages.Cart
|
||||||
|
{
|
||||||
|
public class ItemBase : ComponentBase
|
||||||
|
{
|
||||||
|
[Parameter]
|
||||||
|
public Details.Model.LineItem Details { get; set; }
|
||||||
|
|
||||||
|
[Inject]
|
||||||
|
public HttpClient Http { get; set; }
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<Details.Model.LineItem> OnDeleted { get; set; }
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback OnQuantityChanged { get; set; }
|
||||||
|
|
||||||
|
protected async Task OnDeleteClicked()
|
||||||
|
{
|
||||||
|
await Http.DeleteAsync($"api/cart/lines/{Details.Id}");
|
||||||
|
await OnDeleted.InvokeAsync(Details);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected async Task QuantityChanged(int value)
|
||||||
|
{
|
||||||
|
await Http.PutAsJsonAsync("api/cart/lines", new Update.Command
|
||||||
|
{
|
||||||
|
Id = Details.Id,
|
||||||
|
Quantity = value
|
||||||
|
});
|
||||||
|
|
||||||
|
await OnQuantityChanged.InvokeAsync(EventArgs.Empty);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
9
Client/Pages/Cart/Quantity.razor
Normal file
9
Client/Pages/Cart/Quantity.razor
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
@inherits QuantityBase
|
||||||
|
|
||||||
|
<select class="form-control mr-2" id="qty" value="@Value" @onchange="OnChange">
|
||||||
|
<option value="1">1</option>
|
||||||
|
<option value="2">2</option>
|
||||||
|
<option value="3">3</option>
|
||||||
|
<option value="4">4</option>
|
||||||
|
<option value="5">5</option>
|
||||||
|
</select>
|
19
Client/Pages/Cart/Quantity.razor.cs
Normal file
19
Client/Pages/Cart/Quantity.razor.cs
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using System;
|
||||||
|
using System.Threading.Tasks;
|
||||||
|
|
||||||
|
namespace ShoppingCartStarter.Client.Pages.Cart
|
||||||
|
{
|
||||||
|
public class QuantityBase : ComponentBase
|
||||||
|
{
|
||||||
|
[Parameter] public EventCallback<int> ValueChanged { get; set; }
|
||||||
|
|
||||||
|
[Parameter] public int Value { get; set; }
|
||||||
|
|
||||||
|
protected Task OnChange(ChangeEventArgs e)
|
||||||
|
{
|
||||||
|
Value = Convert.ToInt32(e.Value);
|
||||||
|
return ValueChanged.InvokeAsync(Value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -24,7 +24,7 @@ namespace ShoppingCartStarter.Server.Data
|
||||||
if (context.Carts.Any())
|
if (context.Carts.Any())
|
||||||
{
|
{
|
||||||
cart = context.Carts
|
cart = context.Carts
|
||||||
.Include(x=>x.LineItems)
|
.Include(x => x.LineItems)
|
||||||
.FirstOrDefault();
|
.FirstOrDefault();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
"commandName": "Project",
|
"commandName": "Project",
|
||||||
"launchBrowser": true,
|
"launchBrowser": true,
|
||||||
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
|
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
|
||||||
"applicationUrl": "https://localhost:5001;http://localhost:5000",
|
"applicationUrl": "https://localhost:5004;http://localhost:5005",
|
||||||
"environmentVariables": {
|
"environmentVariables": {
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue