MVC 詳細文檔教程大全
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="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@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 輸出：
@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";}
這段代碼被自動添加到由應用程序顯示的所有視圖。
如果您刪除了這個文件，則必須向所有視圖中添加這行代碼。
在本教程後面的章節中，您將學到更多關於視圖的知識。