第二章 指南（4.3）添加 View
原文：Adding a view
作者：Rick Anderson
翻譯：魏美娟(初見)
校對(duì)：趙亮(悲夢(mèng))、高嵩(Jack)、婁宇(Lyrics)、許登洋(Seay)、姚阿勇（Dr.Yao）
本節(jié)將修改 HelloWorldController 類，把使用 Razor 視圖模板文件為客戶端生成 HTML 響應(yīng)的過程干凈利落地封裝起來。
您可以使用 Razor 視圖引擎創(chuàng)建一個(gè)視圖模板。基于 Razor 的視圖模板的文件使用 .cshtml 作為其擴(kuò)展名，并用 C# 優(yōu)雅地輸出 HTML。用 Razor 編寫視圖模板能減少字符的個(gè)數(shù)和敲擊鍵盤的次數(shù)，并使工作流程快速靈活。
目前，控制器類中的 Index 方法返回的是一串硬編碼的字符串。按下面的代碼所示，修改 Index 方法使其返回視圖對(duì)象：
public IActionResult Index(){ ? ?? ? ? ? return View(); }
上例中 Index 方法用一個(gè)視圖模板生成 HTML 響應(yīng)給瀏覽器。控制器方法（也稱為 action 方法)，比如上面的 Index 方法，通常返回 IActionResult （或者派生自 ActionResult 的類），而不是字符串那樣的基元類型。
右擊 Views （視圖）文件夾，選擇 Add > New Folder （添加 > 新建文件夾），然后將文件夾命名為 HelloWorld.
右鍵點(diǎn)擊 Views/HelloWorld （視圖/Helloworld）文件夾，選擇 Add > New Item (添加->新建項(xiàng))
在 Add New Item - MvcMovie （添加新建項(xiàng) - MvcMovie）對(duì)話框中：
在右上方的搜索框中輸入關(guān)鍵詞 view
點(diǎn)擊 MVC View Page （MVC 視圖頁）
在 Name （名稱）框中, 保持默認(rèn)的 Index.cshtml
點(diǎn)擊 Add （添加）
用以下代碼替換 Razor 視圖文件 Views/HelloWorld/Index.cshtml :
@{ViewData["Title"] = "Index"; }<h2>Index</h2><p>Hello from our View Template!</p>導(dǎo)航到 http://localhost:xxxx/HelloWorld。HelloWorldController 的 Index 方法只干一件事——運(yùn)行 return View(); 語句來引導(dǎo)控制器方法使用指定的視圖模板文件，為瀏覽器渲染最終的響應(yīng)結(jié)果。 因?yàn)闆]有明確指定所使用視圖模板的文件名，MVC 默認(rèn)使用 /Views/HelloWorld 文件夾中的 Index.cshtml 視圖文件。下圖顯示了在視圖中硬編碼的字符串 "Hello from our View Template!" 。
如果瀏覽器窗體比較小（比如在手機(jī)設(shè)備上），可能需要切換（點(diǎn)擊）右上方的 Bootstrap navigation button才能看到 Home、 About、 Contact、 Register 和 Log in 這些鏈接。
改變視圖和布局頁
點(diǎn)擊菜單鏈接（MvcMovie、Home 和 About）。每個(gè)頁面都顯示相同的菜單布局。菜單布局在 Views/Shared/_Layout.cshtml 文件中實(shí)現(xiàn)。打開 Views/Shared/_Layout.cshtml 文件。
Layout 模板允許你在一處指定網(wǎng)站的 HTML 容器布局，然后在網(wǎng)站下的多個(gè)頁面中使用。找到 @RenderBody() 那行。 RenderBody 是一個(gè)占位符，是你所有指定視圖的顯示位置，“包裹在”布局頁內(nèi)。例如，點(diǎn)擊 About 鏈接， Views/Home/About.cshtml 視圖就會(huì)在 RenderBody 方法內(nèi)渲染。
改變標(biāo)題元素的內(nèi)容。在布局模板中將錨（即 A 標(biāo)簽，譯者注）文本改成“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> ? ?<!--手動(dòng)高亮--><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> ?<!--手動(dòng)高亮--></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>警告
我們尚未實(shí)現(xiàn) Movies 控制器，故若你點(diǎn)擊該鏈接，將會(huì)得到 404 錯(cuò)誤（文件未找到）。
保存，點(diǎn)擊 About 鏈接。注意每個(gè)頁面怎樣顯示 Mvc Movie 鏈接。只在布局模板中改變一次，網(wǎng)站中的所有頁面都顯示新的鏈接和新的標(biāo)題。
查看一下 Views/_ViewStart.cshtml 文件：
@{Layout = "_Layout"; }Views/_ViewStart.cshtml 文件將 Views/Shared/_Layout.cshtml 文件引入每個(gè)視圖中。可以利用 Layout 屬性設(shè)置不同的布局視圖，或者將其設(shè)置成 null 這樣就不會(huì)使用布局視圖了。
現(xiàn)在，讓我們改變 Index 視圖的標(biāo)題。
打開 Views/HelloWorld/Index.cshtml 。這里有2個(gè)地方需要改變：
出現(xiàn)在瀏覽器上的標(biāo)題文本
二級(jí)標(biāo)題 (<h2> 元素).
你可以一點(diǎn)點(diǎn)改，這樣就可以看到哪些代碼改變了應(yīng)用程序的哪些地方。
@{ViewData["Title"] = "Movie List"; ?//手動(dòng)高亮 }<h2>My Movie List</h2> ?<!--手動(dòng)高亮--><p>Hello from our View Template!</p>在以上代碼中 ViewData["Title"] = "Movie List"; 將 ViewDataDictionary 的 Title 屬性設(shè)置為 "Movie List"。Title 屬性被用在布局頁的 <title> Html元素中：
<title>@ViewData["Title"] - Movie App</title>保存并刷新頁面。注意瀏覽器標(biāo)題、主標(biāo)題和副標(biāo)題都變化了（如果你沒看到變化，可能因?yàn)榫彺娴木壒?#xff0c;在瀏覽器中按下 Ctrl+F5 強(qiáng)制刷新）。瀏覽器標(biāo)題由我們?cè)O(shè)置在 Index.cshtml 視圖模板中的 ViewData["Title"] 以及位于布局頁的 "- Movie App" 組合構(gòu)成。
同時(shí)注意，Index.cshtml 視圖模板的內(nèi)容是怎樣和 Views/Shared/_Layout.cshtml 視圖模板合并的，和一個(gè)HTML響應(yīng)是怎樣被發(fā)送到瀏覽器的。布局模板非常易于進(jìn)行作用于應(yīng)用程序中所有頁面的修改。了解更多請(qǐng)參考 : Layout。
不過，我們的這點(diǎn)“數(shù)據(jù)”（本例中的消息 "Hello from our View Template!"）還是硬編碼的。MVC 應(yīng)用程序里已經(jīng)有了個(gè)“V”（View），我們也已經(jīng)創(chuàng)建了一個(gè)“C”（Controller），但現(xiàn)在還沒有“M”（Model）。接下來我們將快速展示如何創(chuàng)建數(shù)據(jù)庫并從中搜索模型數(shù)據(jù)。
從控制器傳遞數(shù)據(jù)到視圖
在談到數(shù)據(jù)庫和模型之前，讓我們先討論從控制器傳遞信息到視圖。控制器類在響應(yīng)傳入的 URL 請(qǐng)求時(shí)被調(diào)用。控制器類是編寫代碼處理傳入的瀏覽器請(qǐng)求，從數(shù)據(jù)庫中檢索數(shù)據(jù)，并最終決定發(fā)送什么類型的響應(yīng)返回給瀏覽器的地方。然后可以在控制器中使用視圖模板生成和格式化 HTML 來響應(yīng)給瀏覽器。
控制器負(fù)責(zé)提供所需要的任何數(shù)據(jù)或者對(duì)象，以便視圖模板向?yàn)g覽器呈現(xiàn)響應(yīng)。最佳實(shí)踐：視圖模板不應(yīng)該執(zhí)行業(yè)務(wù)邏輯或者直接與數(shù)據(jù)庫進(jìn)行交互，而應(yīng)該只使用控制器提供給它的數(shù)據(jù)。保持這種 “關(guān)注點(diǎn)分離” 有助于保持你的代碼整潔，可測(cè)試以及更易于維護(hù)。
目前，HelloWorldController 類中的 Welcome 方法接受一個(gè) name 和一個(gè) ID 參數(shù)，然后直接將值輸出到瀏覽器。讓我們更改控制器來使用視圖模板，而不是讓控制器使用字符串呈現(xiàn)這個(gè)響應(yīng)。視圖模板將生成一個(gè)動(dòng)態(tài)響應(yīng)，這就意味著需要通過控制器傳遞恰當(dāng)?shù)臄?shù)據(jù)給視圖以生成響應(yīng)。要做到這一點(diǎn)，可以讓控制器將視圖模板所需的動(dòng)態(tài)數(shù)據(jù)（參數(shù)）放在視圖模版隨后可以訪問的 ViewData 字典中。
回到 HelloWorldController.cs 文件，在 Welcome 方法中添加一個(gè) Message 和 NumTimes 的值到 ViewData 字典中。 ViewData 字典是個(gè)動(dòng)態(tài)對(duì)象，這意味著可以把任何你想要的數(shù)據(jù)添加進(jìn)去。在你往里面添加?xùn)|西之前，ViewData 對(duì)象沒有已定義的屬性。MVC 模型綁定系統(tǒng)自動(dòng)映射地址欄中查詢字符串的命名參數(shù)（name 和 numTimes）到你的方法參數(shù)中。完整的 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 字典對(duì)象包含將要傳遞給視圖的數(shù)據(jù)。下一步，需要一個(gè) Welcome 的視圖模板。
右鍵點(diǎn)擊 Views/HelloWorld 文件夾，點(diǎn)擊 Add > New Item （添加 > 新建項(xiàng)）。
在 Add New Item - MvcMovie （添加新項(xiàng) - MvcMovie）對(duì)話框中
在右上角的搜索框中輸入關(guān)鍵詞 view
點(diǎn)擊 MVC View Page （MVC 視圖頁）
在 Name （名稱）框中，輸入 Welcome.cshtml
點(diǎn)擊 Add （添加）
在 Welcome.cshtml 視圖模板中創(chuàng)建一個(gè)循環(huán)來顯示 "Hello" NumTimes。用以下代碼完全替換 Views/HelloWorld/Welcome.cshtml 中的內(nèi)容：
@{ViewData["Title"] = "About"; }<h2>Welcome</h2><ul>@for (int i = 0; i < (int)ViewData["NumTimes"]; i++) ? ?{ ? ? ? ?<li>@ViewData["Message"]</li>}</ul>保存修改并打開瀏覽器，訪問這個(gè)地址：
http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4數(shù)據(jù)從 URL 中獲取并用模型綁定器將數(shù)據(jù)傳遞給控制器。控制器將數(shù)據(jù)封裝到 ViewData 字典中，并將對(duì)象傳遞到視圖里。然后，視圖將數(shù)據(jù)以 HTML 的形式渲染到瀏覽器中。
在上面的例子中，我們用 ViewData 字典將數(shù)據(jù)從控制器傳遞到視圖中。在后面的教程中，我們將使用視圖模型（View Model）將數(shù)據(jù)從控制器傳遞到視圖中。用視圖模型傳遞數(shù)據(jù)的方法通常比 ViewData 字典的方式更受歡迎。查看 Dynamic V Strongly Typed Views 了解更多信息。
好吧，這也算是一種 Model 中的“M”吧，但無論如何都不是數(shù)據(jù)庫模型。讓我們用學(xué)到的東西創(chuàng)建一個(gè)電影數(shù)據(jù)庫吧。
由于水平有限，錯(cuò)漏之處在所難免，歡迎大家批評(píng)指正，不勝感激，我們將及時(shí)修正。
dotNet Core Studying Group：436035237
相關(guān)文章：
ASP.NET Core 1.0 入門——了解一個(gè)空項(xiàng)目
ASP.NET Core 1.0 部署 HTTPS （.NET Framework 4.5.1）
.NET Core 1.0、ASP.NET Core 1.0和EF Core 1.0簡(jiǎn)介
云服務(wù)器下ASP.NET Core 1.0環(huán)境搭建（包含mono與coreclr）
使用VS Code開發(fā)ASP.NET Core 應(yīng)用程序
dotnet run是如何啟動(dòng)asp.net core站點(diǎn)的
ASP.NET Core提供模塊化Middleware組件
“dotnet restore"和"dotnet run"都做了些什么？
探秘 dotnet run 如何運(yùn)行 .NET Core 應(yīng)用程序
.NET Portability Analyzer 已開源
ASP.NET Core的配置（1）：讀取配置信息
ASP.NET Core的配置（2）：配置模型詳解
.NET Core 1.0 RC2 歷險(xiǎn)之旅
使用VS Code開發(fā) 調(diào)試.NET Core 應(yīng)用程序
讓我們Core在一起：ASP.NET Core & .NET Core
.NET Core VS Code 環(huán)境配置
官方博客明確了 .NET Core RC2/RTM 時(shí)間表
.NET Core全新的配置管理[共9篇]
利用記事本創(chuàng)建一個(gè)ASP.NET Core RC2 MVC應(yīng)用
微軟.NET 正式劈腿成功，橫跨所有平臺(tái)
.NET Core 1.0 CentOS7 嘗試
解讀發(fā)布：.NET Core RC2 and .NET Core SDK Preview 1
[.NET Core].NET Core R2安裝及示例教程
ASP.NET Core 開發(fā)-中間件(Middleware)
結(jié)合Jexus + Kestrel 部署 asp.net core 生產(chǎn)環(huán)境
通過Jexus 部署 dotnetcore版本MusicStore 示例程序
ASP.NET Core 中文文檔 第一章 入門
用 Visual Studio Code 在 macOS 上創(chuàng)建首個(gè) ASP.NET Core 應(yīng)用程序
用 Visual Studio 和 ASP.NET Core MVC 創(chuàng)建首個(gè) Web API
用 Visual Studio 發(fā)布一個(gè) Azure 云 Web 應(yīng)用程序
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社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺(tái)或掃描二維碼關(guān)注
總結(jié)
以上是生活随笔為你收集整理的第二章 指南（4.3）添加 View的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： asp.net core 使用 Redi
- 下一篇： dotnet core 开发体验之Rou