(DAY 18)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立購物中心網站實際範例(六)

2022 iThome 鐵人賽

DAY 18

Software Development

C# ASP.NET MVC實作: 30天打造屬於你的網站應用程式系列第 18 篇

(DAY 18)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立購物中心網站實際範例(六)

14th鐵人賽 c# asp.net mvc

Coding小僧

2022-10-02 08:39:51

2077 瀏覽

分享至

大家好，今天是網站實際範例的第六篇，延續昨天的範例，我們來實作購物車相關的內容吧！

● Member/ShoppingCar (GET)

首先我們想要在點選購物車連結的時候，可以看到該會員的欲購買清單明細。所以先在MemberController底下加入ShoppingCar()動作方法，並撈取資料庫內屬於該會員的訂單，Code如下：

        public ActionResult ShoppingCar()
        {
            string UserId = User.Identity.Name;

            var orderDetails = db.table_OrderDetail.Where(m => m.UserId == UserId && m.IsApproved == "否").ToList();
            return View(orderDetails);
        }

上面Code透過User.Identity.Name可以獲得登入使用者的UserId；在篩選訂單明細條件時，除了比對UserId名稱，還有IsApproved欄位須為"否"，代表此筆資料僅加入購物車而尚未形成訂單。

接著加入對應的View頁面，加入時依照下圖設定，注意版面配置頁要另外選擇_LayoutMember.cshtml。

加入後自動建立View，Code如下：

@model IEnumerable<DemoShoppingWebsite.Models.table_OrderDetail>

@{
    ViewBag.Title = "ShoppingCar";
    Layout = "~/Views/Shared/_LayoutMember.cshtml";
}

<h2>ShoppingCar</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.OrderGuid)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.UserId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ProductId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Quantity)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.IsApproved)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.OrderGuid)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.UserId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Quantity)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.IsApproved)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

接著修改下列內容：

第4行ViewBag.Title 與第8行<h2>標籤內容改為「會員購物車清單」。
刪除第10-12行<p>標籤含內容，這幾行用不到。
將原本第63-65行<td>標籤內的內容刪除

改加入刪除購物車的按鈕，如下面Code：

            <a href="@Url.Action("DeleteCar")?Id=@item.Id"
               class="btn btn-danger" onclick="return confirm('確定放棄購買 @item.Name 嗎？')">刪除購物車</a>

在第71行下方新增收件人相關資料的表單，如下面Code：

<form action="@Url.Action("ShoppingCar")" method="post">
    <div class="form-horizontal">
        <h4>填寫訂單收件人資料</h4>
        <hr />

        <div class="form-group">
            <span class="control-label col-md-2">收件人姓名</span>
            <div class="col-md-10">
                <input type="text" id="Receiver" name="Receiver" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <span class="control-label col-md-2">收件人信箱</span>
            <div class="col-md-10">
                <input type="email" id="Email" name="Email" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <span class="control-label col-md-2">收件人地址</span>
            <div class="col-md-10">
                <input type="text" id="Address" name="Address" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="確認訂購" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

View完整程式碼如下：

@model IEnumerable<DemoShoppingWebsite.Models.table_OrderDetail>

@{
    ViewBag.Title = "會員購物車清單";
    Layout = "~/Views/Shared/_LayoutMember.cshtml";
}

<h2>會員購物車清單</h2>




<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.OrderGuid)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.UserId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ProductId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Quantity)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.IsApproved)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.OrderGuid)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.UserId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Quantity)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.IsApproved)
        </td>
        <td>
            <a href="@Url.Action("DeleteCar")?Id=@item.Id"
               class="btn btn-danger" onclick="return confirm('確定放棄購買 @item.Name 嗎？')">刪除購物車</a>
        </td>
    </tr>
}

</table>

<form action="@Url.Action("ShoppingCar")" method="post">
    <div class="form-horizontal">
        <h4>填寫訂單收件人資料</h4>
        <hr />

        <div class="form-group">
            <span class="control-label col-md-2">收件人姓名</span>
            <div class="col-md-10">
                <input type="text" id="Receiver" name="Receiver" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <span class="control-label col-md-2">收件人信箱</span>
            <div class="col-md-10">
                <input type="email" id="Email" name="Email" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <span class="control-label col-md-2">收件人地址</span>
            <div class="col-md-10">
                <input type="text" id="Address" name="Address" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="確認訂購" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

將網站執行起來後登入會員，點選「購物車」連結