在本部分中,将修改 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 字典将数据从控制器传递给视图。

2.将视图添加到 ASP.NET Core MVC 应用的更多相关文章

  1. 3.将模型添加到 ASP.NET Core MVC 应用

    添加数据模型类 右键单击 Models 文件夹,然后单击“添加” > “类”. 将类命名“Movie”.向 Movie 类添加以下属性: using System;using System.Co ...

  2. 1.将控制器添加到 ASP.NET Core MVC 应用

    模型-视图-控制器 (MVC) 体系结构模式将应用分成 3 个主要组件:模型 (M).视图 (V) 和控制器 (C). 模型(M):表示应用数据的类. 模型类使用验证逻辑来对该数据强制实施业务规则. ...

  3. ASP.NET Core MVC 之视图组件(View Component)

    1.视图组件介绍 视图组件是 ASP.NET Core MVC 的新特性,类似于局部视图,但它更强大.视图组件不使用模型绑定,并且仅依赖于调用它时所提供的数据. 视图组件特点: 呈块状,而不是整个响应 ...

  4. 从零开始实现ASP.NET Core MVC的插件式开发(八) - Razor视图相关问题及解决方案

    标题:从零开始实现ASP.NET Core MVC的插件式开发(八) - Razor视图相关问题及解决方案 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun ...

  5. 从零开始实现ASP.NET Core MVC的插件式开发(九) - 升级.NET 5及启用预编译视图

    标题:从零开始实现ASP.NET Core MVC的插件式开发(九) - 如何启用预编译视图 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/1399 ...

  6. ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...

  7. ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

  8. ASP.NET Core 入门笔记8,ASP.NET Core MVC 分部视图入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...

  9. ASP.NET Core 入门笔记7,ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

随机推荐

  1. Oracle:Redhat 7.4+Oracle Rac 11.2.0.4 执行root.sh报错处理

    一.报错信息 二.原因分析 因为RHEL 7使用systemd而不是initd运行进程和重启进程,而root.sh通过传统的initd运行ohasd进程 三.解决办法 在RHEL 7中ohasd需要被 ...

  2. 做一个vue轮播图组件

    根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...

  3. Xcode 7.3 解决自定义类无法自动联想

    正在苦拼的码友们,最近是不是觉得在写代码的时候很是头疼,甚至连个最基本的系统自带的语法啊.单词啊等等都不能联想了,之前习惯了的码友们,这个时候肯定会觉得是不是自己写错了,然后也往下翻了一大篇,还是找不 ...

  4. Python—端口检测(socket)

    基于python检测端口是否在使用 原理:创建一个socket服务,连接对应的 ip:port ,如果能够连接,说明端口被占用:若端口可用,则不可连接. #!/usr/bin/evn python # ...

  5. 6.1 Spark SQL

    一.从shark到Spark SQL Hive能够把SQL程序转换成map-reduce程序   可以把Hadoop中的Hive看作是一个接口,主要起到了转换的功能,并没有实际存储数据. Shark即 ...

  6. 【tyvj1858】xlkxc(拉格朗日插值)

    传送门 题意: 求\(\sum_{i=0}^n\sum_{j=1}^{a+id}\sum_{k=1}^{j}k^K,n,a,d\leq 10^9,K\leq 100\). 思路: 最右边这个和式为一个 ...

  7. Oracle SQL日期及日期格式获取命令

    日期及日期格式: 获取系统日期: sysdate() 格式化日期 to_char(sysdate(),'yyyy-mm-dd,hh24:mi:ss') to_date(sysdate(),'yyyy- ...

  8. jmeter BeanShell的几种使用方式

    jmeter的BeanShell Sampler,可以直接引用java代码,有下面3种方式: 1.直接输入java代码:2.导入java文件:3.导入class文件 BeanShell脚本访问变量主要 ...

  9. 3.git 远程

    首次拉取代码的话.可以使用 git clone 这个指令 git clone https://github.com/guohongze/adminset.git 带密码方式 git clone htt ...

  10. pandas分组统计:groupby,melt,pivot_table,crosstab的用法

    groupby: 分组 melt: 宽表转长表 pivot_table: 长表转宽表,数据透视表 crosstab: 交叉表 / 列联表,主要用于分组频数统计 import numpy as np i ...