ASP.NET MVC 5：构建你的第一个 Web 应用程序 - 第一部分
4.85/5 (53投票s)
本文是关于在 ASP.NET MVC 5 中构建一个简单 Web 应用程序系列的第 1 部分。
引言
技术在不断发展，作为开发者，我们需要跟上最新的或者至少是当今流行的技术。作为初学者，你可能会发现很难跟上最新的技术，因为这会让你对该使用哪些技术以及从何开始感到更加困惑。我们知道有大量的资源可供你参考学习，但你仍然发现很难将它们联系起来。有时你可能会感到失去学习的兴趣并放弃。如果你感到困惑，不知道如何从头开始构建一个 Web 应用程序，那么这个系列的文章就是为你准备的。这是本应用程序系列的当前列表：
- ASP.NET MVC 5：构建你的第一个 Web 应用程序 - 第一部分 - 你在这里
- ASP.NET MVC 5：构建你的第一个 Web 应用程序 - 第二部分
- ASP.NET MVC 5：构建你的第一个 Web 应用程序 - 第三部分
- ASP.NET MVC 5：构建你的第一个 Web 应用程序 - 第四部分
- ASP.NET MVC 5：使用 jQuery 和 AJAX 实现 ShoutBox 功能
- ASP.NET MVC 5：将你的应用程序部署到 IIS8
如果你想要此系列的 PDF 版本，可以在这里获取电子书：ASP.NET MVC 5：初学者指南
背景
《ASP.NET MVC 5：构建你的第一个 Web 应用程序》面向希望快速入门 ASP.NET MVC 5 并通过实际示例动手实践的初学者。我编写这个系列的文章，力求易于遵循和理解，通过从头开始创建简单 Web 应用程序到将其部署到 IIS Web 服务器的步骤，提供循序渐进的过程。在你完成整个系列的学习后，你将学会如何使用 SQL Server 创建数据库，了解 ASP.NET MVC 的概念及其作用，学习使用数据库优先方法（Database-First approach）的 Entity Framework，学习基础的 jQuery 和 AJAX，学习创建注册、登录、个人资料和管理员页面，用户可以在其中修改、添加和删除信息。你还将学会如何在 IIS Web 服务器上安装和部署你的应用程序。
必备组件
在继续深入之前，请确保你对以下技术和语言有基本了解：
- SQL Server
- Visual Studio
- ASP.NET 总体
- 基本的 ASP.NET MVC 理解
- 实体框架
- C#
- HTML、CSS 和 JavaScript/jQuery 基础
环境和开发工具
以下是我在构建 Web 应用程序时使用的工具和环境设置：
- Windows 8.1
- IIS8
- Visual Studio 2015
- SQL Express 2014
让我们开始吧！
我将尽量使这个演示保持简单，以便初学者能够轻松跟进。所谓的“简单”是指限制理论和概念的讲解，而是直接进入实践，通过代码示例让你动手操作。
您将学到什么
- 在 MS SQL Server 中创建数据库
- ASP.NET MVC 简介
- 实现 Entity Framework 数据库优先方法
- 创建简单的注册页面
在我们开始构建 MVC 应用程序之前，让我们先谈谈 MVC，因为了解 MVC 框架的工作方式非常重要。
什么是 ASP.NET MVC？
ASP.NET MVC 是 ASP.NET 框架的一部分。下图将提供 ASP.NET MVC 在 ASP.NET 框架中位置的概览。
图 1：ASP.NET 技术
你会看到 ASP.NET MVC 位于 ASP.NET 之上。ASP.NET MVC 是一个 UI 框架，它能够清晰地分离关注点，并让你完全控制标记。
为了更清楚地说明，这是我对 MVC 高层流程的看法：
图 2：MVC 架构流程
与 ASP.NET WebForms 中请求直接指向页面文件 (.ASPX) 不同，在 MVC 中，当用户请求页面时，它会首先与 Controller 通信，在必要时处理数据，然后返回 Model 给 View 以供用户查看。
什么是 Model？
Model 只是一个类，它实现了应用程序领域数据的逻辑。通常，Model 对象从数据库检索并存储 Model 状态。
什么是 Controller？
与 Models 类似，Controller 也是一个处理用户交互的类。它将与 Model 一起工作，并最终选择一个 View 在浏览器中渲染。
什么是 View？
顾名思义，View 是显示应用程序用户界面 (UI) 的组件，通常这个 UI 是从 Model 数据创建的。
将它们放在一起，M 代表 Model，通常是 BO (业务对象)、BL (业务层) 和 DAL (数据访问) 的所在地。请注意，在典型的分层架构中，你的 BL 和 DAL 应该位于单独的项目中。V 代表 View，也就是用户看到的内容。这通常意味着任何 UI 和客户端相关的开发都将位于 View 中，包括 HTML、CSS 和 JavaScript。C 是 Controller，它协调逻辑流。例如，如果用户点击一个指向特定 URL 的按钮，该请求将被映射到 Controller 的 Action 方法，该方法负责处理服务请求所需的任何逻辑，并返回一个响应——通常是新的 View，或者对现有 View 的更新。
如果你对 Model、View 和 Controller 仍然感到困惑，不用担心，因为我将通过代码示例来讲解它们之间的关系。请继续关注。
创建数据库
打开 SQL Server 或 SQL Server Express Management Studio，然后按照以下步骤创建数据库：
- 右键单击“数据库”文件夹
- 选择“新建数据库”
- 输入数据库名称，然后点击“确定”。请注意，在本演示中，我使用的数据库名称是“DemoDB”。
“DemoDB”数据库应已创建，如下图所示：
图 3：新建数据库已创建
或者，你也可以编写 SQL 脚本来创建数据库。例如：
CREATE DATABASE DemoDB;
创建数据库表
在 SQL Management Server 中，打开“新建查询”窗口，或者按 CTRL + N 打开查询窗口，然后运行以下脚本：
LOOKUPRole 表
USE [DemoDB]
GO
CREATE TABLE [dbo].[LOOKUPRole](
[LOOKUPRoleID] [int] IDENTITY(1,1) NOT NULL,
[RoleName] [varchar](100) DEFAULT '',
[RoleDescription] [varchar](500) DEFAULT '',
[RowCreatedSYSUserID] [int] NOT NULL,
[RowCreatedDateTime] [datetime] DEFAULT GETDATE(),
[RowModifiedSYSUserID] [int] NOT NULL,
[RowModifiedDateTime] [datetime] DEFAULT GETDATE(),
PRIMARY KEY (LOOKUPRoleID)
)
GO
向 LOOKUPRole 表添加测试数据
INSERT INTO LOOKUPRole (RoleName,RoleDescription,RowCreatedSYSUserID,RowModifiedSYSUserID)
VALUES ('Admin','Can Edit, Update, Delete',1,1)
INSERT INTO LOOKUPRole (RoleName,RoleDescription,RowCreatedSYSUserID,RowModifiedSYSUserID)
VALUES ('Member','Read only',1,1)
SYSUser 表
USE [DemoDB]
GO
CREATE TABLE [dbo].[SYSUser](
[SYSUserID] [int] IDENTITY(1,1) NOT NULL,
[LoginName] [varchar](50) NOT NULL,
[PasswordEncryptedText] [varchar](200) NOT NULL,
[RowCreatedSYSUserID] [int] NOT NULL,
[RowCreatedDateTime] [datetime] DEFAULT GETDATE(),
[RowModifiedSYSUserID] [int] NOT NULL,
[RowModifiedDateTime] [datetime] DEFAULT GETDATE(),
PRIMARY KEY (SYSUserID)
)
GO
SYSUserProfile 表
USE [DemoDB]
GO
CREATE TABLE [dbo].[SYSUserProfile](
[SYSUserProfileID] [int] IDENTITY(1,1) NOT NULL,
[SYSUserID] [int] NOT NULL,
[FirstName] [varchar](50) NOT NULL,
[LastName] [varchar](50) NOT NULL,
[Gender] [char](1) NOT NULL,
[RowCreatedSYSUserID] [int] NOT NULL,
[RowCreatedDateTime] [datetime] DEFAULT GETDATE(),
[RowModifiedSYSUserID] [int] NOT NULL,
[RowModifiedDateTime] [datetime] DEFAULT GETDATE(),
PRIMARY KEY (SYSUserProfileID)
)
GO
ALTER TABLE [dbo].[SYSUserProfile] WITH CHECK ADD FOREIGN KEY([SYSUserID])
REFERENCES [dbo].[SYSUser] ([SYSUserID])
GO
最后，是 SYSUserRole 表
USE [DemoDB]
GO
CREATE TABLE [dbo].[SYSUserRole](
[SYSUserRoleID] [int] IDENTITY(1,1) NOT NULL,
[SYSUserID] [int] NOT NULL,
[LOOKUPRoleID] [int] NOT NULL,
[IsActive] [bit] DEFAULT (1),
[RowCreatedSYSUserID] [int] NOT NULL,
[RowCreatedDateTime] [datetime] DEFAULT GETDATE(),
[RowModifiedSYSUserID] [int] NOT NULL,
[RowModifiedDateTime] [datetime] DEFAULT GETDATE(),
PRIMARY KEY (SYSUserRoleID)
)
GO
ALTER TABLE [dbo].[SYSUserRole] WITH CHECK ADD FOREIGN KEY([LOOKUPRoleID])
REFERENCES [dbo].[LOOKUPRole] ([LOOKUPRoleID])
GO
ALTER TABLE [dbo].[SYSUserRole] WITH CHECK ADD FOREIGN KEY([SYSUserID])
REFERENCES [dbo].[SYSUser] ([SYSUserID])
GO
好了。我们已经创建了四个（4）个数据库表。下一步是创建 Web 应用程序。
添加新的 ASP.NET MVC 5 项目
请启动 Visual Studio 2015，然后选择“文件”>“新建”>“项目”。在“新建项目”对话框中，选择“模板”>“Visual C#”>“ASP.NET Web 应用程序”。请参阅下图以供参考。
图 4：ASP.NET Web 应用程序模板
将你的项目命名为你喜欢的任何名称，然后点击“确定”。请注意，在此演示中，我将项目命名为“MVC5RealWorld”。之后，你应该会看到“新建 ASP.NET 项目”对话框，如下图所示：
图 5：新建 ASP.NET 项目对话框
ASP.NET 4.6 模板的“新建 ASP.NET 项目”对话框允许你选择要创建的项目类型，配置任何 ASP.NET 技术组合，如 WebForms、MVC 或 Web API，配置单元测试项目，配置身份验证选项，还提供了一个新的选项来将你的网站托管在 Azure 云中。此外，它还为 ASP.NET 5（最近更名为 ASP.NET Core）提供了模板。
在此系列中，我只介绍创建 ASP.NET MVC 5 应用程序。因此，关于单元测试、身份验证、云托管等每个配置的细节将不涵盖。
现在，在 ASP.NET 4.6 模板下选择“Empty”，然后在文件夹和核心引用下勾选“MVC”选项，如下图 5 所示。这样做的原因是我们将从头开始创建一个空的 MVC 应用程序。点击“确定”，让 Visual Studio 生成运行 MVC 应用程序所需的文件和模板。
现在你应该看到类似下图的内容：
图 6：MVC5RealWorld 项目
设置数据访问
在此示例中，我将使用数据库优先方法和 Entity Framework 6 (EF) 作为我们的数据访问机制，这样我们就可以针对概念应用程序模型进行编程，而不是直接针对数据库进行编程。
嗯哼？你是什么意思？
这可以简单地理解为，使用 EF，你将使用实体（数据结构的类/对象表示）进行工作，让框架处理基本的选择、更新、插入和删除。在传统的 ADO.NET 中，你将直接针对表/列/存储过程编写 SQL 查询，并且没有实体，因此面向对象的程度较低。
我更喜欢使用 EF，因为它提供了以下好处：
- 应用程序可以按照更以应用程序为中心的模型进行工作，包括具有继承、复杂成员和关系的类型。
- 应用程序可以摆脱对特定数据引擎或存储模式的硬编码依赖。
- 概念模型与存储特定模式之间的映射可以更改，而无需更改应用程序代码。
- 开发人员可以处理一个一致的应用程序对象模型，该模型可以映射到各种存储模式，可能在不同的数据库管理系统中实现。
- 多个概念模型可以映射到单个存储模式。
- 语言集成查询 (LINQ) 支持为针对概念模型的查询提供编译时语法验证。
你可以在这里阅读更多关于它的信息：ADO.NET Entity Framework At-a-Glance
创建实体模型
现在让我们通过在“Models”文件夹下添加以下子文件夹来设置我们的 Model 文件夹结构：
- DB
- EntityManager
- ViewModel
我们的 Model 结构应该如下所示：
图 7：创建 Models 文件夹
DB 文件夹是我们存储实体数据模型 (.EDMX) 的地方。你可以将其视为一个包含一些表的概念数据库。要添加一个实体，请右键单击 DB 文件夹，然后选择“添加”>“新建项”>“数据”>“ADO.NET Entity Data Model”，如下图所示。
图 8：添加实体数据模型
你可以为你喜欢的实体模型命名，但在此示例中，为了简单起见，我将其命名为“DemoModel”。然后点击“添加”继续，在下一步选择“EF Designer from Database”，因为我们将使用数据库优先方法来处理现有数据库。点击“Next”继续。在下一步，点击“New Connection”按钮，然后选择“Microsoft SQL Server (SqlClient)”作为数据源，然后点击“Next”。
你应该会看到下面的对话框：
图 9：连接属性对话框
输入 SQL 服务器名称，然后选择我们在上一步中刚刚创建的数据库。如果你有现有的数据库，则使用该数据库。另请注意，我正在使用 Windows 身份验证登录我的 SQL Server。一旦你填写了必要的字段，你就可以点击“Test Connection”来验证连接性。如果成功，只需点击“OK”。
现在你应该会看到下面的对话框：
图 10：选择你的数据连接对话框
请注意，连接字符串已为你自动生成。点击“Next”，然后选择“Entity Framework 6.x”以显示下面的对话框：
图 11：实体数据模型向导对话框
现在选择你想在应用程序中使用的表。在此示例中，我选择了所有表，因为我们将在应用程序中使用它们。点击“Finish”按钮将为你生成实体模型，如下图所示：
图 12：实体数据模型
EF 在此处自动为你生成业务对象，并允许你对其进行查询。EDMX 或实体数据模型将作为你从数据库检索对象和重新提交更改的主要网关。
创建注册页面
添加 ViewModels
回顾一下，Entity Framework 将生成业务模型对象并管理应用程序中的数据访问。因此，EF 会自动创建 LOOKUPRole、SYSUserRole、SYSUser 和 SYSUserProfile 类，并且这些类具有数据库表中所有字段作为其属性。
我不想直接在 View 中使用这些类，所以我决定创建一个单独的类，它只包含我需要的 View 中的属性。因此，让我们通过右键单击“ViewModel”文件夹，然后选择“添加”>“类”来添加“UserModel”类。“UserModel.cs”文件是我们存放所有与用户相关的模型视图的地方。对于注册页面，我们将添加“UserSignUpView”类。在“UserModel.cs”文件中添加以下代码：
using System.ComponentModel.DataAnnotations;
namespace MVC5RealWorld.Models.ViewModel
{
public class UserSignUpView
{
[Key]
public int SYSUserID { get; set; }
public int LOOKUPRoleID { get; set; }
public string RoleName { get; set; }
[Required(ErrorMessage = "*")]
[Display(Name = "Login ID")]
public string LoginName { get; set; }
[Required(ErrorMessage = "*")]
[Display(Name = "Password")]
public string Password { get; set; }
[Required(ErrorMessage = "*")]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required(ErrorMessage = "*")]
[Display(Name = "Last Name")]
public string LastName { get; set; }
public string Gender { get; set; }
}
}
请注意，我在 UserSignUpView 类的每个属性都添加了“Required”和“DisplayName”特性。这些特性被称为数据注解 (Data Annotations)。数据注解是位于 System.ComponentModel.DataAnnotations 命名空间下的特性类，你可以使用它们来修饰类或属性以强制执行预定义的验证规则。
我将使用这种验证技术，因为我想通过使用 MVC 模式并结合 Model 中的数据注解来保持关注点的清晰分离，这样你的验证代码就更容易编写、维护和测试。
有关数据注解的更多信息，你可以参考 MSDN 的这篇文章：Data Annotations。当然，你也可以在 Google 上简单搜索找到更多关于它的例子 :)
添加 UserManager 类
下一步我们将要创建“UserManger”类，它将处理特定表的 CRUD 操作（创建、读取、更新和删除）。此类是为了将实际数据操作与我们的控制器分开，并拥有一个用于处理插入、更新、获取和删除操作的中央类。
注释
请记住，在本篇文章中，我只会进行插入部分，即用户可以将新数据从 View 添加到数据库。我将在下一篇文章中讨论如何在 MVC 中进行更新、获取和删除。所以这次我们先只关注插入部分。
由于此演示旨在尽可能简化 Web 应用程序，因此我不会使用 TransactionScope 和 Repository 模式。在真实复杂的 Web 应用程序中，你可能需要考虑为你的数据访问使用 TransactionScope 和 Repository。
现在右键单击“EntityManager”文件夹，然后通过选择“添加”>“类”添加一个新类，并将该类命名为“UserManager”。这是“UserManager”类的代码块：
using System;
using System.Linq;
using MVC5RealWorld.Models.DB;
using MVC5RealWorld.Models.ViewModel;
namespace MVC5RealWorld.Models.EntityManager
{
public class UserManager
{
public void AddUserAccount(UserSignUpView user) {
using (DemoDBEntities db = new DemoDBEntities()) {
SYSUser SU = new SYSUser();
SU.LoginName = user.LoginName;
SU.PasswordEncryptedText = user.Password;
SU.RowCreatedSYSUserID = user.SYSUserID > 0 ? user.SYSUserID : 1;
SU.RowModifiedSYSUserID = user.SYSUserID > 0 ? user.SYSUserID : 1; ;
SU.RowCreatedDateTime = DateTime.Now;
SU.RowMOdifiedDateTime = DateTime.Now;
db.SYSUsers.Add(SU);
db.SaveChanges();
SYSUserProfile SUP = new SYSUserProfile();
SUP.SYSUserID = SU.SYSUserID;
SUP.FirstName = user.FirstName;
SUP.LastName = user.LastName;
SUP.Gender = user.Gender;
SUP.RowCreatedSYSUserID = user.SYSUserID > 0 ? user.SYSUserID : 1;
SUP.RowModifiedSYSUserID = user.SYSUserID > 0 ? user.SYSUserID : 1;
SUP.RowCreatedDateTime = DateTime.Now;
SUP.RowModifiedDateTime = DateTime.Now;
db.SYSUserProfiles.Add(SUP);
db.SaveChanges();
if (user.LOOKUPRoleID > 0) {
SYSUserRole SUR = new SYSUserRole();
SUR.LOOKUPRoleID = user.LOOKUPRoleID;
SUR.SYSUserID = user.SYSUserID;
SUR.IsActive = true;
SUR.RowCreatedSYSUserID = user.SYSUserID > 0 ? user.SYSUserID : 1;
SUR.RowModifiedSYSUserID = user.SYSUserID > 0 ? user.SYSUserID : 1;
SUR.RowCreatedDateTime = DateTime.Now;
SUR.RowModifiedDateTime = DateTime.Now;
db.SYSUserRoles.Add(SUR);
db.SaveChanges();
}
}
}
public bool IsLoginNameExist(string loginName) {
using (DemoDBEntities db = new DemoDBEntities()) {
return db.SYSUsers.Where(o => o.LoginName.Equals(loginName)).Any();
}
}
}
}
AddUserAccount() 方法使用 Entity Framework 将数据插入数据库。IsLoginNameExist() 方法返回一个布尔值。它基本上使用LINQ 语法在数据库中检查是否存在数据。我尽量让这个演示尽可能简单，但上面的代码可以进行重构，例如你可以创建一个接受动态类型的方法。然后你可以将通用属性传递给该方法并将它们添加到动态对象中。
添加 Controllers
由于我们的 Model 已经设置好了，那么让我们继续添加“AccountController”类。要做到这一点，只需右键单击“Controllers”文件夹，然后选择“添加”>“Controller”>“MVC 5 Controller - Empty”，然后点击“Add”。在下一个对话框中，将控制器命名为“AccountController”，然后点击“Add”来为你生成类。
这是“AccountController”类的代码块：
using System.Web.Mvc;
using System.Web.Security;
using MVC5RealWorld.Models.ViewModel;
using MVC5RealWorld.Models.EntityManager;
namespace MVC5RealWorld.Controllers
{
public class AccountController : Controller
{
public ActionResult SignUp() {
return View();
}
[HttpPost]
public ActionResult SignUp(UserSignUpView USV) {
if (ModelState.IsValid) {
UserManager UM = new UserManager();
if (!UM.IsLoginNameExist(USV.LoginName)) {
UM.AddUserAccount(USV);
FormsAuthentication.SetAuthCookie(USV.FirstName, false);
return RedirectToAction("Welcome", "Home");
}
else
ModelState.AddModelError("", "Login Name already taken.");
}
return View();
}
}
}
“AccountController” 类有两个主要方法。第一个是“SignUp”，当请求该 Action 时，它返回“SignUp.cshtml”View。第二个方法也命名为“SignUp”，但它被装饰了“[HttpPost]”特性。此特性指定“SignUp”方法的重载只能为 POST 请求调用。
第二个方法负责将新条目插入数据库，并使用 FormsAuthentication.SetAuthCookie() 方法自动验证用户。此方法为提供的用户名创建一个身份验证票证，并将其添加到响应的 Cookie 集合中，或者如果你使用的是无 Cookie 身份验证，则添加到 URL 中。身份验证后，我们将用户重定向到“Welcome.cshtml”页面。
现在添加另一个 Controller，并将其命名为“HomeController”。这个 Controller 将是我们默认页面的 Controller。我们将在下一步为这个 Controller 创建“Index”和“Welcome”View。这是“HomeController”类的代码：
using System.Web.Mvc;
namespace MVC5RealWorld.Controllers
{
public class HomeController : Controller
{
public ActionResult Index() {
return View();
}
[Authorize]
public ActionResult Welcome() {
return View();
}
}
}
HomeController 类包含两个 ActionResult 方法，如 Index 和 Welcome。“Index”方法作为我们的默认重定向页面，“Welcome”方法将是我们成功验证后重定向用户的页面。我们还用“[Authorize]”特性装饰了它，这样这个方法就只能为已登录或已验证的用户提供。
要配置默认页面路由，你可以转到 App_Start > RouteConfig。在那里你应该会看到类似以下内容：
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
上面的代码表示 /Home/Index 这个 URL 路径是我们应用程序的默认页面。有关路由的更多信息，请访问：ASP.NET MVC 路由概述
添加 Views
有两种方式可以添加 Views。你可以手动创建 Views 文件夹并添加相应的 .CSHTML 文件，或者像下图所示那样右键单击 Controller 的 Action 方法：
图 13：添加新 View
点击“Add View”将显示下面的对话框：
图 14：添加 View 对话框
此时我们不需要对 Index 页面做任何操作，所以只需点击“Add”。现在修改 Index 页面，并用以下 HTML 标记替换它：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<br/>
No Account yet? @Html.ActionLink("Signup Now!", "SignUp", "Account")
上面的标记中的 ActionLink 允许你导航到 AccountController 下的 SignUp 页面。现在通过添加 Index 页面相同的方式，为 Welcome Action 添加一个 View。这是 Welcome 页面的 HTML 标记：
@{
ViewBag.Title = "Welcome";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Hi <b>@Context.User.Identity.Name</b>! Welcome to my first MVC 5 Web App!</h2>
现在切换回“AccountController”类，并为“SignUp”页面添加一个新的 View。在 Add View 对话框中，选择“Create”作为脚手架模板，选择“UserSignUpView”作为 Model，选择“DemoDBEntities”作为数据上下文，如下图所示：
图 15：添加 View 对话框
点击“Add”，让 Visual Studio 为你生成 UI。术语“Scaffolding”允许你快速生成可以编辑和自定义的 UI。
现在我们需要精简生成的字段，因为有些字段我们实际上不需要用户看到，例如 RoleName 和 ID。此外，我还修改了 Password 以使用 PasswordFor HTML 助手，并使用 DropDownListFor 来显示性别。这是修改并精简后的 SignUp 页面的 HTML 标记：
@model MVC5RealWorld.Models.ViewModel.UserSignUpView
@{
ViewBag.Title = "SignUp";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>SignUp</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.LoginName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LoginName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LoginName, "", 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.PasswordFor(model => model.Password, new { @class = "form-control" } )
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Gender, new List<SelectListItem> {
new SelectListItem { Text="Male", Value="M" },
new SelectListItem { Text="Female", Value="F" }
}, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Register" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to Main", "Index","Home")
</div>
上面的标记是一个强类型视图。这种强类型方法可以更好地进行代码的编译时检查，并在 Visual Studio 编辑器中提供更丰富的 IntelliSense。通过在视图模板文件的顶部包含一个 @model 语句，你可以指定视图期望的对象类型。在这种情况下，它使用的是 MVC5RealWorld.Models.ViewModel.UserSignUpView。
如果你也注意到了，在添加了 Views 之后，Visual Studio 会自动为你组织 Views 的文件夹结构。请参阅下图以供参考：
图 16：新添加的 Views
Web.Config
最后一步是在 system.web 节点下添加以下配置以启用表单身份验证：
<system.web>
<authentication mode="Forms">
<forms loginUrl="~/Account/Login" defaultUrl="~/Home/Welcome"></forms>
</authentication>
</system.web>
运行应用程序
现在编译并构建你的应用程序。在浏览器中运行页面时，以下是输出：
首次请求时
图 17：初始请求
页面验证触发
图 18：页面验证
填写必填字段
图 19：填写必填字段
成功注册后
就这样！希望你觉得这篇文章有用。
请查看下一篇文章，了解如何创建带有页面授权的登录表单，地址为这里。
摘要
在系列的第一部分，我们学习了以下内容：
- ASP.NET MVC 简介
- 在 MS SQL Server 中创建数据库
- 在 MS SQL Server 中创建数据库表
- 在 Visual Studio 中创建 ASP.NET MVC 5 项目
- 实现 Entity Framework 数据库优先方法
- 创建 Models、Views 和 Controllers
- 创建简单的注册页面