Pro ASP.NET Core MVC 第6版 第二章（前半章）

標籤：using   visual   author   result   tool   data   inline   mode   告訴   

目錄 第二章 第一個MVC 應用程式

學習一個軟體開發架構的最好方法是跳進他的內部並使用它。在本章，你將用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 這裡下載它。

 

然後，你必須下載並安裝.NET Core, 在這裡：https://go.microsoft.com/fwlink/?LinkId=817245

。即是是全新安裝的Visual Studio,你也需要下載.NET Core。

 

最後一步，你必須下載安裝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工程(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，他將讓你設定項目的初始內容。

 

這裡有三個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 。

l /

l /Home

l /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>

The new contents of the view file are mostly HTML. The exception is the part that looks like this:

...

@{

Layout = null;

}

...

 

新的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的動態響應

Pro ASP.NET Core MVC 第6版 第二章（前半章）