.NET Core - MVC 应用添加视图
视图模板是使用 Razor 创建的。 基于 Razor 的视图模板：
-
- 具有
.cshtml文件扩展名。 - 提供一种巧妙的方法来使用 C# 创建 HTML 输出。
- 具有
当前，Index 方法返回一个字符串，其中包含控制器类中的消息。
在 HelloWorldController 类中，将 Index 方法替换为以下代码：
public IActionResult Index()
{
return View();
}
代码：
-
- 调用该控制器的 View 方法。
- 使用视图模板生成 HTML 响应。
控制器方法：
-
- 称为“操作方法”。 例如，上述代码中的
Index操作方法。 - 通常返回 IActionResult 或从 ActionResult 派生的类，而不是
string这样的类型。
- 称为“操作方法”。 例如，上述代码中的
1. 添加视图
①. 右键Views => 添加 => 新建文件夹，命名为 “HelloWorld”
②. 右键“Views/HelloWorld” => 添加 => 新建项 => Razor 视图 - 空 => 名称设定为 “Index.cshtml” => 添加
③. 将新建Razor视图文件的内容替换为:
@{
ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
④. 运行(Ctrl+F5)并访问地址 : https://localhost:5001/HelloWorld
-
-
HelloWorldController中的Index方法运行return View();语句，指定此方法应使用视图模板文件来呈现对浏览器的响应。 -
由于未指定视图模板文件名称，因此 MVC 默认使用默认视图文件。 如果未指定视图文件名称，则返回默认视图。 默认视图与操作方法的名称相同，在本例中为
Index。 使用视图模板/Views/HelloWorld/Index.cshtml。
-
3. 更改视图和页面布局
选择菜单链接“MvcMovie”、“Home”和“Privacy”。 每页显示相同的菜单布局。
菜单布局在 Views/Shared/_Layout.cshtml 文件中实现。
布局模板允许：
-
- 在一个位置指定站点的 HTML 容器布局。
- 在该站点的多个页面上应用 HTML 容器布局。
打开 Views/Shared/_Layout.cshtml 文件:
查找 @RenderBody() 行。 RenderBody 是显示创建的所有特定于视图的页面的占位符，已包装在布局页面中。
例 ： 如果选择 Privacy 链接，Views/Home/Privacy.cshtml 视图将在 RenderBody 方法中呈现。
4. 更改布局文件中的标题/页脚和菜单链接
布局文件 ：Views/Shared/_Layout.cshtml
标题 ：修改代码部分为 ：
<head>
...省略代码处...
<title>@ViewData["Title"] - Movie App</title>
...省略代码处...
</head>
页脚 ：修改代码为 ：
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
菜单链接 ：修改代码为 ：
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
...省略代码处...
</div>
</nav>
</header>
...省略代码处...
</body>
说明 ：菜单链接中的Movies控制器尚未实现，此时 "Movie App"链接不起作用。
保存，并访问地址 https://localhost:5001/
结果 ：标题显示 Movie App 而不是 MvcMovie
页脚 显示 Movie App 而不是 MvcMovie
链接名称 显示 Movie App 而不是 MvcMovie
标题和定位点文本显示“Movie App”。 在布局模板中进行了一次更改，网站上的所有页面都反映新的链接文本和新标题。
检查 Views/_ViewStart.cshtml 文件：
文件将 Views/Shared/_Layout.cshtml 文件引入到每个视图中。
可以使用 Layout 属性设置不同的布局视图，或将它设置为 null，这样将不会使用任何布局文件。
打开 Views/HelloWorld/Index.cshtml 视图文件：
更改标题和 <h2> 元素，如下：
@{
ViewData["Title"] = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
保存，运行并访问地址 ： https://localhost:5001/HelloWorld
注意：浏览器标题/主标题/二级标题发生了改变。
5. 将数据从控制器传递给视图
控制器负责提供所需的数据，使视图模板能够呈现响应
视图模板不应：
-
- 执行业务逻辑
- 直接与数据库交互。
视图模板应仅使用由控制器提供给它的数据。 保持此“分离关注点”有助于保持代码：
-
- 干净。
- 可测试。
- 可维护。
目前，HelloWorldController 类中的 Welcome 方法采用 name 和 ID 参数，然后将值直接输出到浏览器。
应将控制器更改为使用视图模板，而不是使控制器将此响应呈现为字符串。
视图模板会生成动态响应，这意味着必须将适当的数据从控制器传递给视图以生成响应
为此，可以让控制器将视图模板所需的动态数据（参数）放置在 ViewData 字典中。
然后，视图模板可以访问动态数据。
在 HelloWorldController.cs 中，更改 Welcome 方法以将 Message 和 NumTimes 值添加到 ViewData 字典。
在 HelloWorldController.cs 中，更改 Welcome 方法以将 Message 和 NumTimes 值添加到 ViewData 字典。
在添加某些内容之前，ViewData 对象没有已定义的属性。
MVC模型绑定系统自动将命名参数 name 和 numTimes 从查询字符串映射到方法中的参数。
修改控制器HelloWorldController中的Welcome方法为：
public IActionResult Welcome(string name, int numTimes = 1)
{
ViewData["Message"] = "Hello " + name;
ViewData["NumTimes"] = numTimes;
return View();
}
ViewData ：字典对象包含将传递给视图的数据。
新建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>
保存并访问地址：https://localhost:5001/HelloWorld/Welcome?name=Rick&numtimes=4。
结果：视图将数据作为 HTML 呈现给浏览器。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律