MVC5 + EF6 入门完整教程

从前端的UI开始

MVC分离的比较好，开发顺序没有特别要求，先开发哪一部分都可以，这次我们主要讲解前端UI的部分。

http://ASP.NET MVC抛弃了WebForm的一些特有的习惯，例如服务器端控件，ViewState这些东西，让Web回归原始的状态，Web是什么样子就是什么样子。而谈到一个Web Application的UI，涉及到的无非就是html、css、 js这些东西。

够用，让大家能真正能用起来，理解每一个过程。

文章提纲

1.概述

2.核心概念介绍

3.建立 注册/登录UI 步骤（静态页面àViewà功能）

01PART概述

一般来说，有两块功能是每个系统都要使用的。

一个是 用户注册/登录，一个是Table的CRUD

最近四篇文章的规划：

1. 本次会先做简单的注册/登录UI
2. 结合EF完成注册/登录的功能
3. 以Table的CRUD为例子，展开讲解EF （code first方式）
4. 借助bootstrap加入页面样式，补充其他功能，将前面的代码扩展成一个开发的基础框架

P.S. 顺便回答下园友的两个问题：

1.有园友表示没看到EF

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

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

a. 数量：本系列文章会从一个主干开始，逐渐深入，初步规划30篇。初级10篇，中级10篇，综合项目实战10篇。

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

1. 开始主要讲解MVC + EF搭配使用，后续同样也会提供MVC + http://ADO.NET的实现方案

02PART核心概念介绍

1. View的存放位置约定
2. Action Method Selector

应用在Controller的Action上，以帮助选择适当的Action，

文中以 [HttpPost] 举例

ViewBag

在View和Controller中传递数据的一种方式 (类似的方式还有ViewData、TempData), 掌握通过ViewBag在View和Controller中传递数据

HtmlHelper

通过View的Html属性调用，文中以Html.BeginForm为例

03PART建立，注册/登录 UI详细步骤

建立 注册/登录 UI详细步骤

1. 打开上次项目，新建两个Action

本系列文章知识点和演示代码都以前一篇文章为基础，有问题可以回上一篇进行查找。本次我们将会新建用户 注册/登录 的两个页面。

打开Controllersà AccountController.cs ，仿照已有的Index, 添加两个Action, 如下图。

NOTE：添加这Action可以

a. 通过手打或粘贴复制，

b.右键，插入代码段（或ctrl k, x）àhttp://ASP.NET MVC4à mvcaction4(或mvcpostaction4), 如下面一组图。

1. 添加Action相应的View

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

添加方法详见上篇文章，不再重复讲解。

这里再说明下View的存放位置约定。记住下面三句话：

1. 所有的View都放在Views文件夹
2. Views文件夹创建了一系列与Controller同名的子文件夹
3. 各子文件夹内存放与Action同名的cshtml文件（对应的View文件）

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了。