2.將視圖添加到 ASP.NET Core MVC 應用

在本部分中，將修改 HelloWorldController 類，進而使用 Razor 視圖文件來順利封裝爲客戶端生成 HTML 響應的過程。

當前，Index 方法返回帶有在控制器類中硬編碼的消息的字符串。 在 HelloWorldController 類中，將 Index 方法替換爲如下代碼：

 

public IActionResult Index()
{
return View();
}

 

 

上面的代碼調用控制器的 View 方法。 它使用視圖模板來生成 HTML 響應。 控制器方法（亦稱爲「操做方法」，如上面的 Index 方法）
一般返回 IActionResult（或派生自 ActionResult 的類），而不是 string 等類型。

 

 

添加視圖

右鍵單擊「視圖」文件夾，而後單擊「添加」>「新文件夾」，並將文件夾命名爲「HelloWorld」。
右鍵單擊「Views/HelloWorld」文件夾，而後單擊「添加」>「新項」。
在「添加新項 - MvcMovie」對話框中
在右上角的搜索框中，輸入「視圖」
選擇「Razor 視圖」
保持「名稱」框的值：Index.cshtml。
選擇「添加」

 

使用如下內容替換 Razor 視圖文件 Views/HelloWorld/Index.cshtml 的內容：

@{
ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

 

 

導航到 https://localhost:xxxx/HelloWorld。 HelloWorldController 中的 Index 方法做用不大；它運行 return View();
語句，指定此方法應使用視圖模板文件來呈現對瀏覽器的響應。 由於沒有顯式指定視圖模板文件的名稱，因此 MVC 默認使用
/Views/HelloWorld 文件夾中的 Index.cshtml 視圖文件。 下面圖片顯示了視圖中硬編碼的 字符串「Hello from our View Template!」

更改視圖和佈局頁面

選擇菜單連接（「MvcMovie」、「首頁」和「隱私」）。 每頁顯示相同的菜單佈局。 菜單佈局是在 Views/Shared/_Layout.cshtml 文件中實現的。
打開 Views/Shared/_Layout.cshtml 文件。
佈局模板使你可以在一個位置指定網站的 HTML 容器佈局，而後將它應用到網站中的多個頁面。 查找 @RenderBody() 行。
RenderBody 是顯示建立的全部特定於視圖的頁面的佔位符，已包裝在佈局頁面中。 例如，若是選擇「隱私」連接
，Views/Home/Privacy.cshtml 視圖將在 RenderBody 方法中呈現。

更改佈局文件中的標題、頁腳和菜單連接
在標題和頁腳元素中，將 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>

在前面的標記中，省略了 asp-area 定位點標記幫助程序屬性，由於此應用未使用區域。
說明：Movies 控制器還沒有實現。 此時，Movie App 連接不起做用。

 

完整的 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();
}
}
}

 

 

建立一個名爲 Views/HelloWorld/Welcome.cshtml 的 Welcome 視圖模板。
使用如下內容替換 Views/HelloWorld/Welcome.cshtml 的內容：

 

@{
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

 

數據取自 URL，並傳遞給使用 MVC 模型綁定器的控制器。 控制器將數據打包到 ViewData 字典中，並將該對象傳遞給視圖。 而後，視圖將數據做爲 HTML 呈現給瀏覽器。在上面的示例中，咱們使用 ViewData 字典將數據從控制器傳遞給視圖。