ASP.NET Core 中文文档 第二章 指南（4.3）添加 View

原文：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 （视图）文件夹，选择 Add > New Folder （添加 > 新建文件夹），然后将文件夹命名为 HelloWorld.

用以下代码替换 Razor 视图文件 Views/HelloWorld/Index.cshtml :

@{ ViewData["Title"] = "Index"; } <h2>Index</h2> <p>Hello from our View Template!</p>

导航到 :xxxx/HelloWorld。HelloWorldController 的 Index 方法只干一件事——运行 return View(); 语句来引导控制器方法使用指定的视图模板文件，为浏览器渲染最终的响应结果。 因为没有明确指定所使用视图模板的文件名，MVC 默认使用 /Views/HelloWorld 文件夹中的 Index.cshtml 视图文件。下图显示了在视图中硬编码的字符串 "Hello from our View Template!" 。

如果浏览器窗体比较小（比如在手机设备上），可能需要切换（点击）右上方的 才能看到 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 ，如下列高亮显示的：

@ViewData["Title"] - Movie AppToggle navigationMvc MovieHomeAboutContact</a></li> </ul> @await Html.PartialAsync("_LoginPartial") @RenderBody() 2016 - MvcMovie@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"; //手动高亮 } 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）。接下来我们将快速展示如何创建数据库并从中搜索模型数据。

从控制器传递数据到视图