學習一個軟體開發框架的最好方法是跳進他的內部並使用它。在本章，你將用ASP.NET Core MVC建立一個簡單的資料登入應用。我將它一步一步地展示，以便你能看清楚怎樣構建一個MVC 應用程式。為了讓事情簡單，我跳過了一些技術細節，但是不要擔心，如果你是一個MVC的新手，你將會發現許多東西足夠提起你的興趣。因為我用的東西有些沒做解釋，所以我提供了一些參考以便你可以看到所有的細節的東西。

安裝Visual Studio

要想根據本書實踐的話，必須安裝Visual studio 2015，它提供了你需要ASP.NET Core MVC開發的所有的東西。我用的是免費的Visual Studio 2015 Community 版，你可以在www.visualstudio.com這裡下載它。安裝的時候，一定要確保選中了Microsoft web Web Develooper Tools 選項。

提示：Visual Studio 僅支援Windows 平臺，在其他平臺上，你可以使用Visual Studio Code 來開發，但是它沒有提供本書中示例程式所需要的全部工具，關於這些，請參見第13章。

如果你已經安裝了Visual Studio，你必須確保更到了Visual Studio Update 3，因為它才能提供ASP.NET Core 開發的支援。如果是新安裝的話，Update3 會自動安裝上。如果你僅需要Update, 你可以去http://go.microsoft.com/fwlink/?linkId=691129 這裡下載它。

最後一步，你必須下載安裝git，在這裡可以下載：

https://git-scm.com/download。 Visual Studio 包含了他自己版本的git,但是不太好用，並且有時候會產生難以預料的東西。例如和其他工具如Bower一起使用的時候。我在第6章會講述Bower。當你安裝git的時候，要告訴安裝器，把這個工具加入PATH環境變數中，以確保Visual Studio 能夠找到新版本的git。

圖2-1 將git加入path。

啟動Visual Studio ，選擇Tools-> Options ，導航到專案和解決方案 -> 展開Web Tools 項，如圖2-2。去掉勾選$(VSINSTALLDIR)\Web\External\Git

以讓Visual Studio自帶的版本失效，但是要確保$(Path)項是有效的，以使用剛剛安裝的版本。

圖2-2 在Visual Studio裡配置git。

關於ASP.NET Core MVC和Visual Studio 的未來 微軟預估了建立ASP.NET Core 和 ASP.NET Core MVC 需要多長時間。原計劃是在Visual Studio2015裡一起釋出的，但是在ASP.NET上延遲了。我寫這本書的時候，微軟已經開始了下一版本的Visual Studio的開發。這意味著在下一個版本Visual Studio發行的時候，支援開發ASP.NET Core MVC應用的工具會有所變化。如果工具穩定了，我會提供建立例子程式的更新說明，請關注Apress.com 中本書的網頁。

建立一個新的ASP.NET Core MVC工程(Project)

我將在Visual Studio裡建立一個新的ASP.NET Core MVC工程。在Visual Studio內， 從選單中選擇New -> Project 來開啟新工程的對話方塊。如果在左邊欄中導航到 Template->Visual C#->Web項，你將看到ASP.NET Web Application(.Net Core)工程模板，選中這個工程型別，如圖2-3所示。

圖2-3 Visual Studio Core Web應用工程模板

提示: 選擇專案模板時可能會有點困惑，因為它們幾個很類似。這裡解釋一下：ASP.NET Web Application (.NET Framework) 模板用於使用ASP.NET 和ASP.NET MVC框架來建立工程，它是ASP.NET Core的早期版本。另外兩個模板都是用來建立ASP.NET Core 的應用，只是使用不同的執行時庫。可以在.Net Framework 和.NET Core 之間選擇。我將在第6章解釋他們之間的不同。但是我再整本書中都使用.NET Core選項，因此他是你唯一的選擇，以確保你執行例子應用程式得到正確的結果。

為新工程設定名字為PartyInvites 並且確保Add Application Insights to Project 選項不被選中。如圖2-3。 點選OK 按鈕繼續，然後你會看到另一個對話方塊，如圖2-4，他將讓你設定專案的初始內容。

圖2-4 選擇初始專案配置

這裡有三個ASP.NET Core 模板選項，每個都使用不同的初始內容建立一個工程。 對本章來說，選擇Web Application選項，這個選項可以使用預定義的內容建立一個MVC 應用來開始開發。

注意: 這是唯一的一個使用Web 應用工程模板的一章。我不喜歡預定義的專案模板，因為他們鼓勵開發人員象一個黑盒子一樣對待一些重要的特徵，例如身份驗證。在這本書中，我的目標是讓你懂得和管理MVC 應用的每一方面的知識，因此本書中以後的章節中，我都使用空模版來開始一個工程。在本章，我想讓你快速地入門，這個模板是很合適的。

點選 Change Authentication 按鈕，選擇上No Authentication 選項，如圖2-5。這個工程不需要身份驗證，但是我會在第28-30章闡述如何保證ASP.NET 應用程式的安全。

圖2-5 選擇身份驗證設定

點選OK 關閉 Change Authentication 對話方塊。 確保Host in the Cloud 沒有被選中，然後單擊OK ，建立PartyInvites 工程。 一旦Visual Studio 建立完工程，你將看到一些檔案和資料夾在解決方案視窗中顯示出來，如圖2-6。這是使用Web應用程式模板建立的新MVC 專案的預設結構。你將很快就能明白這裡的每一個檔案和資料夾的作用。

圖2-6 ASP.NET Core MVC 工程中初始的檔案和資料夾結構

你可以從Debug 選單中選擇Start Debugging，(如果它提示你開啟除錯，點選OK 按鈕就是)，你這樣做了，Visual Studio 編譯生成本應用程式，然後使用叫做IIS的應用程式伺服器來執行它，然後開啟Web瀏覽器請求應用的內容，你會看到下面結果，如圖2-7。

圖2-7 執行例子工程

當Visual Studio 使用Web應用模板來建立一個專案時，它往裡面加入了基礎的程式碼和內容，當你執行本應用時，你也能看到這些內容。接下來，在本章我將會替換工程裡的內容部分來建立簡單的MVC應用程式。

當你做完了上面這些步驟，如果瀏覽器顯示錯誤資訊，請關閉瀏覽器視窗以停止除錯。或者回到Visual Studio，在Debug選單裡選擇Stop Debugging。 就像你剛才看到的那樣，Visual Studio開啟瀏覽器以顯示工程。你可以在Web Browser選單中，單擊IIS Express的右側箭頭並從選項列表中選擇瀏覽器的方式選擇任何一個你已經安裝的瀏覽器。如圖2-8。

圖2-8 選擇一個瀏覽器

從這裡開始，我將在本書中使用Google Chrome 或Google Chrome Canary 來截圖。但是你可以使用任何現代瀏覽器來顯示本書中的例子，包括Microsoft Edge 和最新版的Internet Explorer。

加入控制器(Controller)

在MVC 模式裡，傳入的請求被控制器(Controller)處理，在ASP.NET Core MVC,控制器只是一個類，同城繼承自內建的MVC控制器基類Microsoft.AspNetCore.Mvc.Controller。 控制器中每一個公共方法都叫做動作(action)方法。意思是你可以通過一些URL從Web上英法一個動作。按照MVC的傳統約定，控制器類一般都放入controllers資料夾內，這個資料夾是由Visual Studio 在建立工程的時候建立的。

提示：你不必非得遵循MVC的約定，但是我建議你這樣做，因為它更合理一些。

Visual Studio 在專案里加入了預設的Controller 類，如果你在解決方案瀏覽器視窗擴充套件開Controllers 資料夾就會看到。預設的Controller叫做HomeController.cs。控制器類名字是以Controller結尾的，意思是當你看到HomeController.cs檔案時，就知道他是一個叫做Home的控制器(Controller)，HomeController是MVC應用的預設控制器。單擊HomeController.cs 檔案你可以編輯它。你會看到List 2-1所示的程式碼。

List 2-1. HomeController的初始內容

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace PartyInvites.Controllers {
public class HomeController : Controller {
public IActionResult Index() {
return View();
}
public IActionResult About() {
ViewData["Message"] = "Your application description page.";
return View();
}
public IActionResult Contact() {
ViewData["Message"] = "Your contact page.";
return View();
}
public IActionResult Error() {
return View();
}
}
}

用下面List 2-2的內容替換HomeController.cs檔案中原來的程式碼。這裡，我只保留了一個方法，更改了結果型別和他的實現，並移除了那些不需要的using語句。

Listing 2-2. 更改 HomeController.cs

using Microsoft.AspNetCore.Mvc;
namespace PartyInvites.Controllers {
public class HomeController : Controller {
public string Index() {
return "Hello World";
}
}
}

這些更改沒有動態效果，但是是一個很好的演示。我已經更改了Index方法讓他返回“Hello World”。現在，點選Debug -> Start Debugging選單再次執行專案。

提示:如果及在前面的一節一直保持應用程式在執行狀態，你需要選擇 Debugging -> Restart選單。當然，如果你願意，你就選擇停止除錯然後再開始除錯。

瀏覽器將會發起一個HTTP請求到伺服器。預設的MVC配置規定了這個請求將被Index方法（叫做Action方法或就叫做Action）處理，該方法的結果會發回之瀏覽器，如圖2-9顯示的那樣。

圖2-9 Action 方法的輸出

提示：請注意，圖中Visual Studio已經將瀏覽器指向了埠57628。你看到你的瀏覽器上的URL埠號幾乎肯定與圖上不同。因為VS在建立工程的時候會隨機分配埠。如果你看到Windows任務條上通知區域，你會發現一個IIS Express 的圖示，它是一個簡化的IIS 應用程式伺服器的版本，隨著VS 一起來的，用於在開發的時候交付ASP.NET 內容和提供服務。在第12章，我將會告訴你如何釋出一個MVC工程到生產環境。

理解路由

除了Model,View和控制器，MVC 應用也會使用ASP.NET 路由系統，它合同決定URL如何對映到Controller和Action。路由是一個用來決定如和處理請求的規則。當VS建立MVC專案時，它幫你加了一些預設的路由。你可以請求下列URL，它們都會指向HomeController中的 Index action 。

/
/Home
/Home/Index

因此，當一個瀏覽器請求http://yoursite/ 或者 http://yoursite/Home 它都會從HomeController 的Index方法返回結果。 你可以自己試一下在瀏覽器中改變URL，假設現在是http://localhost:57628,如果你在URL後面新增 /Home 或 /Home/Index 然後按回車鍵，你將會看見同樣的Hello World 結果。

這是一個遵循ASP.NET Core MVC實現的約定的很好的例子，這個約定是：我將有一個叫做HomeController的控制器，它是MVC應用的入口點。 預設的VS 配置中，當它要建立一個新的MVC應用時，它會假定我們遵循這個約定。因為我遵循這個約定，我會自動的到前面列表的支援，如果我不遵循這個約定，我將必須修改配置以指向其他的Controller。 對於這個簡單的例子來說，預設的配置是我所需要的。

渲染Web頁面

前面例子裡輸出的不是HTML，他只是簡單的”Hello World” 字串。要想給瀏覽器產生HTML相應，我需要一個View，它將會告訴MVC如何為一個請求生成響應。 建立並渲染一個View 第一件事我需要做的是修改Index action方法，如程式2-3。我做的改動用加粗的字型顯示了，也是使用了一個讓例子變得很簡單的約定。

Listing 2-3. 修改Action

using Microsoft.AspNetCore.Mvc;
namespace PartyInvites.Controllers {
public class HomeController : Controller {
public ViewResult Index() {
return View("MyView");
}
}
}

當我從一個Action方法返回ViewResult 物件時，我指示MVC去渲染一個view。我通過呼叫View方法來建立一個ViewResult物件，呼叫時要制定View的名字MyView。如果你執行這個應用程式，你會發現MVC會試圖尋找這個View，會出現如下圖2-10所顯示的錯誤資訊。

圖2-10 MVC試圖尋找一個view

這個錯誤資訊是非常有幫助的。 不僅解釋了MVC找不到我在action方法裡指定的View，也告訴了去哪找的。所有的View儲存在Views資料夾，組織成子資料夾。例如，Home controller 裡關聯的View，會儲存在叫做Views/Home的資料夾中。如果一個View沒有固定的Controller,它將會儲存在Views/shared資料夾。VS 會在Web 應用程式模板被使用的時候建立Home和Shared資料夾，並放入一些佔位的View 以使工程能夠啟動。

要建立View，在解決方案瀏覽器視窗內，右鍵單擊Views->Home，並在彈出選單中選擇Add -> New Item。VS 匯給你展示出來一些項模板，在左側欄選擇ASP.NET 類別然後在中間欄選擇MVC View Page 項。如圖2-11。

圖2-11 建立View

提示: 在Views資料夾裡你會看見一些檔案，他們是VS 新增進來的用來提供就像圖2-7顯示的那樣的初始內容。你可以忽略那些檔案。

設定名字欄位為MyView.cshtml 然後單擊Add 按鈕來建立View。VS將會建立Views/Home/MyView.cshtml檔案然後開啟它讓你編輯。初始的時候View檔案的內容只是一些註釋和佔位符，請用程式碼2-4替換他們。

提示:很容易在錯誤的資料夾中建立view檔案，如果你沒有最終在Views/Home裡建立MyView.cshtml，將他們刪除然後再建立就可以。

Listing 2-4. 替換 MyView.cshtml 檔案內容

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
Hello World (from the view)
</div>
</body>
</html>

新的View檔案中的內容大部分都是HTML,除了這一部分：

@{
Layout = null;
}

這是一個被Razor View引擎解釋的表示式，它會處理View的內容並生成發回給瀏覽器中的HTML。這是一個簡單的Razor表示式，他會告訴Razor我選擇不使用layout。Layout是一個HTML模板，我將在第五章講解它。我將忽略Razor，過一會在回來。想要看效果，請點選Start Debugging 來執行應用程式。你將會看到圖2-12中的結果。

圖2-12 測試View

當我第一次編輯Index action 方法時，它返回一個字串，也就是MVC會傳遞字串值給瀏覽器，除此之外不會做別的。現在，Index方法返回一個ViewResult,MVC渲染一個檢視（view）並返回它產生的HTML。我告訴了MVC該使用哪一個檢視，所以它使用命名約定自動找到了它。這個約定就是檢視有與Action相同的名字並且儲存在以控制器命名的資料夾裡。

除了字串和ViewResult ,我還可以讓Action方法返回其它型別。例如如果我返回一個RedirectResult,瀏覽器將重定向到另一個URL。如果我返回一個HttpUnauthorizedResult，I會強迫使用者登入。這些物件被叫做Action result的集合控制。Action Result系統讓你封裝並重用通用的action返回。在17章，我會介紹更多的相關內容。

增加動態輸出

整個web應用平臺的關注點在於構建並顯示動態輸出內容。在MVC裡，控制器負責構建一些資料並將其傳給檢視。檢視負責渲染成HTML。 從控制器向檢視傳遞資料的一種方式是使用ViewBag 物件，它是一個控制器基類的成員。ViewBag是一個動態物件，你可以給他賦值任意屬性給檢視來渲染用。程式碼2-5 演示瞭如何在HomeController裡傳遞簡單物件。 Listing 2-5. 設定檢視資料

using System;
using Microsoft.AspNetCore.Mvc;
namespace PartyInvites.Controllers {
public class HomeController : Controller {
public ViewResult Index() {
int hour = DateTime.Now.Hour;
ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon";
return View("MyView");
}
}
}

我向ViewBag.Greeting屬性賦值，以給檢視提供資料。Greeting屬性在賦值之前是不存在的，這允許我以任意流暢的方式從控制器向檢視傳遞資料而不必在賦值之前定義類。我在檢視中引用了ViewBag.Greeting屬性以獲得他的值。如同程式碼2-6，這是修改後的MyView.cshtml。

Listing 2-6. 在視圖裡獲取傳遞過來的值

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@ViewBag.Greeting World (from the view)
</div>
</body>
</html>

上面程式碼增加的部分是Razor表示式，它在MVC 使用檢視生成相應的時候求值。當我在控制器內呼叫View方法的時候，MVC找到MyView.cshtml檔案並請求Razor 檢視引擎解析檔案的內容。Razor 會查詢象上面程式碼中的表示式。在本例中，處理表達式的意思是將ViewBag.Greeting屬性插入到檢視中。

Greeting這個屬性名字沒有什麼特殊的東西，你可以使用任何其他的名字，並且一樣好用。只要你在控制器中的名字與檢視中的名字相同即可。你可以使用多個屬性來傳遞多個數據。然後你執行一下看一下效果，如圖2-13。

圖2-13 一個MVC的動態響應