標籤：str 經曆 感知 第四篇 開發 reg www. 執行 time
目錄【第一篇】ASP.NET MVC快速入門之資料庫操作（MVC5+EF6）
【第二篇】ASP.NET MVC快速入門之資料註解（MVC5+EF6）
【第三篇】ASP.NET MVC快速入門之安全性原則（MVC5+EF6）
【第四篇】ASP.NET MVC快速入門之完整樣本（MVC5+EF6）
【番外篇】ASP.NET MVC快速入門之免費jQuery控制項陳列庫（MVC5+EF6）
請關注三石的部落格：http://cnblogs.com/sanshi
建立項目
開啟VS2015，找到功能表項目[檔案->建立->項目]，開啟嚮導對話方塊：
注意我們的選擇項：
點擊[確定]按鈕，嚮導會帶我們到另一個選擇對話方塊：
由於本教程是快速入門，所以我們從最簡單的入手，只勾選必需的選項：
點擊[確定]，VS2015會建立一個可直接啟動並執行項目，按下快速鍵[Ctrl+F5]，不調試直接運行：
預設的目錄結構如下：
如果你之前在WebForms下進行開發，對其中的一些檔案夾和檔案應該很熟悉了：
下面幾個檔案夾，用來放置靜態檔案，從名稱就可以方便的猜出其用途：
下面幾個檔案是ASP.NET MVC新引入的：
頁面流程
首先看下 [About]頁面：
這個頁面之所以能夠呈現在我們眼前，經曆了三個主要流程：
路由引擎->控制器
一切還得從Global.asax中說起，在其中的應用程式啟用事件中，我們需要註冊路由處理器：
protected void Application_Start(){ AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles);}
RouteConfig.cs類位於App_Start檔案夾中，我們來看下內容：
public class 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 } ); }}
這裡註冊一個名為Default的路由規則，對應的URL是{controller}/{action}/{id}，這裡三個預留位置分別表示：
控制器方法->視圖
通過上面的介紹，我們就知道了http://localhost:55654/Home/About網址對應於Home控制器的About方法。
我們在Controllers/HomeController.cs中找到相應的方法：
public ActionResult About(){ ViewBag.Message = "Your application description page."; return View();}
ViewBag是一個動態對象（dynamic），可以用來儲存任意參數，用來從控制器向視圖傳遞資料。
從控制器向視圖傳遞資料一般有兩種方法：
作為命名規範，這個操作方法會自動調用相應名稱的視圖檔案About.cshtml。
視圖->瀏覽器下面來看About.cshtml視圖檔案：
@{ ViewBag.Title = "About";}<h2>@ViewBag.Title.</h2><h3>@ViewBag.Message</h3> <p>Use this area to provide additional information.</p>
以@開頭用來輸出C#代碼的運行結果，MVC會自動判斷於何處結束C#代碼，並轉入HTML代碼。
需要注意，頁面第一行的@{ }用來執行一段C#代碼，不會輸出內容，這裡定義了一個ViewBag.Title的變數，並在下面的代碼中使用@ViewBag.Title輸出到頁面中。
很多初學者可能有些疑惑，為啥控制器中定義了ViewBag.Message，而在視圖中定義了ViewBag.Title，這兩者有啥區別？
一般來說是沒有功能的區別，僅僅是語義的區別。在視圖中定義的變數僅在視圖中使用，比如這裡定義的ViewBag.Title不僅在About.cshtml中使用，而且在布局視圖Shared/-_Layout.cshtml中也用到了。
布局視圖
布局視圖類似於WebForms中的主版頁面，具體的視圖頁面會作為一部分嵌入到布局視圖中，然後返回到瀏覽器形成一個完整的頁面。
每一個視圖頁面預設會使用Views/_ViewStart.cshtml中的定義的內容：
@{ Layout = "~/Views/Shared/_Layout.cshtml";}
這裡面指定了布局視圖的位置，我們來簡單看下布局視圖的內容：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")</head><body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - My ASP.NET Application</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false)</body></html>
其中head標籤下面的title中使用了在About視圖中定義的ViewBag.Title屬性。
這個布局視圖使用Bootstrap庫定義的CSS樣式來完成，包含標題列，導覽功能表，以及頁尾的定義，具體的內容會嵌入@RenderBody()的地方，最終形成完整的HTML頁面返回。
資料庫操作
上面從控制器傳入視圖的資料是硬式編碼一個字串，實際項目中則經常需要從資料庫中讀取資料，我們使用微軟推薦的Entity Framework CodeFirst開發模式來建立和使用資料庫。
安裝Entity Framework首先需要安裝EF，在VS2015中找到[工具]菜單，然後找到NuGet包管理器：
轉到[瀏覽]選項卡，可以搜尋Entity Framework，安裝其最新穩定版到項目中：
安裝後，會自動更改Web.config添加相應的配置資訊。
建立模型
我們計劃完成一個簡單的學生管理系統，包含基本的增刪改查（CRUD）。
首先在Models檔案，建立學生（Student）的模型類：
public class Student{ public int ID { get; set; } public string Name { get; set; } public int Gender { get; set; } public string Major { get; set; } public DateTime EntranceDate { get; set; }}
然後建立資料庫操作上下文，EF需要這個檔案來建立和訪問資料庫：
public class StudentDbContext : DbContext{ public DbSet<Student> Students { get; set; }}
由於這個類繼承自EF的DbContext基類，因此需要在檔案頭部添加如下引用：
using System.Data.Entity;
建立完這兩個檔案，需要重新編譯項目（快速鍵Ctrl+Shift+B），否則下面添加控制器時會出錯。
添加控制器在Controllers目錄上點擊右鍵，添加控制器，彈出嚮導對話方塊：
這裡選擇 MVC 5 Controller with views, using Entity Framework，然後進入設定對話方塊：
在這個對話方塊中，我們需要指定剛才建立的模型類（Student）和資料訪問上下文類（StudentDbContext），然後VS不僅可以自動建立視圖，而且使用EF自動建立CRUD的全部代碼，是不是很酷！
全部功能完成了！
是不是很驚奇，我們甚至沒來得及寫視圖代碼，沒有設定資料庫，沒有寫CRUD的邏輯代碼，VS模板幫我們產生了一切，現在運行一下（Ctrl+F5），並在瀏覽器中輸入/Students：
表格頁面
表格頁面對應於Students控制器下的Index操作方法：
public class StudentsController : Controller{ private StudentDbContext db = new StudentDbContext(); // GET: Students public ActionResult Index() { return View(db.Students.ToList()); } }
首先，我們看到控制器內部定義了一個私人變數db，並進行初始化。這是資料庫操作上下文執行個體，所有的CRUD操作都講依賴於這個執行個體。
在Index方法中，通過向View方法傳遞學生列表的方式，把模型資料傳遞到了視圖，在Views/Students/Index.cshtml視圖檔案中，我們聲明了傳入模型的類型：
@model IEnumerable<AspNetMvc.QuickStart.Models.Student>
在視圖中，Model屬性的類型就確定為強型別IEnumrable<Student>，配合VS提供的智能感知，不僅可以快速編寫代碼，並且在編譯時間還檢查代碼的有效性。
完整的Index.cshtml代碼：
@model IEnumerable<AspNetMvc.QuickStart.Models.Student> @{ ViewBag.Title = "Index";} <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create")</p><table class="table"> <tr> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Gender) </th> <th> @Html.DisplayNameFor(model => model.Major) </th> <th> @Html.DisplayNameFor(model => model.EntranceDate) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Gender) </td> <td> @Html.DisplayFor(modelItem => item.Major) </td> <td> @Html.DisplayFor(modelItem => item.EntranceDate) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.ID }) | @Html.ActionLink("Details", "Details", new { id=item.ID }) | @Html.ActionLink("Delete", "Delete", new { id=item.ID }) </td> </tr>} </table>
看著很有古老的ASP的感覺吧，不過這裡的Model屬性是強型別的，因此在foreach迴圈中，VS明確知道item類型是Student，從而方便代碼編寫：
@Html裡面都是MVC提供的輔助方法，用來輔助產生HTML代碼：
新增頁面對應於Students控制器下的Create操作方法：
// GET: Students/Createpublic ActionResult Create(){ return View();}
對應的視圖檔案：
@model AspNetMvc.QuickStart.Models.Student @{ ViewBag.Title = "Create";} <h2>Create</h2> @using (Html.BeginForm()){ @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Student</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) </div> </div> @* 省略 Gender Major EntranceDate *@ <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Create" class="btn btn-default" /> </div> </div> </div>} <div> @Html.ActionLink("Back to List", "Index")</div> @section Scripts { @Scripts.Render("~/bundles/jqueryval")}
首先定義了視圖中使用的模型類型是Student，這樣LabelFor強型別輔助方法就可以從模型中繼資料中擷取需要顯示的文本。
頁面開啟時，由於並未傳入任何模型對象，所以Model為空白對象，如下所示：
所以頁面上預設的輸入框都是空的，中是作者輸入值後的效果。
Html.BeginForm()會在頁面上產生一個form標籤，預設的提交地址還是當前頁面（action=/Students/Create），預設的要求方法是post，如下所示：
因此，點擊[Create]按鈕時，會發出一個POST請求到後台，對應於Students控制器的Create方法。
儲存資料與模型繫結下面我們來看下擁有[HttpPost]中繼資料的Create方法：
[HttpPost][ValidateAntiForgeryToken]public ActionResult Create([Bind(Include = "ID,Name,Gender,Major,EntranceDate")] Student student){ if (ModelState.IsValid) { db.Students.Add(student); db.SaveChanges(); return RedirectToAction("Index"); } return View(student);}
這裡面有兩個安全措施：
這兩個安全手段我們會在以後的文章中詳細介紹，這裡就先略過。
我們先看下本次請求的POST參數：
但是Create方法中只有一個Student對象參數，是不是很神奇，其實這是一個重要的概念模型繫結。
如果在WebForms中，我們可以會寫一堆代碼來從Request.Form中擷取參數，並重建Student對象，類似如下代碼：
Student student = new Student();student.Name = Request.Form["Name"];student.Gender = Convert.ToInt32(Request.Form["Gender"]);....
在MVC中，這一過程是自動完成，簡單來說這就是模型繫結。
但是實際的模型繫結過程，不僅在請求的表單資料中尋找，還會在路由參數，URL查詢字串，以及Cookie中尋找。
如果模型繫結失敗（比如模型參數不符合驗證規則），則ModelState.IsValid就為false，這時會直接返回頁面內容，此時模型對象student中儲存的是使用者輸入的值，前端也會有錯誤提示，這個過程我們會在下一篇文章中講解。
如果模型繫結成功，則儲存新增資料，然後通過RedirectToAction來重新導向到表格頁面：
小結
這篇文章首先介紹了VS2015下MVC項目的建立過程；然後簡要概觀頁面執行的流程，從路由引擎到控制器，再由控制器到視圖，最後由視圖返回到瀏覽器，而模型是作為控制器傳入視圖的參數，這樣清晰明了；最後使用VS提供的模板，建立了一個帶CRUD操作的資料訪問執行個體。
EF CodeFirst讓我們的關注點從資料庫轉移到了模型，而模型又是MVC的核心所在，對模型進行恰當的資料註解，不僅會影響資料庫的表結構，而且會影響瀏覽器端的資料驗證和服務端的資料驗證，因此下一篇文章我們會詳細介紹一下資料註解。
下載樣本原始碼
基於 jQuery 的專業 ASP.NET WebForms/MVC 控制項陳列庫！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
