Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ASP.NET Core 入门教程 5、ASP.NET Core MVC 视图传值入门

ASP.NET Core 入门教程 5、ASP.NET Core MVC 视图传值入门

原创
作者头像
KenTalk
发布于 2018-11-09 03:07:54
发布于 2018-11-09 03:07:54
2.4K00
代码可运行
举报
文章被收录于专栏:Ken的杂谈Ken的杂谈
运行总次数:0
代码可运行

一、前言

1、本教程主要内容

  • ASP.NET Core MVC 视图引擎(Razor)简介
  • ASP.NET Core MVC 视图(Razor)ViewData使用示例
  • ASP.NET Core MVC 视图(Razor)ViewBag使用示例
  • ASP.NET Core NVC 视图(Razor)强类型传值(ViewModel)页示例

2、本教程环境信息

软件/环境

说明

操作系统

Windows 10

SDK

2.1.401

ASP.NET Core

2.1.3

IDE

Visual Studio Code 1.28

浏览器

Chrome 70

本篇代码基于以下代码进行调整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-02

3、前置知识

你可能需要的前置知识

  • MVC框架/模式介绍

https://baike.baidu.com/item/mvc

4、准备工作

VS Code 本身不提供 ASP.NET Core MVC 视图引擎(Razor)的智能感知。 幸运的是,VS Code C#扩展 从 1.17.0 版本开始支持Razor视图引擎的智能感知。

所以,我们要将VS Code C#扩展升级到最新版本。

二、ASP.NET Core MVC 视图引擎(Razor)简介

1、ASP.NET Core MVC 视图引擎(Razor)概述

在MVC架构模式中,视图引擎/模板引擎负责将控制器(Controller)提供的数据结合视图模板进行渲染我们需要的格式(通常是HTML)。控制器(Controller)再将渲染的结果返回给请求的客户端。

在 ASP.NET Core MVC框架中,提供了视图引擎:Razor。 Razor提供了后缀为.cshtml的视图模板。Razor视图模板支持使用Razor标记语言以及C#进行编写。使用起来非常方便。

Razor 就相当于Java平台常用的 Freemarker、Thymeleaf

2、Razor视图模板文件位置与指定

视图文件位置

Razor视图模板文件通常放在根目录Views文件夹对应控制器的子目录中。 例如: ~/Views/Home/Time.cshtml。

这是因为按照 ASP.NET Core MVC框架的约定,当我们在控制器(Controller)返回一个视图(return View();)时,如果只指定了视图名称(ViewName),并没有指定视图的完成路径,那么MVC框架将按照以下顺序查找视图:

  • Views/[ControllerName]/[ViewName].cshtml
  • Views/Shared/[ViewName].cshtml
视图指定方式
  • 隐式指定
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public class HomeController : Controller
{
    public IActionResult Test(){
        return View();
    }
}

当没有指定ViewName的时候,ViewName=ActionName=”Test”; 框架将按照约定顺序查找视图文件

  • 显示指定视图名
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public class HomeController : Controller
{
    public IActionResult Test(){
        return View("Test");
    }

    public IActionResult TestAbc(){
        return View("abc");
    }
}

分别手动指定了视图名;ViewName=”Test”、ViewName=”abc”; 框架将按照约定顺序查找视图文件

  • 显示指定视图文件
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public class HomeController : Controller
{
    public IActionResult Test(){
        return View("Views/Test.cshtml");
    }
}

固定查找 Views/Test.cshtml 视图文件

三、Razor视图引擎传递数据

1、准备工作

  • 创建RenderDataController

在Controllers文件夹下新增控制器RenderDataController.cs并继承于Controller

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
using System;
using Microsoft.AspNetCore.Mvc;

namespace Ken.Tutorial.Web.Controllers
{
    public class RenderDataController : Controller
    {

    }
}
  • 创建对应视图文件夹

在Views目录下创建文件夹RenderData

2、弱类型参数传递数据

弱类型参数说明
  • ViewData
    • 派生自 ViewDataDictionary,因此它有可用的字典属性,如 ContainsKey、Add、Remove 和 Clear。
    • 字典中的键是字符串,因此允许有空格。 示例:ViewData[“ken”]
    • 任何非 string 类型均须在视图中进行强制转换才能使用 ViewData。
  • ViewBag
    • 派生自 DynamicViewData,因此它可使用点表示法 (@ViewBag.SomeKey = ) 创建动态属性,且无需强制转换。
    • ViewBag 的语法使添加到控制器和视图的速度更快。
    • ViewBag 更易于检查 NULL 值。 示例:@ViewBag.Person?.Name
ViewData使用示例
  • 创建Action:ViewDataDemo
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public IActionResult ViewDataDemo()
{
    ViewData["name"] = "ken";
    ViewData["birthday"] = new DateTime(2000, 1, 1);
    ViewData["hobby"] = new string[] { "跑步", "阅读", "Coding" };
    return View();
}
  • 创建视图:ViewDataDemo.cshtml
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@{
    var hobby =ViewData["hobby"] as String[];
}

<h3>@ViewData["title"]</h3>
<ul>
    <li>姓名:@ViewData["name"]</li>
    <li>生日:@ViewData["birthday"]</li>
    <li>爱好:@hobby[0] , @hobby[1]</li>
</ul>
  • 访问测试

启动项目,访问 /renderdata/viewdatademo 将会看到:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ViewData传值示例
姓名:ken
生日:01/01/2000 00:00:00
爱好:跑步 , 阅读
ViewBag使用示例
  • 创建Action:ViewBagDemo
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public IActionResult ViewBagDemo()
{
    ViewBag.Title = "ViewBag传值示例";
    ViewBag.Name = "ken";
    ViewBag.Birthday = new DateTime(2000, 1, 1);
    ViewBag.Hobby = new string[] { "跑步", "阅读", "Coding" };
    return View();
}
  • 创建视图:ViewBagDemo.cshtml
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@{
    var hobby =ViewBag.Hobby as String[];
}

<h3>@ViewBag.Title</h3>
<ul>
    <li>姓名:@ViewBag.Name</li>
    <li>生日:@ViewBag.Birthday</li>
    <li>爱好:@hobby[0] , @hobby[1]</li>
</ul>
  • 访问测试

启动项目,访问 /renderdata/viewbagdemo 将会看到:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ViewBag传值示例
姓名:ken
生日:01/01/2000 00:00:00
爱好:跑步 , 阅读

3、强类型参数传递数据

强类型参数说明

视图强类型通常称为ViewModel,我们可以在return View();时指定视图参数/对象。并在视图文件(.cshtml)中通过 @model 语法指定对应的类型,这样我们可以在视图文件(.cshtml)中使用Model关键字来使用传输到视图的该类型的实例。

强类型参数示例
  • 创建Person类

在项目根目录创建Models文件夹并在文件中创建Person.cs

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
using System;

namespace Ken.Tutorial.Web.Models
{
    public class Person
    {
        public string Name { get; set; }

        public DateTime Birthday { get; set; }

        public string[] Hobby { get; set; }
    }
}
  • 创建Action:ViewModelDemo
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public IActionResult ViewModelDemo()
{
    ViewBag.Title = "ViewModel传值示例";
    var person = new Person
    {
        Name = "ken",
        Birthday = new DateTime(2000, 1, 1),
        Hobby = new string[] { "跑步", "阅读", "Coding" }
    };
    //等同于 return View("ViewModelDemo", person);
    return View(person);
}
  • 创建视图:ViewModelDemo.cshtml
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@model Ken.Tutorial.Web.Models.Person;

<h3>@ViewBag.Title</h3>
<ul>
    <li>姓名:@Model.Name</li>
    <li>生日:@Model.Birthday</li>
    <li>爱好:@Model.Hobby[0] , @Model.Hobby[1]</li>
</ul>
  • 访问测试

启动项目,访问 /renderdata/viewmodeldemo 将会看到:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ViewModel传值示例
姓名:ken
生日:01/01/2000 00:00:00
爱好:跑步 , 阅读

四、备注

1、附录

  • 本文代码示例

https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-05

  • 本文参考

https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/overview?view=aspnetcore-2.1


本文首发于我的独立博客:https://ken.io/note/asp.net-core-tutorial-mvc-view-renderdata

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
本篇代码以下代码进行调整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-02
KenTalk
2018/11/12
3.1K0
ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门
本篇代码以下代码进行调整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-06
KenTalk
2018/12/21
2.3K0
ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门
【asp.net core 系列】3 视图以及视图与控制器
在之前的几篇中,我们大概介绍了如何创建一个asp.net core mvc项目以及http请求如何被路由转交给对应的执行单元。这一篇我们将介绍一下控制器与视图直接的关系。
程序员小高
2020/06/03
2.7K0
ASP.NET MVC5高级编程——(2)MVC模式的视图
1 ,视图职责是向用户提供界面,当控制器针对被请求的URL执行完合适的逻辑后,就将要显示的内容委托给视图。
浩Coding
2019/07/02
3.3K0
ASP.NET MVC5高级编程——(2)MVC模式的视图
【ASP.NET Core 基础知识】--MVC框架--Views和Razor语法
在ASP.NET Core的MVC(Model-View-Controller)框架中,View 扮演着呈现用户界面的角色。View负责展示应用程序的数据给用户,并接收用户的输入。它与Model和Controller协同工作,通过模型绑定从Controller获取数据,然后使用Razor语法或其他视图引擎将数据呈现为用户可见的HTML。
喵叔
2024/01/11
1.4K0
ASP.NET MVC 5 - 视图
在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML。 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所引入的Razor视图引擎(Razor view engine)。Razor视图模板文件使用.cshtml文件扩展名,并提供了一个优雅的方式来使用C#语言创建所要输出的HTML。用Razor编写一个视图模板文件时,将所需的字符和键盘敲击数量降到了最低,并实现了快速,流畅的编码工作流程。 当前在控制器类中的Inde
葡萄城控件
2018/01/10
3.5K0
ASP.NET MVC 5 - 视图
ASP.NET Core 入门教程 2、使用ASP.NET Core MVC框架构建Web应用
ASP.NET Core 默认集成了DI。所有官方模块的引入都要使用DI的方式引入。
KenTalk
2018/10/03
1.6K0
ASP.NET Core 入门教程 2、使用ASP.NET Core MVC框架构建Web应用
ASP.NET MVC的Razor引擎:RazorViewEngine
基于Web Form引擎的WebFormViewEngine和针对Razor引擎的RazorViewEngine都是抽象类型BuildManagerViewEngine的子类,而后者又继承自VirtualPathProviderViewEngine。在这里我们仅仅对实现在RazorViewEngine中View获取的逻辑进行简单介绍。由于Razor引擎下的View通过RazorView对象来表示,而RazorView通过View文件的虚拟路径来构建,所以RazorViewEngine的View获取机制在于根
蒋金楠
2018/01/15
1.3K0
ASP.NET MVC的Razor引擎:RazorViewEngine
ASP.NET Core Views系列二
部分视图是普通的视图文件(.cshtml),可以嵌入到另外的视图文件里,这意味这相同的视图文件能被使用在多个地方并且减少代码重复,如果在我们应用程序中有重复的视图,我们可以将这个视图作为部分视图,在别的视图中加载这个文件,这种方式可以阻止代码重复
郑子铭
2023/08/30
2670
ASP.NET Core Views系列二
使用ASP.NET Core MVC框架构建Web应用
ASP.NET Core 默认集成了DI。所有官方模块的引入都要使用DI的方式引入。
conanma
2021/12/29
1.5K0
ASP.NET Core MVC 视图
布局用于提供各个页面所需的公共部分,如:菜单、页头、页尾等。在ASP.NET Core中默认的布局文件是位于/Views/Shared文件夹下的_Layout.cshtml文件:
雪飞鸿
2019/05/19
2.4K0
[ASP.NET Core 3框架揭秘] 跨平台开发体验: Windows [下篇]
由于ASP.NET Core框架在本质上就是由服务器和中间件构建的消息处理管道,所以在它上面构建的应用开发框架都是建立在某种类型的中间件上,整个ASP.NET Core MVC开发框架就是建立在用来实现路由的EndpointRoutingMiddleware和EndpointMiddleware中间件上。ASP.NET Core MVC利用路由系统为它分发请求,并在此基础上实现针对目标Controller的激活、Action方法的选择和执行,以及最终对于执行结果的响应。在介绍的实例演示中,我们将对上面创建的ASP.NET Core作进一步改造,使之转变成一个MVC应用。
蒋金楠
2019/10/11
2.1K0
[ASP.NET Core 3框架揭秘] 跨平台开发体验: Windows [下篇]
ASP.NET Core 入门教程 4、ASP.NET Core MVC控制器入门
本篇代码以下代码进行调整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-02
KenTalk
2018/10/16
2.5K0
ASP.NET Core 入门教程 4、ASP.NET Core MVC控制器入门
ASP.NET Core 上传多文件 超简单教程
https://qcloud.coding.net/api/project/3915794/files/4463836/download
痴者工良
2019/08/08
4.9K0
ASP.NET MVC编程——视图
1Razon语法 使用@符号后接C#或VB.NET语句的方式。 基本规则 1)变量 @后直接变量即可 2)代码块 为使用表达式或多行代码,@后跟大括号将多行代码包括在大括号中 3)“+” 对于加号连接的两个字符串变量或属性,使用小括号将他们括起来 4)插入HTML或文字 每一行前面加上“@:” 5)使用注释 使用@*和*@将要注释的部分包起来 6)用@@在页面上显示@ @using 在一个View中引入此页所需程序集的命名空间。 还可以在web.config中配置命名空间,不过将对所有的View起作用。 <
甜橙很酸
2018/03/30
3.3K0
ASP.NET MVC 5 - 将数据从控制器传递给视图
在我们讨论数据库和数据模型之前,让我们先讨论一下如何将数据从控制器传递给视图。控制器类将响应请求来的URL。控制器类是给您写代码来处理传入请求的地方,并从数据库中检索数据,并最终决定什么类型的返回结果会发送回浏览器。视图模板可以被控制器用来产生格式化过的HTML从而返回给浏览器。 控制器负责给任何数据或者对象提供一个必需的视图模板,用这个视图模板来Render返回给浏览器的HTML。最佳做法是:一个视图模板应该永远不会执行业务逻辑或者直接和数据库进行交互。相应的,一个视图模板应该只和控制器所提供的数据进行交
葡萄城控件
2018/01/10
5.7K0
ASP.NET MVC 5 - 将数据从控制器传递给视图
ASP.NET MVC的Razor引擎:RazorView
Razor引擎具有两个核心的类型,一个是表示View本身的类型RazorView,另一个则是获取和创建它的RazorViewEngine,我们将用两篇文章对它们分别进行剖析。Razor引擎下的View
蒋金楠
2018/01/15
1.4K0
ASP.NET MVC的Razor引擎:RazorView
ASP.NET 5系列教程 (三):view components介绍
在ASP.NET MVC 6中,view components (VCs) 功能类似于虚拟视图,但是功能更加强大。 VCs兼顾了视图和控制器的优点,你可以把VCs 看作一个Mini 控制器。它负责控制应用中的某一功能模块,例如: 动态导航菜单 标签云 登录面板 购物车 最近文章 博客侧边栏 假如使用VC 创建了登录面板,可以在很多场景中调用,例如: 用户没有登录 用户已登录,需要退出使用其他帐号登录或者管理其他帐号。 如果当前登录角色为管理员,渲染管理员登录面板 你可以根据用户的需求获取数据进行渲染。添加V
葡萄城控件
2018/01/10
1.8K0
ASP.NET 5系列教程 (三):view components介绍
重学ASP.NET Core 中的标记帮助程序
标记帮助程序使服务器端代码可以在 Razor 文件中参与创建和呈现 HTML 元素。 例如,内置的 ImageTagHelper 可以将版本号追加到图片名称。  每当图片发生变化时,服务器都会为图像生成一个新的唯一版本号,因此客户端总能获得当前图像(而不是过时的缓存图像)。
依乐祝
2020/06/28
3.1K0
ASP.NET MVC学习笔记03视图
早在ASP.NET MVC 3就引入了Razor视图引擎( Razor view engine)。Razor视图模板文件使用.cshtml文件扩展名,并提供了一个优 雅的方式来使用C#语言创建所要输出的HTML。用Razor编写一个视图模板文件时,将 所需的字符和键盘敲击数量降到了最低,并实现了快速,流畅的编码工作流程。 ---- 控制器返回指定视图 当前在控制器类中的Index方法返回了一个硬编码的字符串。更改HelloController方法返回一个 View对象,如下面的示例代码: 1 2 3 4
李郑
2018/03/01
2.2K0
ASP.NET MVC学习笔记03视图
相关推荐
ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验