第二章 指南（4.3）添加 View
原文：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 ，如下列高亮顯示的：
<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”吧，但無論如何都不是數據庫模型。讓我們用學到的東西創建一個電影數據庫吧。
由于水平有限，錯漏之處在所難免，歡迎大家批評指正，不勝感激，我們將及時修正。
dotNet Core Studying Group：436035237
相關文章：
ASP.NET Core 1.0 入門——了解一個空項目
ASP.NET Core 1.0 部署 HTTPS （.NET Framework 4.5.1）
.NET Core 1.0、ASP.NET Core 1.0和EF Core 1.0簡介
云服務器下ASP.NET Core 1.0環境搭建（包含mono與coreclr）
使用VS Code開發ASP.NET Core 應用程序
dotnet run是如何啟動asp.net core站點的
ASP.NET Core提供模塊化Middleware組件
“dotnet restore"和"dotnet run"都做了些什么？
探秘 dotnet run 如何運行 .NET Core 應用程序
.NET Portability Analyzer 已開源
ASP.NET Core的配置（1）：讀取配置信息
ASP.NET Core的配置（2）：配置模型詳解
.NET Core 1.0 RC2 歷險之旅
使用VS Code開發 調試.NET Core 應用程序
讓我們Core在一起：ASP.NET Core & .NET Core
.NET Core VS Code 環境配置
官方博客明確了 .NET Core RC2/RTM 時間表
.NET Core全新的配置管理[共9篇]
利用記事本創建一個ASP.NET Core RC2 MVC應用
微軟.NET 正式劈腿成功，橫跨所有平臺
.NET Core 1.0 CentOS7 嘗試
解讀發布：.NET Core RC2 and .NET Core SDK Preview 1
[.NET Core].NET Core R2安裝及示例教程
ASP.NET Core 開發-中間件(Middleware)
結合Jexus + Kestrel 部署 asp.net core 生產環境
通過Jexus 部署 dotnetcore版本MusicStore 示例程序
ASP.NET Core 中文文檔 第一章 入門
用 Visual Studio Code 在 macOS 上創建首個 ASP.NET Core 應用程序
用 Visual Studio 和 ASP.NET Core MVC 創建首個 Web API
用 Visual Studio 發布一個 Azure 云 Web 應用程序
ASP.NET Core MVC 與 Visual Studio 入門
第二章指南（4.2）添加 Controller
DotNet Core 介紹
原文地址：http://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-2_4_3-adding-view.html
.NET社區新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關注
總結
以上是生活随笔為你收集整理的第二章 指南（4.3）添加 View的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： asp.net core 使用 Redi
- 下一篇： dotnet core 开发体验之Rou