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

2022 iThome 鐵人賽

DAY 14

Software Development

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

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

14th鐵人賽 c# asp.net mvc

Coding小僧

2022-09-28 10:47:47

3415 瀏覽

分享至

● 新增Model驗證屬性

使用完Entity Framework建立好Model後，我們就先來稍微加一些驗證屬性，例如：[Required]、[DisplayName]，記得要using System.ComponentModel.DataAnnotations 與 System.ComponentModel。以下簡單說明添加步驟：

找到Model資料夾底下的ShoppingCar.tt檔，點開後底下就是各資料表的Model，首先在table_Member.cs檔加入驗證屬性，加入後Code如下：

namespace DemoShoppingWebsite.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel;

    public partial class table_Member
    {
        public int Id { get; set; }

        [Required]
        [DisplayName("帳號")]
        public string UserId { get; set; }

        [Required]
        [DisplayName("密碼")]
        public string Password { get; set; }

        [Required]
        [DisplayName("姓名")]
        public string Name { get; set; }

        [Required]
        [DisplayName("電子信箱")]
        public string Email { get; set; }
    }
}

其他資料表Model作法類似，在table_Order.cs檔加入驗證屬性，加入後Code如下：

namespace DemoShoppingWebsite.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;

    public partial class table_Order
    {
        public int Id { get; set; }

        [DisplayName("訂單編號")]
        public string OrderGuid { get; set; }

        [DisplayName("會員帳號")]
        public string UserId { get; set; }

        [DisplayName("收件人姓名")]
        public string Receiver { get; set; }

        [DisplayName("收件人信箱")]
        public string Email { get; set; }

        [DisplayName("收件人地址")]
        public string Address { get; set; }

        [DisplayName("訂單日期")]
        public Nullable<System.DateTime> Date { get; set; }
    }
}

在table_OrderDetail.cs檔加入驗證屬性，加入後Code如下：

namespace DemoShoppingWebsite.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;

    public partial class table_OrderDetail
    {
        public int Id { get; set; }

        [DisplayName("訂單編號")]
        public string OrderGuid { get; set; }

        [DisplayName("會員帳號")]
        public string UserId { get; set; }

        [DisplayName("產品編號")]
        public string ProductId { get; set; }

        [DisplayName("品名")]
        public string Name { get; set; }

        [DisplayName("單價")]
        public Nullable<int> Price { get; set; }

        [DisplayName("訂購數量")]
        public Nullable<int> Quantity { get; set; }

        [DisplayName("是否形成訂單")]
        public string IsApproved { get; set; }
    }
}

在table_Product.cs檔加入驗證屬性，加入後Code如下：

namespace DemoShoppingWebsite.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;

    public partial class table_Product
    {
        public int Id { get; set; }

        [DisplayName("產品編號")]
        public string ProductId { get; set; }

        [DisplayName("品名")]
        public string Name { get; set; }

        [DisplayName("單價")]
        public Nullable<int> Price { get; set; }

        [DisplayName("圖示")]
        public string Image { get; set; }
    }
}

以上內容基本上僅加入[DisplayName]，讓之後資料呈現可以用設定的文字，而不是每個屬性名稱。另外table_Member.cs的各屬性多了[Required]則是為了建立註冊頁面時，讓使用者必須填寫該欄位。雖然我們之前還說明了其他許多驗證屬性，但這邊就先簡單新增這樣吧～

● Layout版面

接著來修改預設的Layout版面，在方案總管下找到「Views」資料夾 → 「Shared」 → 「 Layout.cshtml檔案」，直接拿現有的來改！
這邊簡單修改幾點：

視窗標題名稱
導覽列連結名稱、連結執行動作
最下方文字敘述

修改後如下Code範例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Coding小僧購物網</title> @*修改視窗標題*@
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="其他選項">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Coding小僧購物網", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("產品列表", "Index", "Home")</li> @*修改導覽列連結*@
                    <li>@Html.ActionLink("註冊", "Register", "Home")</li> @*修改導覽列連結*@
                    <li>@Html.ActionLink("登入", "Login", "Home")</li> @*修改導覽列連結*@
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Coding小僧股份有限公司</p> @*修改最下方文字內容*@
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

修改執行後如下圖：

● 登入後Layout版面

再來是登入後Layout版面，我們希望會員登入後導覽列會有些許的不同，例如顯示購物車&訂單連結、登入按鈕變為登出...等等。

首先將原本的_Layout.cshtml檔案複製一份貼到「Views」底下的「Shared」資料夾，然後改名為_LayoutMember.cshtml。

接著修改_LayoutMember.cshtml的內容，主要針對幾個@Html.ActionLink()內容修改，另外這邊加了一個Session["Welcome"]，用意是登入後可以顯示會員歡迎訊息，後面寫到Controller時會再說明，修改後Code如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Coding小僧購物網</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="其他選項">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Coding小僧購物網-會員專區", "Index", "Member", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("產品列表", "Index", "Member")</li>
                    <li>@Html.ActionLink("購物車", "ShoppingCar", "Member")</li>
                    <li>@Html.ActionLink("訂單", "OrderList", "Member")</li>
                    <li>@Html.ActionLink("登出", "LogOut", "Member")</li>
                    <li><a href= "#">@Session["Welcome"]</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Coding小僧股份有限公司</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>