ASP.NET Core 中文文档 第二章 指南（4.3）添加 View
原文：Adding a view
作者：Rick Anderson
翻譯：魏美娟(初見)
校對：趙亮(悲夢)、高嵩(Jack)、婁宇(Lyrics)、許登洋(Seay)、姚阿勇（Dr.Yao）
本節(jié)將修改 HelloWorldController 類，把使用 Razor 視圖模板文件為客戶端生成 HTML 響應(yīng)的過程干凈利落地封裝起來。
您可以使用 Razor 視圖引擎創(chuàng)建一個視圖模板。基于 Razor 的視圖模板的文件使用 .cshtml 作為其擴展名，并用 C# 優(yōu)雅地輸出 HTML。用 Razor 編寫視圖模板能減少字符的個數(shù)和敲擊鍵盤的次數(shù)，并使工作流程快速靈活。
目前，控制器類中的 Index 方法返回的是一串硬編碼的字符串。按下面的代碼所示，修改 Index 方法使其返回視圖對象：
public IActionResult Index() {return View(); }上例中 Index 方法用一個視圖模板生成 HTML 響應(yīng)給瀏覽器。控制器方法（也稱為 action 方法)，比如上面的 Index 方法，通常返回 IActionResult （或者派生自 ActionResult 的類），而不是字符串那樣的基元類型。
- 右擊 Views （視圖）文件夾，選擇 Add > New Folder （添加 > 新建文件夾），然后將文件夾命名為 HelloWorld.
右鍵點擊 Views/HelloWorld （視圖/Helloworld）文件夾，選擇 Add > New Item (添加->新建項)
在 Add New Item - MvcMovie （添加新建項 - MvcMovie）對話框中：
在右上方的搜索框中輸入關(guān)鍵詞 view
點擊 MVC View Page （MVC 視圖頁）
在 Name （名稱）框中, 保持默認(rèn)的 Index.cshtml
點擊 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 方法只干一件事——運行 return View(); 語句來引導(dǎo)控制器方法使用指定的視圖模板文件，為瀏覽器渲染最終的響應(yīng)結(jié)果。 因為沒有明確指定所使用視圖模板的文件名，MVC 默認(rèn)使用 /Views/HelloWorld 文件夾中的 Index.cshtml 視圖文件。下圖顯示了在視圖中硬編碼的字符串 "Hello from our View Template!" 。
如果瀏覽器窗體比較小（比如在手機設(shè)備上），可能需要切換（點擊）右上方的 Bootstrap navigation button才能看到 Home、 About、 Contact、 Register 和 Log in 這些鏈接。
改變視圖和布局頁
點擊菜單鏈接（MvcMovie、Home 和 About）。每個頁面都顯示相同的菜單布局。菜單布局在 Views/Shared/_Layout.cshtml 文件中實現(xiàn)。打開 Views/Shared/_Layout.cshtml 文件。
Layout 模板允許你在一處指定網(wǎng)站的 HTML 容器布局，然后在網(wǎng)站下的多個頁面中使用。找到 @RenderBody() 那行。 RenderBody 是一個占位符，是你所有指定視圖的顯示位置，“包裹在”布局頁內(nèi)。例如，點擊 About 鏈接， Views/Home/About.cshtml 視圖就會在 RenderBody 方法內(nèi)渲染。
改變標(biāo)題元素的內(nèi)容。在布局模板中將錨（即 A 標(biāo)簽，譯者注）文本改成“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>警告
我們尚未實現(xiàn) Movies 控制器，故若你點擊該鏈接，將會得到 404 錯誤（文件未找到）。
保存，點擊 About 鏈接。注意每個頁面怎樣顯示 Mvc Movie 鏈接。只在布局模板中改變一次，網(wǎng)站中的所有頁面都顯示新的鏈接和新的標(biāo)題。
查看一下 Views/_ViewStart.cshtml 文件：
@{Layout = "_Layout"; }Views/_ViewStart.cshtml 文件將 Views/Shared/_Layout.cshtml 文件引入每個視圖中。可以利用 Layout 屬性設(shè)置不同的布局視圖，或者將其設(shè)置成 null 這樣就不會使用布局視圖了。
現(xiàn)在，讓我們改變 Index 視圖的標(biāo)題。
打開 Views/HelloWorld/Index.cshtml 。這里有2個地方需要改變：
- 出現(xiàn)在瀏覽器上的標(biāo)題文本
- 二級標(biāo)題 (<h2> 元素).
你可以一點點改，這樣就可以看到哪些代碼改變了應(yīng)用程序的哪些地方。
@{ViewData["Title"] = "Movie List"; //手動高亮 }<h2>My Movie List</h2> <!--手動高亮--><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)題都變化了（如果你沒看到變化，可能因為緩存的緣故，在瀏覽器中按下 Ctrl+F5 強制刷新）。瀏覽器標(biāo)題由我們設(shè)置在 Index.cshtml 視圖模板中的 ViewData["Title"] 以及位于布局頁的 "- Movie App" 組合構(gòu)成。
同時注意，Index.cshtml 視圖模板的內(nèi)容是怎樣和 Views/Shared/_Layout.cshtml 視圖模板合并的，和一個HTML響應(yīng)是怎樣被發(fā)送到瀏覽器的。布局模板非常易于進行作用于應(yīng)用程序中所有頁面的修改。了解更多請參考 : Layout。
不過，我們的這點“數(shù)據(jù)”（本例中的消息 "Hello from our View Template!"）還是硬編碼的。MVC 應(yīng)用程序里已經(jīng)有了個“V”（View），我們也已經(jīng)創(chuàng)建了一個“C”（Controller），但現(xiàn)在還沒有“M”（Model）。接下來我們將快速展示如何創(chuàng)建數(shù)據(jù)庫并從中搜索模型數(shù)據(jù)。
從控制器傳遞數(shù)據(jù)到視圖
在談到數(shù)據(jù)庫和模型之前，讓我們先討論從控制器傳遞信息到視圖。控制器類在響應(yīng)傳入的 URL 請求時被調(diào)用。控制器類是編寫代碼處理傳入的瀏覽器請求，從數(shù)據(jù)庫中檢索數(shù)據(jù)，并最終決定發(fā)送什么類型的響應(yīng)返回給瀏覽器的地方。然后可以在控制器中使用視圖模板生成和格式化 HTML 來響應(yīng)給瀏覽器。
控制器負(fù)責(zé)提供所需要的任何數(shù)據(jù)或者對象，以便視圖模板向瀏覽器呈現(xiàn)響應(yīng)。最佳實踐：視圖模板不應(yīng)該執(zhí)行業(yè)務(wù)邏輯或者直接與數(shù)據(jù)庫進行交互，而應(yīng)該只使用控制器提供給它的數(shù)據(jù)。保持這種 “關(guān)注點分離” 有助于保持你的代碼整潔，可測試以及更易于維護。
目前，HelloWorldController 類中的 Welcome 方法接受一個 name 和一個 ID 參數(shù)，然后直接將值輸出到瀏覽器。讓我們更改控制器來使用視圖模板，而不是讓控制器使用字符串呈現(xiàn)這個響應(yīng)。視圖模板將生成一個動態(tài)響應(yīng)，這就意味著需要通過控制器傳遞恰當(dāng)?shù)臄?shù)據(jù)給視圖以生成響應(yīng)。要做到這一點，可以讓控制器將視圖模板所需的動態(tài)數(shù)據(jù)（參數(shù)）放在視圖模版隨后可以訪問的 ViewData 字典中。
回到 HelloWorldController.cs 文件，在 Welcome 方法中添加一個 Message 和 NumTimes 的值到 ViewData 字典中。 ViewData 字典是個動態(tài)對象，這意味著可以把任何你想要的數(shù)據(jù)添加進去。在你往里面添加?xùn)|西之前，ViewData 對象沒有已定義的屬性。MVC 模型綁定系統(tǒ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 字典對象包含將要傳遞給視圖的數(shù)據(jù)。下一步，需要一個 Welcome 的視圖模板。
右鍵點擊 Views/HelloWorld 文件夾，點擊 Add > New Item （添加 > 新建項）。
在 Add New Item - MvcMovie （添加新項 - MvcMovie）對話框中
在右上角的搜索框中輸入關(guān)鍵詞 view
點擊 MVC View Page （MVC 視圖頁）
在 Name （名稱）框中，輸入 Welcome.cshtml
點擊 Add （添加）
在 Welcome.cshtml 視圖模板中創(chuàng)建一個循環(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>保存修改并打開瀏覽器，訪問這個地址：
http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4數(shù)據(jù)從 URL 中獲取并用模型綁定器將數(shù)據(jù)傳遞給控制器。控制器將數(shù)據(jù)封裝到 ViewData 字典中，并將對象傳遞到視圖里。然后，視圖將數(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)建一個電影數(shù)據(jù)庫吧。
返回目錄
轉(zhuǎn)載于:https://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-2_4_3-adding-view.html
總結(jié)
以上是生活随笔為你收集整理的ASP.NET Core 中文文档 第二章 指南（4.3）添加 View的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ORACLE 导空表结构
- 下一篇： git常用命令整理