使用完Entity Framework建立好Model後,我們就先來稍微加一些驗證屬性,例如:[Required]
、[DisplayName]
,記得要using System.ComponentModel.DataAnnotations
與 System.ComponentModel
。以下簡單說明添加步驟:
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; }
}
}
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版面,在方案總管下找到「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>© @DateTime.Now.Year - Coding小僧股份有限公司</p> @*修改最下方文字內容*@
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
修改執行後如下圖:
再來是登入後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>© @DateTime.Now.Year - Coding小僧股份有限公司</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
關於如何套用不同Layout版面可以先想想看,後面會再說明。今天就先到這邊吧~