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常用命令整理