免費AI編程助手
將視圖添加到 ASP.NET Core MVC 應用
在本部分中，將修改 HelloWorldController 類，進而使用 Razor 視圖文件來順利封裝為客戶端生成 HTML 響應的過程。
使用 Razor 創(chuàng)建視圖模板文件。 基于 Razor 的模板具有“.cshtml”文件擴展名。 它們提供了一種巧妙的方法來使用 C# 創(chuàng)建 HTML 輸出。
當前，Index 方法返回帶有在控制器類中硬編碼的消息的字符串。 在 HelloWorldController 類中，將 Index 方法替換為以下代碼：
C#
public IActionResult Index()
{
return View();
}
上面的代碼調(diào)用控制器的 View 方法。 它使用視圖模板來生成 HTML 響應。 控制器方法（亦稱為“操作方法”，如上面的 Index 方法）通常返回 IActionResult（或派生自 ActionResult 的類），而不是 string 等類型。
添加視圖
右鍵單擊“視圖”文件夾，然后單擊“添加”>“新文件夾”，并將文件夾命名為“HelloWorld”。
右鍵單擊“Views/HelloWorld”文件夾，然后單擊“添加”>“新項”。
在“添加新項 - MvcMovie”對話框中
在右上角的搜索框中，輸入“視圖”
選擇“Razor 視圖”
保持“名稱”框的值：Index.cshtml。
選擇“添加”
使用以下內(nèi)容替換 Razor 視圖文件 Views/HelloWorld/Index.cshtml 的內(nèi)容：
HTML
@{
ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
導航到 https://localhost:xxxx/HelloWorld。 HelloWorldController 中的 Index 方法作用不大；它運行 return View(); 語句，指定此方法應使用視圖模板文件來呈現(xiàn)對瀏覽器的響應。 因為沒有顯式指定視圖模板文件的名稱，所以 MVC 默認使用 /Views/HelloWorld 文件夾中的 Index.cshtml 視圖文件。 下面圖片顯示了視圖中硬編碼的 字符串“Hello from our View Template!”
更改視圖和布局頁面
選擇菜單鏈接（“MvcMovie”、“首頁”和“隱私”）。 每頁顯示相同的菜單布局。 菜單布局是在 Views/Shared/_Layout.cshtml 文件中實現(xiàn)的。 打開 Views/Shared/_Layout.cshtml 文件。
布局模板使你能夠在一個位置指定網(wǎng)站的 HTML 容器布局，然后將它應用到網(wǎng)站中的多個頁面。 查找 @RenderBody() 行。 RenderBody 是顯示創(chuàng)建的所有特定于視圖的頁面的占位符，已包裝在布局頁面中。 例如，如果選擇“隱私”鏈接，Views/Home/Privacy.cshtml 視圖將在 RenderBody 方法中呈現(xiàn)。
更改布局文件中的標題、頁腳和菜單鏈接
- 在標題和頁腳元素中，將 MvcMovie 更改為 Movie App。
- 將定位點元素 <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a>更改為 <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>。
下列標記顯示了突出顯示的更改：
HTML
<!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 include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" rel="external nofollow" target="_blank"
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"
crossorigin="anonymous"
integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
</environment>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<partial name="_CookieConsentPartial" />
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" rel="external nofollow"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js" rel="external nofollow"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
</script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
在前面的標記中，省略了 asp-area 定位點標記幫助程序?qū)傩?/a>，因為此應用未使用區(qū)域。
說明：Movies 控制器尚未實現(xiàn)。 此時，Movie App 鏈接不起作用。
保存更改并選擇“隱私”鏈接。 請注意瀏覽器選項卡上的標題現(xiàn)在顯示的是“隱私策略 - 電影應用”，而不是“隱私策略 - Mvc 電影”：
選擇“主頁”鏈接，請注意，標題和定位文本還會顯示“電影應用”。 我們能夠在布局模板中進行一次更改，讓網(wǎng)站上的所有頁面都反映新的鏈接文本和新標題。
檢查 Views/_ViewStart.cshtml 文件：
HTML
@{
Layout = "_Layout";
}
Views/_ViewStart.cshtml 文件將 Views/Shared/_Layout.cshtml 文件引入到每個視圖中。 可以使用 Layout 屬性設置不同的布局視圖，或?qū)⑺O置為 null，這樣將不會使用任何布局文件。
更改 Views/HelloWorld/Index.cshtml 視圖文件的 <h2> 元素：
HTML
@{
ViewData["Title"] = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
稍稍對標題和 <h2> 元素進行一些更改，這樣可以看出哪一段代碼更改了顯示。
上述代碼中的 ViewData["Title"] = "Movie List"; 將 ViewData 字典的 Title 屬性設置為“Movie List”。 Title 屬性在布局頁面中的 <title> HTML 元素中使用：
HTML
<title>@ViewData["Title"] - Movie App</title>
保存更改并導航到 https://localhost:xxxx/HelloWorld。 請注意，瀏覽器標題、主標題和輔助標題已更改。 （如果沒有在瀏覽器中看到更改，則可能正在查看緩存的內(nèi)容。 在瀏覽器中按 Ctrl + F5 強制加載來自服務器的響應。）瀏覽器標題是使用我們在 Index.cshtml 視圖模板中設置的 ViewData["Title"] 以及在布局文件中添加的額外“ - Movie App”創(chuàng)建的。
還要注意，Index.cshtml 視圖模板中的內(nèi)容是如何與 Views/Shared/_Layout.cshtml 視圖模板合并的，并且注意單個 HTML 響應被發(fā)送到了瀏覽器。 憑借布局模板可以很容易地對應用程序中所有頁面進行更改。 若要了解更多信息，請參閱布局。
但我們這一點點“數(shù)據(jù)”（在此示例中為“Hello from our View Template!” 消息）是硬編碼的。 MVC 應用程序有一個“V”（視圖），而你已有一個“C”（控制器），但還沒有“M”（模型）。
將數(shù)據(jù)從控制器傳遞給視圖
控制器操作會被調(diào)用以響應傳入的 URL 請求。 控制器類是編寫處理傳入瀏覽器請求的代碼的地方?？刂破鲝臄?shù)據(jù)源檢索數(shù)據(jù)，并決定將哪些類型的響應發(fā)送回瀏覽器。 可以從控制器使用視圖模板來生成并格式化對瀏覽器的 HTML 響應。
控制器負責提供所需的數(shù)據(jù)，使視圖模板能夠呈現(xiàn)響應。 最佳做法：視圖模板不應該直接執(zhí)行業(yè)務邏輯或與數(shù)據(jù)庫進行交互。 相反，視圖模板應僅使用由控制器提供給它的數(shù)據(jù)。 保持此“分離關注點”有助于保持代碼干凈以及可測試性和可維護性。
目前，HelloWorldController 類中的 Welcome 方法采用 name 和 ID 參數(shù)，然后將值直接輸出到瀏覽器。 應將控制器更改為使用視圖模板，而不是使控制器將此響應呈現(xiàn)為字符串。 視圖模板會生成動態(tài)響應，這意味著必須將適當?shù)臄?shù)據(jù)位從控制器傳遞給視圖以生成響應。 為此，可以讓控制器將視圖模板所需的動態(tài)數(shù)據(jù)（參數(shù)）放置在視圖模板稍后可以訪問的 ViewData 字典中。
在 HelloWorldController.cs 中，更改 Welcome 方法以將 Message 和 NumTimes 值添加到 ViewData字典。 ViewData 字典是一個動態(tài)對象，這意味著可以使用任何類型；只有將內(nèi)容放在其中后 ViewData 對象才具有定義的屬性。 MVC 模型綁定系統(tǒng)自動將命名參數(shù)（name 和 numTimes）從地址欄中的查詢字符串映射到方法中的參數(shù)。 完整的 HelloWorldController.cs 文件如下所示：
C#
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ù)。
創(chuàng)建一個名為 Views/HelloWorld/Welcome.cshtml 的 Welcome 視圖模板。
在 Welcome.cshtml 視圖模板中創(chuàng)建一個循環(huán)，顯示“Hello” NumTimes。 使用以下內(nèi)容替換 Views/HelloWorld/Welcome.cshtml 的內(nèi)容：
HTML
@{
ViewData["Title"] = "Welcome";
}
<h2>Welcome</h2>
<ul>
@for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
{
<li>@ViewData["Message"]</li>
}
</ul>
保存更改并瀏覽到以下 URL：
https://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4
數(shù)據(jù)取自 URL，并傳遞給使用 MVC 模型綁定器的控制器。 控制器將數(shù)據(jù)打包到 ViewData 字典中，并將該對象傳遞給視圖。 然后，視圖將數(shù)據(jù)作為 HTML 呈現(xiàn)給瀏覽器。
在上面的示例中，我們使用 ViewData 字典將數(shù)據(jù)從控制器傳遞給視圖。 稍后在本教程中，我們將使用視圖模型將數(shù)據(jù)從控制器傳遞給視圖。 傳遞數(shù)據(jù)的視圖模型方法通常比 ViewData 字典方法更為優(yōu)先。 有關詳細信息，請參閱何時使用 ViewBag、ViewData 或 TempData。
更多建議：