在Views/Shared/Components目录,再新增CartList目录,最後加上Default.cshtml,也就是之前继承ViewComponent的CartList.cs会回传的页面,主要是显示购物车的内容:
@model WebMvc.Models.CartModels.Cart
@{
ViewData["Title"] = "My Cart";
}
<div class="container-fluid">
@if (TempData.ContainsKey("CartInoperativeMsg"))
{
<br />
<div class="alert alert-warning" role="alert">
@TempData["CartInoperativeMsg"]
</div>
}
else
{
<div class="nes-table-responsive">
<table class="nes-table is-bordered">
<thead>
<tr>
<th>Picture</th>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Items.Count; i++)
{
var item = Model.Items[i];
<tr>
<td><img class="" src="@item.PictureUrl" /></td>
<td>@item.ProductName</td>
<td>$ @item.UnitPrice.ToString("N2")</td>
<td>
<input type="hidden" name="@("quantities[" + i + "].Key")" value="@item.Id" />
<input type="number" class="" min="1" name="@("quantities[" + i + "].Value")" value="@item.Quantity" />
</td>
<td>
$ @Math.Round(item.Quantity * item.UnitPrice, 2).ToString("N2")
@if (item.OldUnitPrice != 0)
{
<div class="alert alert-warning" role="alert"> Note that the price of this product changed in our Catalog. The old price when you originally added it to the cart was $ @item.OldUnitPrice </div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="container">
<article class="row">
<section class="col-xs-10"></section>
<section class="col-xs-2">Total</section>
</article>
<article class="row">
<section class="col-xs-10"></section>
<section class="col-xs-2">$ @Model.Total()</section>
</article>
<article class="row">
<section class="col-xs-7"></section>
<section class="col-xs-2">
<button class="nes-btn is-primary" name="name" value="" type="submit">Update</button>
</section>
<section class="col-xs-3">
<input type="submit" class="nes-btn is-success" value="Checkout" name="action" />
</section>
</article>
</div>
}
</div>
在Views新增Cart目录,再新增Index.cshtml,呼叫CartList ViewComponent和回前页的共通Header:
@using WebMvc.Services
@using WebMvc.ViewModels
@inject IAuthService<ApplicationUser> authService
@{
ViewData["Title"] = "My Cart";
}
<form method="post" id="cartForm">
<div class="">
@await Html.PartialAsync("_Header", new List<Header>()
{
new Header(){Controller = "Catalog", Text = "Back to catalog"}
})
@await Component.InvokeAsync("CartList", new { user = authService.Get(User)})
</div>
</form>
在ViewModels新增Header.cs,指定要回到某一个Controller/显示文字的共通模型:
namespace WebMvc.ViewModels
{
public class Header
{
public string Controller { get; set; }
public string Text { get; set; }
}
}
用VS执行所有3种Web Api和WebMvc,在用Dokcer执行cart.data和mssqlserver 2个服务,在首页点Add to cart,将会把商品加入到购物车,并在购物车页面可以修改数量,如图1
图1
<<: [教学] ASP NET Core将HighChart图片插入到Word中并提供下载
今天先来点轻松的,先来看看各种 sendMessage 的功能,最後来转换使用者发送的 Markd...
这篇再谈谈 JUCE 的缺点。JUCE 论坛有一串讨论,谈到 LookAndFeel 的架构问题,J...
Nested Interrupts Cortex-M3 和 NVIC 在硬体架构上支援(Nested...
环境 Windows 10 21H1 Visual Studio 2019 x64dbg Aug 2...
第3个决定 决定ERP後台资料库 在所有资料库里笔者用过Oracle 和MS SQL,这2者使用时间...