在本部分中,将修改 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. XAF中多对多关系 (XPO)

    In this lesson, you will learn how to set relationships between business objects. For this purpose, ...

  2. IOC控制反转、Unity简介

    参考博客地址: Unity系列文章,推荐:http://www.cnblogs.com/qqlin/archive/2012/10/16/2717964.html https://www.cnblog ...

  3. CSS3 新增选择器

    CSS3 新增选择器 结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 ...

  4. 3.智能快递柜(通信篇-HTTP)

    1.智能快递柜(开篇) 2.智能快递柜(终端篇) 3.智能快递柜(通信篇-HTTP) 4.智能快递柜(通信篇-SOCKET) 5.智能快递柜(通信篇-Server程序) 6.智能快递柜(平台篇) 7. ...

  5. ucoreOS_lab7 实验报告

    所有的实验报告将会在 Github 同步更新,更多内容请移步至Github:https://github.com/AngelKitty/review_the_national_post-graduat ...

  6. ucoreOS_lab5 实验报告

    所有的实验报告将会在 Github 同步更新,更多内容请移步至Github:https://github.com/AngelKitty/review_the_national_post-graduat ...

  7. 【JavaWeb】Ajax基础

    Ajax介绍 Asynchronous JavaScript And XML(异步的JavaScript和XML): Ajax可以在不刷新页面的前提下,进行页面局部更新: Ajax不是新的技术,Aja ...

  8. 原生js利用data选择元素

    //js var a = document.querySelector('[data-word=a]') console.log(a) html <dl class="find-car ...

  9. Matplotlib基础 可视化绘图 学习笔记

    简单的绘图 1.确定画布并画线 import matplotlib.pyplot as plt #静态绘图 fig = plt.figure() ax = fig.add_subplot(345) # ...

  10. layui增删改查

    dao方法 package com.dao; import java.sql.SQLException; import java.util.List; import java.util.Map; im ...