返回目录：文件问题
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
ASP.NET 支持三种不同的开发模式：
Web Pages（Web 页面）、MVC（Model View Controller 模型-视图-控制器）、Web Forms（Web 窗体）。
本教程介绍 MVC。
| Web Pages | MVC | Web Forms |
MVC 编程模式
MVC 是三种 ASP.NET 编程模式中的一种。
MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
Controller（控制器）处理输入（写入数据库记录）。
MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。
Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。
View（视图）是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。
Controller（控制器）是应用程序中处理用户交互的部分。
通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
MVC 分层有助于管理复杂的应用程序，因为您可以在一个时间内专门关注一个方面。例如，您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。
MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。
Web Forms 对比 MVC
MVC 编程模式是对传统 ASP.NET（Web Forms）的一种轻量级的替代方案。它是轻量级的、可测试性高的框架，同时整合了所有已有的 ASP.NET 特性，比如母版页、安全性和认证。
Visual Studio Express 2012/2010
Visual Studio Express 是 Microsoft Visual Studio 的免费版本。
Visual Studio Express 是为 MVC（和 Web Forms）量身定制的开发工具。
Visual Studio Express 包含：
MVC 和 Web Forms
拖拽 Web 控件和 Web 组件
Web 服务器语言（Razor 使用 VB 或者 C#）
Web 服务器（IIS Express）
数据库服务器（SQL Server Compact）
完整的 Web 开发框架（ASP.NET）
如果您已经安装了 Visual Studio Express，您将从本教程中学到更多。
如果您想安装 Visual Studio Express，请点击下列链接中的一个：
Visual Web Developer 2012（Windows 7 或者 Windows 8）
Visual Web Developer 2010（Windows Vista 或者 XP）
ASP.NET MVC - Internet 应用程序
为了学习 ASP.NET MVC，我们将构建一个 Internet 应用程序。
第 1 部分：创建应用程序。
我们将构建什么
我们将构建一个支持添加、编辑、删除和列出数据库存储信息的 Internet 应用程序。
我们将做什么
Visual Web Developer 提供了构建 Web 应用程序的不同模板。
我们将使用 Visual Web Developer 来创建一个带 HTML5 标记的空的 MVC Internet 应用程序。
当这个空白的 Internet 应用程序被创建之后，我们将逐步向该应用添加代码，直到全部完成。我们将使用 C# 作为编程语言，并使用最新的 Razor 服务器代码标记。
沿着这个思路，我们将讲解这个应用程序的内容、代码和所有组件。
创建 Web 应用程序
如果您已经安装了 Visual Web Developer ，请启动 Visual Web Developer 并选择 New Project 来新建项目。 否则您就只能通过阅读教程来学习了。
在 New Project 对话框中：
打开Visual C#模板
选择模板 ASP.NET MVC 3 Web Application
设置项目名称为 MvcDemo
设置磁盘位置，比如 c:\w3cschool_demo
点击 OK
当 New Project 对话框打开时：
选择 Internet Application 模板
选择 Razor Engine（Razor 引擎）
选择 HTML5 Markup（HTML5 标记）
点击 OK
Visual Studio Express 将创建一个如下所示的类似项目：
我们将在本教程的下一章中探究有关文件和文件夹的内容。
MVC 模式定义 Web 应用程序 带有三个逻辑层： 业务层（模型逻辑） 显示层（视图逻辑） 输入控制（控制器逻辑） |
ASP.NET MVC - 应用程序文件夹
为了学习 ASP.NET MVC，我们将构建一个 Internet 应用程序。
第 2 部分：探究应用程序文件夹。
MVC 文件夹
一个典型的 ASP.NET MVC Web 应用程序的文件夹内容如下所示：
| 应用程序信息PropertiesReferences应用程序文件夹App_Data 文件夹Content 文件夹Controllers 文件夹Models 文件夹Scripts 文件夹Views 文件夹配置文件Global.asaxpackages.configWeb.config |
所有的 MVC 应用程序的文件夹名称都是相同的。MVC 框架是基于默认的命名。控制器写在 Controllers 文件夹中，视图写在 Views 文件夹中，模型写在 Models 文件夹中。您不必再应用程序代码中使用文件夹名称。
标准化的命名减少了代码量，同时有利于开发人员对 MVC 项目的理解。
下面是对每个文件夹内容的简短概述：
App_Data 文件夹
App_Data 文件夹用于存储应用程序数据。
我们将在本教程后面的章节中介绍添加 SQL 数据库到 App_Data 文件夹。
Content 文件夹
Content 文件夹用于存放静态文件，比如样式表（CSS 文件）、图标和图像。
Visual Web Developer 会自动添加一个 themes 文件夹到 Content 文件夹中。themes 文件夹存放 jQuery 样式和图片。在项目中，您可以删除这个 themes 文件夹。
Visual Web Developer 同时也会添加一个标准的样式表文件到项目中：即 content 文件夹中的 Site.css 文件。这个样式表文件是您想要改变应用程序样式时需要编辑的文件。
我们将在本教程的下一章中编辑这个样式表文件（Site.css）。
Controllers 文件夹
Controllers 文件夹包含负责处理用户输入和响应的控制器类。
MVC 要求所有控制器文件的名称以 "Controller" 结尾。
Visual Web Developer 已经创建好一个 Home 控制器（用于 Home 页面和 About 页面）和一个 Account 控制器（用于 Login 页面）：
我们将在本教程后面的章节中创建更多的控制器。
Models 文件夹
Models 文件夹包含表示应用程序模型的类。模型控制并操作应用程序的数据。
我们将在本教程后面的章节中创建模型（类）。
Views 文件夹
Views 文件夹用于存储与应用程序的显示相关的 HTML 文件（用户界面）。
Views 文件夹中包含每个控制器对应的一个文件夹。
在 Views 文件夹中，Visual Web Developer 已经创建了一个 Account 文件夹、一个 Home 文件夹、一个 Shared 文件夹。
Account 文件夹包含用于用户账号注册和登录的页面。
Home 文件夹用于存储诸如 home 页和 about 页之类的应用程序页面。
Shared 文件夹用于存储控制器间分享的视图（母版页和布局页）。
我们将在本教程的下一章中编辑这些布局文件。
Scripts 文件夹
Scripts 文件夹存储应用程序的 JavaScript 文件。
默认情况下，Visual Web Developer 在这个文件夹中存放标准的 MVC、Ajax 和 jQuery 文件：
注释：名为 "modernizr" 的文件时用于在应用程序中支持 HTML5 和 CSS3 的 JavaScript 文件。
ASP.NET MVC - 样式和布局
为了学习 ASP.NET MVC，我们将构建一个 Internet 应用程序。
第 3 部分：添加样式和统一的外观（布局）。
添加布局
文件 _Layout.cshtml 表示应用程序中每个页面的布局。它位于 Views 文件夹中的 Shared 文件夹。
打开文件 _Layout.cshtml，把内容替换成：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="https://www.shangyouw.cn@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="https://www.shangyouw.cn@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="https://www.shangyouw.cn@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Movies", "Index", "Movies")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<section id="main">
@RenderBody()
<p>Copyright W3CSchool 2012. All Rights Reserved.</p>
</section>
</body>
</html>
HTML 帮助器
在上面的代码中，HTML 帮助器用于修改 HTML 输出：
https://www.shangyouw.cn@Url.Content() - URL 内容将在此处插入。
@Html.ActionLink() - HTML 链接将在此处插入。
在本教程后面的章节中，您将学到更多关于 HTML 帮助器的知识。
Razor 语法
在上面的代码中，红色标记的代码是使用 Razor 标记的 C#。
@ViewBag.Title - 页面标题将在此处插入。
@RenderBody() - 页面内容将在此处呈现。
您可以在我们的 Razor 教程中学习关于 C# 和 VB（Visual Basic）的 Razor 标记的知识。
添加样式
应用程序的样式表是 Site.css，位于 Content 文件夹中。
打开文件 Site.css，把内容替换成：
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
a
{
color: #034af3;
}
/* Menu Styles ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Forms Styles ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Data Styles ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}
_ViewStart 文件
Shared 文件夹（位于 Views 文件夹内）中的 _ViewStart 文件包含如下内容：
@{Layout = "~/Views/Shared/_Layout.cshtml";}
这段代码被自动添加到由应用程序显示的所有视图。
如果您删除了这个文件，则必须向所有视图中添加这行代码。
在本教程后面的章节中，您将学到更多关于视图的知识。