MVC_Login // Login 全圖片教學

今天目的是教大家以ASP.NET MVC的架構實作登入畫面和驗證，以Model→Controller→View的方式來建構。

Step1:建立Model(命名:MyUsersModel)

Step2:建立Class

修改MyUsersModel內程式碼

Users程式碼(Class必須為Public)

Step3:建立Controller

按照圖片選取

這時候會發生錯誤是因為建完Model沒有Build

再建一次

在Index頁面加上@Html.ActionLink("登入","Login")

這樣等等主頁才能直接按登入鍵

在Controller中準備好兩個Login Action

(1)原本的：View(new User())是為了等等的資料繫結

(2)post回來的

Step4:開始寫View

宣告model為Users型別

View中的程式碼如下：

說明：

@using (Html.BeginForm()) 就是表單<form>的意思

@Html.ValidationSummary(true) 配合controller的Model.IsValid做驗證
@Html.DisplayNameFor(m => m.Account) 顯示帳號Label
@Html.EditorFor(m => m.Account) 顯示TextBox並繫結到Users.Account
@Html.ValidationMessageFor(m=>m.Account) 驗證錯誤加入ErrorMessage

記得最後面一定要加上<input type="submit" />才會post唷!!

Step5: Controller驗證

成功顯示登入成功，失敗則顯示登入失敗，帳號密碼空白則重導回Login頁並顯示錯誤訊息，如圖註解

Step6: 設定Route("Home"改為"Users")

Step7: 開始執行

先建一個User

帳密空白登入測試

結果：

帳密錯誤測試：

結果：

帳密正確測試：

結果：

謝謝收看