標籤：form tutorial bar source 技術 script .net 強制 工作
原文：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/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”吧，但無論如何都不是資料庫模型。讓我們用學到的東西建立一個電影資料庫吧。
返回目錄
參考頁面：
http://www.yuanjiaocheng.net/ASPNET-CORE/core-view-start.html
http://www.yuanjiaocheng.net/ASPNET-CORE/core-import-view.html
http://www.yuanjiaocheng.net/ASPNET-CORE/core-razor-taghelpers.html
http://www.yuanjiaocheng.net/ASPNET-CORE/core-edit-form.html
http://www.yuanjiaocheng.net/ASPNET-CORE/core-identity.html
ASP.NET Core 中文文檔 第二章 指南（4.3）添加 View
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
