原文：Adding a view
作者：Rick Anderson
翻譯：魏美娟(初見)
校對：趙亮(悲夢)、高嵩(Jack)、婁宇(Lyrics)、許登洋(Seay)、姚阿勇（Dr.Yao）
本節將修改 HelloWorldController 類，把使用 Razor 視圖模板文件為客戶端生成 HTML 響應的過程干凈利落地封裝起來。
您可以使用 Razor 視圖引擎創建一個視圖模板。基於 Razor 的視圖模板的文件使用 .cshtml 作為其擴展名，並用 C# 優雅地輸出 HTML。用 Razor 編寫視圖模板能減少字符的個數和敲擊鍵盤的次數，並使工作流程快速靈活。
目前，控制器類中的 Index 方法返回的是一串硬編碼的字符串。按下面的代碼所示，修改 Index 方法使其返回視圖對象：
public IActionResult Index()
{
return View();
}
上例中 Index 方法用一個視圖模板生成 HTML 響應給瀏覽器。控制器方法（也稱為 action 方法)，比如上面的 Index 方法，通常返回 IActionResult （或者派生自 ActionResult 的類），而不是字符串那樣的基元類型。
- 右擊 Views （視圖）文件夾，選擇 Add > New Folder （添加 > 新建文件夾），然后將文件夾命名為 HelloWorld.
-
右鍵點擊 Views/HelloWorld （視圖/Helloworld）文件夾，選擇 Add > New Item (添加->新建項)
-
在 Add New Item - MvcMovie （添加新建項 - MvcMovie）對話框中：
-
在右上方的搜索框中輸入關鍵詞 view
-
點擊 MVC View Page （MVC 視圖頁）
-
在 Name （名稱）框中, 保持默認的 Index.cshtml
-
點擊 Add （添加）
-
用以下代碼替換 Razor 視圖文件 Views/HelloWorld/Index.cshtml :
@{
ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
導航到 http://localhost:xxxx/HelloWorld。HelloWorldController 的 Index 方法只干一件事——運行 return View(); 語句來引導控制器方法使用指定的視圖模板文件，為瀏覽器渲染最終的響應結果。 因為沒有明確指定所使用視圖模板的文件名，MVC 默認使用 /Views/HelloWorld 文件夾中的 Index.cshtml 視圖文件。下圖顯示了在視圖中硬編碼的字符串 "Hello from our View Template!" 。
如果瀏覽器窗體比較小（比如在手機設備上），可能需要切換（點擊）右上方的 Bootstrap navigation button才能看到 Home、 About、 Contact、 Register 和 Log in 這些鏈接。
改變視圖和布局頁
點擊菜單鏈接（MvcMovie、Home 和 About）。每個頁面都顯示相同的菜單布局。菜單布局在 Views/Shared/_Layout.cshtml 文件中實現。打開 Views/Shared/_Layout.cshtml 文件。
Layout 模板允許你在一處指定網站的 HTML 容器布局，然后在網站下的多個頁面中使用。找到 @RenderBody() 那行。 RenderBody 是一個占位符，是你所有指定視圖的顯示位置，“包裹在”布局頁內。例如，點擊 About 鏈接， Views/Home/About.cshtml 視圖就會在 RenderBody 方法內渲染。
改變標題元素的內容。在布局模板中將錨（即 A 標簽，譯者注）文本改成“MVC Movie”，控制器將 Home 改成 Movies ，如下列高亮顯示的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Movie App</title> <!--手動高亮-->
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-controller="Movies" asp-action="Index" class="navbar-brand">Mvc Movie</a> <!--手動高亮-->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
@await Html.PartialAsync("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2016 - MvcMovie</p>
</footer>
</div>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("scripts", required: false)
</body>
</html>
警告
我們尚未實現Movies控制器，故若你點擊該鏈接，將會得到 404 錯誤（文件未找到）。
保存，點擊 About 鏈接。注意每個頁面怎樣顯示 Mvc Movie 鏈接。只在布局模板中改變一次，網站中的所有頁面都顯示新的鏈接和新的標題。
查看一下 Views/_ViewStart.cshtml 文件：
@{
Layout = "_Layout";
}
Views/_ViewStart.cshtml 文件將 Views/Shared/_Layout.cshtml 文件引入每個視圖中。可以利用 Layout 屬性設置不同的布局視圖，或者將其設置成 null 這樣就不會使用布局視圖了。
現在，讓我們改變 Index 視圖的標題。
打開 Views/HelloWorld/Index.cshtml 。這里有2個地方需要改變：
- 出現在瀏覽器上的標題文本
- 二級標題 (
<h2>元素).
你可以一點點改，這樣就可以看到哪些代碼改變了應用程序的哪些地方。
@{
ViewData["Title"] = "Movie List"; //手動高亮
}
<h2>My Movie List</h2> <!--手動高亮-->
<p>Hello from our View Template!</p>
在以上代碼中 ViewData["Title"] = "Movie List"; 將 ViewDataDictionary 的 Title 屬性設置為 "Movie List"。Title 屬性被用在布局頁的 <title> Html元素中：
<title>@ViewData["Title"] - Movie App</title>
保存並刷新頁面。注意瀏覽器標題、主標題和副標題都變化了（如果你沒看到變化，可能因為緩存的緣故，在瀏覽器中按下 Ctrl+F5 強制刷新）。瀏覽器標題由我們設置在 Index.cshtml 視圖模板中的 ViewData["Title"] 以及位於布局頁的 "- Movie App" 組合構成。
同時注意，Index.cshtml 視圖模板的內容是怎樣和 Views/Shared/_Layout.cshtml 視圖模板合並的，和一個HTML響應是怎樣被發送到瀏覽器的。布局模板非常易於進行作用於應用程序中所有頁面的修改。了解更多請參考 : Layout。
不過，我們的這點“數據”（本例中的消息 "Hello from our View Template!"）還是硬編碼的。MVC 應用程序里已經有了個“V”（View），我們也已經創建了一個“C”（Controller），但現在還沒有“M”（Model）。接下來我們將快速展示如何創建數據庫並從中搜索模型數據。
從控制器傳遞數據到視圖
在談到數據庫和模型之前，讓我們先討論從控制器傳遞信息到視圖。控制器類在響應傳入的 URL 請求時被調用。控制器類是編寫代碼處理傳入的瀏覽器請求，從數據庫中檢索數據，並最終決定發送什么類型的響應返回給瀏覽器的地方。然后可以在控制器中使用視圖模板生成和格式化 HTML 來響應給瀏覽器。
控制器負責提供所需要的任何數據或者對象，以便視圖模板向瀏覽器呈現響應。最佳實踐：視圖模板不應該執行業務邏輯或者直接與數據庫進行交互，而應該只使用控制器提供給它的數據。保持這種 “關注點分離” 有助於保持你的代碼整潔，可測試以及更易於維護。
目前，HelloWorldController 類中的 Welcome 方法接受一個 name 和一個 ID 參數，然后直接將值輸出到瀏覽器。讓我們更改控制器來使用視圖模板，而不是讓控制器使用字符串呈現這個響應。視圖模板將生成一個動態響應，這就意味着需要通過控制器傳遞恰當的數據給視圖以生成響應。要做到這一點，可以讓控制器將視圖模板所需的動態數據（參數）放在視圖模版隨后可以訪問的 ViewData 字典中。
回到 HelloWorldController.cs 文件，在 Welcome 方法中添加一個 Message 和 NumTimes 的值到 ViewData 字典中。 ViewData 字典是個動態對象，這意味着可以把任何你想要的數據添加進去。在你往里面添加東西之前，ViewData 對象沒有已定義的屬性。MVC 模型綁定系統自動映射地址欄中查詢字符串的命名參數（name 和 numTimes）到你的方法參數中。完整的 HelloWorldController.cs 文件看起來是這樣的：
using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult Welcome(string name, int numTimes = 1)
{
ViewData["Message"] = "Hello " + name;
ViewData["NumTimes"] = numTimes;
return View();
}
}
}
ViewData 字典對象包含將要傳遞給視圖的數據。下一步，需要一個 Welcome 的視圖模板。
-
右鍵點擊 Views/HelloWorld 文件夾，點擊 Add > New Item （添加 > 新建項）。
-
在 Add New Item - MvcMovie （添加新項 - MvcMovie）對話框中
-
在右上角的搜索框中輸入關鍵詞 view
-
點擊 MVC View Page （MVC 視圖頁）
-
在 Name （名稱）框中，輸入 Welcome.cshtml
-
點擊 Add （添加）
-
在 Welcome.cshtml 視圖模板中創建一個循環來顯示 "Hello" NumTimes。用以下代碼完全替換 Views/HelloWorld/Welcome.cshtml 中的內容：
@{
ViewData["Title"] = "About";
}
<h2>Welcome</h2>
<ul>
@for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
{
<li>@ViewData["Message"]</li>
}
</ul>
保存修改並打開瀏覽器，訪問這個地址：
http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4
數據從 URL 中獲取並用模型綁定器將數據傳遞給控制器。控制器將數據封裝到 ViewData 字典中，並將對象傳遞到視圖里。然后，視圖將數據以 HTML 的形式渲染到瀏覽器中。
在上面的例子中，我們用 ViewData 字典將數據從控制器傳遞到視圖中。在后面的教程中，我們將使用視圖模型（View Model）將數據從控制器傳遞到視圖中。用視圖模型傳遞數據的方法通常比 ViewData 字典的方式更受歡迎。查看 Dynamic V Strongly Typed Views 了解更多信息。
好吧，這也算是一種 Model 中的“M”吧，但無論如何都不是數據庫模型。讓我們用學到的東西創建一個電影數據庫吧。