iT邦幫忙

2022 iThome 鐵人賽

DAY 14
1
Software Development

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

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

  • 分享至 

  • xImage
  •  

● 新增Model驗證屬性

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

  1. 找到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; }
    }
}
  1. 其他資料表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; }
    }
}
  1. 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; }
    }
}
  1. 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>

● 小結

關於如何套用不同Layout版面可以先想想看,後面會再說明。今天就先到這邊吧~


上一篇
(DAY 13)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立購物中心網站實際範例(一)
下一篇
(DAY 15)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立購物中心網站實際範例(三)
系列文
C# ASP.NET MVC實作: 30天打造屬於你的網站應用程式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言