MvcShopping/Views/Cart/Index.cshtml

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

@model List<MvcShopping.Models.Cart>
@{
    var ajaxOption = new AjaxOptions() {
        OnSuccess = "RemoveCartSuccess",
        OnFailure = "RemoveCartFailure",
        Confirm = "您確定要從購物車刪除這個商品嗎？",
        HttpMethod = "Post"
    };
}
@section scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        function RemoveCartSuccess() {
            alert('移除購物車項目成功');
            location.reload();
        }
        function RemoveCartFailure(xhr) {
            alert('移除購物車項目失敗 (HTTP 狀態碼: ' + xhr.status + ')');
        }
    </script>
}
<h2>購物車清單</h2>

@using (Html.BeginForm("UpdateAmount", "Cart"))
{
    <table>
        <tr>
            <th>產品名稱</th>
            <th>單價</th>
            <th>數量</th>
            <th>小計</th>
            <th></th>
        </tr>
    @{ int subTotal = 0; }
    @for (int i = 0; i < Model.Count; i++)
    {
        // 計算購買商品總價
        subTotal += Model[i].Product.Price * Model[i].Amount;
        
        // 選擇商品數量的選單只能選擇 1 ~ 10
        var ddlAmountList = new SelectList(Enumerable.Range(1, 10), Model[i].Amount);
        
        @Html.HiddenFor(modelItem => Model[i].Product.Id)

        <tr>
            <td>@Html.DisplayFor(modelItem => Model[i].Product.Name)</td>
            <td>NT$ @(Model[i].Product.Price)</td>
            <td>@Html.DropDownListFor(modelItem => Model[i].Amount, ddlAmountList)</td>
            <td>NT$ @(Model[i].Product.Price * Model[i].Amount)</td>
            <td>
                @Ajax.ActionLink("刪除", "Remove", new { ProductId=Model[i].Product.Id }, ajaxOption)
            </td>
        </tr>
    }
        <tr>
            <th></th>
            <th></th>
            <th>總價</th>
            <th id="subtotal">NT$ @subTotal</th>
            <th></th>