昨天將Layout版面完成了，並且也將Model加上驗證屬性，今天開始來寫控制器方法與對應的頁面。

首先將MVC範本預設產生的幾個動作方法刪除，找到HomeController底下的About()與Contact()並刪除，這些動作方法我們不會使用到。

接著也將對應的View頁面刪除，包含Home資料夾底下的About.cshtml、Contact.cshtml，另外Index.cshtml也刪除，因為我們要直接重寫其內容。

上述完成後就可以來逐一建立各動作方法與其檢視頁面囉～

● Home/Index

在HomeController新增如下Code:

    public class HomeController : Controller
    {
        dbShoppingCarEntities db = new dbShoppingCarEntities();
        public ActionResult Index()
        {
            var products = db.table_Product.OrderByDescending(m => m.Id).ToList();
            return View(products);
        }
    }

首先建立資料庫實體物件，為了可以重複使用我們寫在Controller類別內作為類別中的欄位，而不是各個動作方法內。
Index()動作方法內則是獲取所有產品資料，並依照產品的Id降冪排序，最後將產品List傳入View使用。

接著新增對應的View，使用預設版面配置頁，不使用範本。

建立後頁面如下圖：

接著將裡面的Code修改如下：

@using DemoShoppingWebsite.Models
@model IEnumerable<table_Product>
@{
    ViewBag.Title = "商品瀏覽";
}

<div class="row" style="margin-top:10px">
    @foreach (var item in Model)
    {
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="~/image/@item.Image" style="width:300px;height:270px" />
                <div class="caption">
                    <h3>@item.Name</h3>
                    <h4>單價:@item.Price</h4>
                    <p>
                        <a href="@Url.Action("AddCar","Member")?ProductId=@item.ProductId" class="btn btn-primary">加入購物車</a>
                    </p>
                </div>
            </div>
        </div>
    }
</div>

簡單利用foreach迴圈將產品List裡面的圖片、品名、價格呈現出來，並且會有「加入購物車」的按鈕，按鈕連結的網址使用@Url.Action()方法動態產生，網址後面攜帶ProductId參數。這邊用到滿多HTML標籤與CSS樣式，可以自行比較看看有無添加樣式的差異，這邊不細談。

完成後就可以先執行看看，畫面如下圖：

● Home/Register (GET)

接著撰寫註冊頁面內容，在HomeController底下新增Register()動作方法，如下Code：

        public ActionResult Register()
        {
            return View();
        }

新增對應View，加入檢視時依下圖選擇範本與模型來源：

加入後即會自動產生View頁面，我們稍微修改一下內容：

• 第4行修改ViewBag.Title 為 "會員註冊"。
• 第7行修改<h2>內文字為 "會員註冊"。
• 第14行<h4>table_Member</h4>刪除不保留。
• 第51行<input>標籤內value改為 "註冊"。
• 第52行增加@ViewBag.Message，用來呈現註冊不成功時的訊息內容。
• 第58行~60行<div>標籤和裡面的@Html.ActionLink()不會用到所以也全刪除。

完整Code如下：

@model DemoShoppingWebsite.Models.table_Member

@{
    ViewBag.Title = "會員註冊";
}

<h2>會員註冊</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.UserId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UserId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.UserId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="註冊" class="btn btn-default" />
                @ViewBag.Message
            </div>
        </div>
    </div>
}

修改完成後執行畫面如下：

● Home/Register (POST)

接著撰寫註冊的POST方法，在HomeController裡面新增下方Code：

        [HttpPost]
        public ActionResult Register(table_Member Member)
        {
            //如果資料驗證未通過則回傳原本的View
            if (!ModelState.IsValid)
            {
                return View();
            }

            // 如果註冊的帳號不存在，才能執行新增與儲存
            var member = db.table_Member.Where(m => m.UserId == Member.UserId).FirstOrDefault();
            if (member == null)
            {
                db.table_Member.Add(Member);
                db.SaveChanges();

                return RedirectToAction("Login");
            }
            ViewBag.Message = "帳號已被使用，請重新註冊";
            return View();
        }

這邊主要有2個重點：

1. 資料驗證未通過會回傳原本的View，並會顯示錯誤訊息
   

2. 如果註冊的帳號已存在就不能重複新增，會顯示 "帳號已被使用，請重新註冊" 的訊息；反之如果不存在代表註冊帳號沒重複，才能執行新增與儲存，並跳轉到登入畫面。
   

● 小結

今天把註冊的功能完成啦，只是按下註冊後會轉至登入畫面的部分還沒做，這時就算註冊成功也會顯示錯誤。那麼明天就繼續來做登入的部分，我們明天見！