MVC5 + EF6 入門完整教程二

本文轉載自查看原文 2014-10-21 16:01 39193 1、MVC

從前端的UI開始

MVC分離的比較好，開發順序沒有特別要求，先開發哪一部分都可以，這次我們主要講解前端UI的部分。

ASP.NET MVC拋棄了WebForm的一些特有的習慣，例如服務器端控件，ViewState這些東西，讓Web回歸原始的狀態，Web是什么樣子就是什么樣子。而談到一個Web Application的UI，涉及到的無非就是html、css、 js這些東西。

文章提綱

概述
重要概念介紹
建立注冊/登錄UI 步驟（靜態頁面àViewà功能）

概述

一般來說，有兩塊功能是每個系統都要使用的。

一個是用戶注冊/登錄，一個是Table的CRUD

最近四篇文章的規划：

本次會先做簡單的注冊/登錄UI
結合EF完成注冊/登錄的功能
以Table的CRUD為例子，展開講解EF （code first方式）
借助bootstrap加入頁面樣式，補充其他功能，將前面的代碼擴展成一個開發的基礎框架

P.S. 順便回答下園友的兩個問題：

1.有園友表示沒看到EF

原因是不想一下引入太多的概念，大概下篇文章開始涉及到EF.

2. 系列的文章數量和更新：

a. 數量：本系列文章會從一個主干開始，逐漸深入，初步規划30篇。初級10篇，中級10篇，綜合項目實戰10篇。

b. 更新：大概每周會更新一篇

重要概念介紹

View的存放位置約定
Action Method Selector

應用在Controller的Action上，以幫助選擇適當的Action，

文中以 [HttpPost] 舉例

ViewBag

在View和Controller中傳遞數據的一種方式 (類似的方式還有ViewData、TempData), 掌握通過ViewBag在View和Controller中傳遞數據

HtmlHelper

通過View的Html屬性調用，文中以Html.BeginForm為例

建立注冊/登錄 UI詳細步驟

打開上次項目，新建兩個Action

本系列文章知識點和演示代碼都以前一篇文章為基礎，有問題可以回上一篇進行查找。本次我們將會新建用戶注冊/登錄的兩個頁面。

打開Controllersà AccountController.cs ，仿照已有的Index, 添加兩個Action, 如下圖。

NOTE：添加這Action可以

a. 通過手打或粘貼復制，

b.右鍵，插入代碼段（或ctrl k, x）àASP.NET MVC4à mvcaction4(或mvcpostaction4), 如下面一組圖。

添加Action相應的View

根據上一步中添加的Action, 添加相關View: Login.cshtml, Register.cshtml

添加方法詳見上篇文章，不再重復講解。

這里再說明下View的存放位置約定。記住下面三句話：

所有的View都放在Views文件夾
Views文件夾創建了一系列與Controller同名的子文件夾
各子文件夾內存放與Action同名的cshtml文件（對應的View文件）
1. 完成登錄界面UI
1.1 我們把Login.cshtml就當做一個靜態html頁面，完成登錄界面的UI

大家可以把cshtml理解成原來的aspx和html的混合體：

利用了aspx的優點，方便和后台交互；利用了html的優點，語法簡潔（HtmlHelper）

a. 到bootstrap上復制個登錄界面html

http://getbootstrap.com/css/#forms

b. 放到Login.cshtml 的body的div中

NOTE為了減少干擾項，我們不加任何樣式, 項目全部結束后再進行頁面美化。

右鍵瀏覽器 View page source, 發現多了VS Browser Link廢代碼。

我們將它禁用掉。

打開web.config添加如下代碼，再去瀏覽器查看源代碼，可以看到純凈的html了。
1. 將前端的數據傳遞到Controller中去
完成一個登錄工作：

填寫表單 à Controller獲取表單數據 à 進一步操作（例如去數據庫比對，通過后獲取用戶身份跳轉到指定頁面）

我們這次先完成到Controller獲取數據，對數據庫的操作我們下一章和EF結合起來一起講。

OK, 現在我們對Login.cshtml進行修改。

修改前的Login.cshtml：
1. 首先我們先去AccountController.cs中創建一個Login同名的Action來接受表單提交的數據。
注意新添加的Action中增加了一個[HttpPost] ，表示這個Action只會接受http post請求。ASP.NET MVC提供了Action Method Selector, HttpPost就是其中之一。（后續文章中會專門有一篇講解這些Selector）

HttpPost屬性典型的應用場景：

涉及到需要接受客戶端窗口數據的時候，創建一個用於接收HTTP Get請求的Action, 用於顯示界面, 提供給用戶填寫數據;

另一個同名Action則應用[HttpPost]屬性，用於接收用戶發來的數據，完成對應的功能。
1. 打開Login.cshtml, 修改form，為后端接收數據做准備。
先在form標簽內增加兩個屬性action, method。對於form中的method（默認是get），通常情況下, get用於簡單的讀取數據操作，post用於寫數據操作。

在input元素下添加name屬性，設置成和id一樣的值。

NOTE: 服務器端需要通過name來取值。

2. 打開AccountController.cs，修改[HttpPost]的Login Action用於接收數據