Pro ASP.NET Core MVC 第6版 第二章（前半章）
目錄
第二章 第一個MVC 應用程序
學習一個軟件開發框架的最好方法是跳進他的內部並使用它。在本章，你將用ASP.NET Core MVC建立一個簡單的數據登陸應用。我將它一步一步地展現，以便你能看清楚怎樣構建一個MVC 應用程序。爲了讓事情簡單，我跳過了一些技術細節，可是不要擔憂，若是你是一個MVC的新手，你將會發現許多東西足夠提起你的興趣。由於我用的東西有些沒作解釋，因此我提供了一些參考以便你能夠看到全部的細節的東西。html
安裝Visual Studio
要想根據本書實踐的話，必須安裝Visual studio 2015，它提供了你須要ASP.NET Core MVC開發的全部的東西。我用的是免費的Visual Studio 2015 Community 版，你能夠在www.visualstudio.com這裏下載它。安裝的時候，必定要確保選中了Microsoft web Web Develooper Tools 選項。git
提示：Visual Studio 僅支持Windows 平臺，在其餘平臺上，你可使用Visual Studio Code 來開發，可是它沒有提供本書中示例程序所須要的所有工具，關於這些，請參見第13章。web
若是你已經安裝了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。app
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)項是有效的，以使用剛剛安裝的版本。oop
圖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，它會強迫用戶登陸。這些對象被叫作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的動態響應
- 1. Pro ASP.NET Core MVC 第6版 第二章（後半章）
- 2. Pro ASP.NET Core MVC 第6版 第一章
- 3. Pro ASP.NET Core MVC 6th 第三章
- 4. Pro ASP.Net Core MVC 6th 第四章
- 5. Pro ASP.NET Core MVC 第6版翻譯 目錄頁
- 6. [翻譯]Pro ASP.NET CORE MVC 2 第11章 SportsStore:Administration 管理
- 7. Pro ASP.NET Core MVC 2翻譯計劃：第一章
- 8. 第8章 ASP.NET(MVC Web API)
- 9. 第5章ASP.NET MVC (模型綁定)
- 10. 第6章 copssh
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Pro ASP.NET Core MVC 第6版 第二章（後半章）
- 2. Pro ASP.NET Core MVC 第6版 第一章
- 3. Pro ASP.NET Core MVC 6th 第三章
- 4. Pro ASP.Net Core MVC 6th 第四章
- 5. Pro ASP.NET Core MVC 第6版翻譯 目錄頁
- 6. [翻譯]Pro ASP.NET CORE MVC 2 第11章 SportsStore:Administration 管理
- 7. Pro ASP.NET Core MVC 2翻譯計劃：第一章
- 8. 第8章 ASP.NET(MVC Web API)
- 9. 第5章ASP.NET MVC (模型綁定)
- 10. 第6章 copssh