MVC5 + EF6 入門完整教程二
從前端的UI開始
MVC分離的比較好，開發(fā)順序沒有特別要求，先開發(fā)哪一部分都可以，這次我們主要講解前端UI的部分。
ASP.NET MVC拋棄了WebForm的一些特有的習慣，例如服務器端控件，ViewState這些東西，讓Web回歸原始的狀態(tài)，Web是什么樣子就是什么樣子。而談到一個Web Application的UI，涉及到的無非就是html、css、 js這些東西。
夠用，讓大家能真正能用起來，理解每一個過程。
文章提綱
? 1.概述
? 2.核心概念介紹
? 3.建立 注冊/登錄UI 步驟（靜態(tài)頁面àViewà功能）
01PART概述
一般來說，有兩塊功能是每個系統(tǒng)都要使用的。
一個是 用戶注冊/登錄，一個是Table的CRUD
最近四篇文章的規(guī)劃：
本次會先做簡單的注冊/登錄UI
結合EF完成注冊/登錄的功能
以Table的CRUD為例子，展開講解EF （code first方式）
借助bootstrap加入頁面樣式，補充其他功能，將前面的代碼擴展成一個開發(fā)的基礎框架
P.S. 順便回答下園友的兩個問題：
1.有園友表示沒看到EF
原因是不想一下引入太多的概念，大概下篇文章開始涉及到EF.
2. 系列的文章數量和更新：
a. 數量：本系列文章會從一個主干開始，逐漸深入，初步規(guī)劃30篇。初級10篇，中級10篇，綜合項目實戰(zhàn)10篇。
b. 更新：大概每周會更新一篇
開始主要講解MVC + EF搭配使用，后續(xù)同樣也會提供MVC + ADO.NET的實現方案
02PART核心概念介紹
View的存放位置約定
Action Method Selector
應用在Controller的Action上，以幫助選擇適當的Action，
文中以 [HttpPost] 舉例
ViewBag
在View和Controller中傳遞數據的一種方式 (類似的方式還有ViewData、TempData), 掌握通過ViewBag在View和Controller中傳遞數據
HtmlHelper
通過View的Html屬性調用，文中以Html.BeginForm為例
03PART建立，注冊/登錄 UI詳細步驟
?
建立 注冊/登錄 UI詳細步驟
打開上次項目，新建兩個Action
本系列文章知識點和演示代碼都以前一篇文章為基礎，有問題可以回上一篇進行查找。本次我們將會新建用戶 注冊/登錄 的兩個頁面。
打開Controllersà?AccountController.cs ，仿照已有的Index, 添加兩個Action, 如下圖。
NOTE：添加這Action可以
a. 通過手打或粘貼復制，
b.右鍵，插入代碼段（或ctrl k, x）àASP.NET MVC4à?mvcaction4(或mvcpostaction4), 如下面一組圖。
根據上一步中添加的Action, 添加相關View: Login.cshtml, Register.cshtml
添加方法詳見上篇文章，不再重復講解。
這里再說明下View的存放位置約定。記住下面三句話：
所有的View都放在Views文件夾
Views文件夾創(chuàng)建了一系列與Controller同名的子文件夾
各子文件夾內存放與Action同名的cshtml文件（對應的View文件）
1.1 我們把Login.cshtml就當做一個靜態(tài)html頁面，完成登錄界面的UI
大家可以把cshtml理解成原來的aspx和html的混合體：
利用了aspx的優(yōu)點，方便和后臺交互；利用了html的優(yōu)點，語法簡潔（HtmlHelper）
a. 到bootstrap上復制個登錄界面html
http://getbootstrap.com/css/#forms
b. 放到Login.cshtml 的body的div中
NOTE為了減少干擾項，我們不加任何樣式, 項目全部結束后再進行頁面美化。
右鍵瀏覽器 View page source, 發(fā)現多了VS Browser Link廢代碼。
我們將它禁用掉。
打開web.config添加如下代碼，再去瀏覽器查看源代碼，可以看到純凈的html了。
完成一個登錄工作：
填寫表單?à?Controller獲取表單數據?à?進一步操作（例如去數據庫比對，通過后獲取用戶身份跳轉到指定頁面）
我們這次先完成到Controller獲取數據，對數據庫的操作我們下一章和EF結合起來一起講。
OK, 現在我們對Login.cshtml進行修改。
修改前的Login.cshtml：
HttpPost屬性典型的應用場景：
涉及到需要接受客戶端窗口數據的時候，創(chuàng)建一個用于接收HTTP Get請求的Action, 用于顯示界面, 提供給用戶填寫數據;
另一個同名Action則應用[HttpPost]屬性，用于接收用戶發(fā)來的數據，完成對應的功能。
先在form標簽內增加兩個屬性action, method。對于form中的method（默認是get），通常情況下, get用于簡單的讀取數據操作，post用于寫數據操作。
在input元素下添加name屬性，設置成和id一樣的值。
NOTE: 服務器端需要通過name來取值。
?2.?打開AccountController.cs，修改[HttpPost]的Login Action用于接收數據
打開Login.cshtml, 修改form，為后端接收數據做準備。
首先我們先去AccountController.cs中創(chuàng)建一個Login同名的Action來接受表單提交的數據。
將前端的數據傳遞到Controller中去
完成登錄界面UI
為了區(qū)分登錄前后，我們通過ViewBag傳遞一個登錄狀態(tài)過去。
前臺同樣加個文字標識。
登錄效果：
因為這次的內容比較簡單，還沒必要用到HtmlHelper
我們對Login.cshtml中的form做一點改良。
如下圖，action的位置是固定的，這樣的話部署發(fā)生變化時有可能地址會不可用（如放在IIS根目錄下和虛擬目錄下是不同的）
? ? ??
使用HtmlHelper動態(tài)計算路由地址就是其中的一種方法。
添加下面一句代碼，將form中內容放到 {} 中去即可
? ? @using?(Html.BeginForm("login",?"Account",?FormMethod.Post)) { }
運行，到瀏覽器中查看源代碼，可以看到生成的源代碼和原來一樣。
?
同樣的，完成注冊界面UI（類似登錄界面，步驟略）
End
通過開發(fā)了一個最基本的登錄界面，介紹了如何從Controller中獲取表單數據。
因本次示例比較簡單，還不需要用到HtmlHelper
下篇文章會通過model自動生成數據庫，完成整個功能。
