当前位置: 首页 > news >正文

ASP.NET Core MVC -- 将视图添加到 ASP.NET Core MVC 应用

Index页

右键单击“视图”文件夹,然后单击“添加”>>“新文件夹”,并将文件夹命名为“HelloWorld”。

右键单击“Views/HelloWorld”文件夹,然后单击“添加”>“新项”。

在“添加新项 - MvcMovie”对话框中:

  • 在右上角的搜索框中,输入“视图”
  • 选择“Razor 视图 - 空”
  • 保持“名称”框的值:Index.cshtml
  • 选择“添加”

“添加新项”对话框

 将 Views/HelloWorld/Index.cshtmlRazor 视图文件的内容替换为以下内容:

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

导航到 https://localhost:{PORT}/HelloWorld

  • HelloWorldController 中的 Index 方法运行 return View(); 语句,指定此方法应使用视图模板文件来呈现对浏览器的响应。

  • 由于未指定视图模板文件名称,因此 MVC 默认使用默认视图文件。 如果未指定视图文件名称,则返回默认视图。 默认视图与操作方法的名称相同,在本例中为 Index。 使用视图模板 /Views/HelloWorld/Index.cshtml

  • 下图显示了视图中硬编码的字符串“Hello from our View Template!”:

浏览器窗口

 将数据从控制器传递给视图

在 HelloWorldController.cs 中,更改 Welcome 方法以将 Message 和 NumTimes 值添加到 ViewData 字典。

ViewData 字典是动态对象,这意味着任何类型都可以使用。 在添加某些内容之前,ViewData 对象没有已定义的属性。 MVC 模型绑定系统自动将命名参数 name 和 numTimes 从查询字符串映射到方法中的参数。 完整的 HelloWorldController

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

ViewData 字典对象包含将传递给视图的数据。

创建一个名为 Views/HelloWorld/Welcome.cshtml 的 Welcome 视图模板。

在 Welcome.cshtml 视图模板中创建一个循环,显示“Hello”NumTimes。 将 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:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

数据取自 URL,并传递给使用 MVC 模型绑定器的控制器。 控制器将数据打包到 ViewData 字典中,并将该对象传递给视图。 然后,视图将数据作为 HTML 呈现给浏览器。

Privacy 视图,显示了 Welcome 标签以及四个“Hello Rick”短语

 

http://www.lryc.cn/news/118373.html

相关文章:

  • 基于R做宏基因组结果的PCoA分析
  • 8.10 算法刷题【1道题】
  • Apache Maven:从构建到部署,一站式解决方案
  • 文章四:版本控制策略 - 穿越时光机:Git版本控制进阶技巧
  • 爬虫如何应对网站的反爬机制?如何查找user-agent对应的值
  • 一个概率论例题引发的思考
  • 司徒理财:8.11黄金最新走势分析早盘1914现价多
  • 请写一个非对称加密工具 示例包括完整的通信流程
  • 近地面无人机植被定量遥感与生理参数反演技术
  • 卡巴斯基为基于Linux的嵌入式设备推出专用解决方案
  • Word转PDF工具哪家安全?推荐好用的文件格式转换工具
  • dma_mmap_coherent函数的使用
  • MySQL_DQL语句(查询语句以及常用函数)
  • 一步步教你实现JWT认证和授权
  • 【python 深度学习】解决遇到的问题
  • maxwell 基于zookeeper的高可用方案
  • 【JavaScript】match用法 | 正则匹配
  • 前端css + js +vue +element-ui 实现响应式布局,根据浏览器窗体大小自动响应
  • 小程序生成App:轻量低门槛的开发方式
  • Linux命名管道进程通信
  • 如何将苹果彻底删除视频找回?试试这3种方法
  • 【音视频、chatGpt】h5页面最小化后,再激活后视频停住问题的解决
  • [CSS] 图片九宫格
  • MChat-Gpt V1.0.0 (将ChatGpt机器人接入内网供全体使用)
  • 日常开发中Git命令指北
  • API 测试 | 了解 API 接口概念|电商平台 API 接口测试指南
  • 【计算机组成原理】24王道考研笔记——第三章 存储系统
  • 学习C语言的好处:
  • 基于k8s的devOps自动化运维平台架构设计(中英文版本)
  • P450进阶款无人机室内定位功能研测