摘抄自:https://www.cnblogs.com/ken-io/p/aspnet-core-tutorial-mvc-view-renderdata.html

如有侵权请告知

一、前言

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

视图指定方式

  • 隐式指定
public class HomeController : Controller
{
public IActionResult Test(){
return View();
}
}

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

  • 显示指定视图名
public class HomeController : Controller
{
public IActionResult Test(){
return View("Test");
} public IActionResult TestAbc(){
return View("abc");
}
}

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

  • 显示指定视图文件
public class HomeController : Controller
{
public IActionResult Test(){
return View("Views/Test.cshtml");
}
}

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

三、Razor视图引擎传递数据

1、准备工作

  • 创建RenderDataController

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

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
public IActionResult ViewDataDemo()
{
ViewData["name"] = "ken";
ViewData["birthday"] = new DateTime(2000, 1, 1);
ViewData["hobby"] = new string[] { "跑步", "阅读", "Coding" };
return View();
}
  • 创建视图:ViewDataDemo.cshtml
@{
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 将会看到:

ViewData传值示例
姓名:ken
生日:01/01/2000 00:00:00
爱好:跑步 , 阅读

ViewBag使用示例

  • 创建Action:ViewBagDemo
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
@{
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 将会看到:

ViewBag传值示例
姓名:ken
生日:01/01/2000 00:00:00
爱好:跑步 , 阅读

3、强类型参数传递数据

强类型参数说明

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

强类型参数示例

  • 创建Person类

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

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
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
@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 将会看到:

ViewModel传值示例
姓名:ken
生日:01/01/2000 00:00:00
爱好:跑步 , 阅读

ASP.NET Core 入门笔记6,ASP.NET Core MVC 视图传值入门的更多相关文章

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

    一.前言 1.本教程主要内容 ASP.NET Core MVC 视图引擎(Razor)简介 ASP.NET Core MVC 视图(Razor)ViewData使用示例 ASP.NET Core MV ...

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

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

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

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

  4. git入门笔记汇总——(廖雪峰博客git入门)

    本文内容是对廖雪峰老师Git教程做的笔记,外加一些自己的学习心得,还抱着学以致用的心态来实践一番 如有显示错误 请移步本人github:git教程小结 Git学习笔记 Git简介 安装Git 创建版本 ...

  5. oracle 入门笔记--v$sql和v$sqlarea视图(转载)

    转载于作者:dbtan 原文链接:http://www.dbtan.com/2009/12/vsql-and-vsqlarea-view.html v$sql和v$sqlarea视图: 上文提到,v$ ...

  6. Asp.Net Core学习笔记:入门篇

    Asp.Net Core 学习 基于.Net Core 2.2版本的学习笔记. 常识 像Django那样自动检查代码更新,自动重载服务器(太方便了) dotnet watch run 托管设置 设置项 ...

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

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

  8. ASP.NET Core 入门笔记9,ASP.NET Core + Entity Framework Core 数据访问入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC 集成 EF Core 介绍&操作步骤 ASP.NET Core MVC 使用 EF Core + Linq to Entity ...

  9. ASP.NET Core 入门笔记3,使用ASP.NET Core MVC框架构建Web应用

    一.ASP.NET Core MVC 输出Hello World,Friend! 1.引入 ASP.NET Core MVC 修改应用启动类(Startup.cs),引入MVC模块并配置默认路由 pu ...

随机推荐

  1. 【2-sat】8.14B. 黑心老板

    2-sat 只写过板子 题目大意 有一个长度为$k$取值只有01的序列,现在$n$个人每人下注三个位置,请构造一个序列使每个人最多猜对一个位置 $k\le 5000,n \le 10000$ 题目分析 ...

  2. sentinel.conf 配置

    daemonize yes logfile "/home/data/redis/redis_sentinel.log" sentinel monitor mymaster 192. ...

  3. fwrite() and UTF8 转载

    4 down vote If you know the data is in UTF8 than you want to set up the header. I wrote a solution a ...

  4. BZOJ 3065 带插入区间K小值 (替罪羊树套线段树)

    毒瘤题.参考抄自博客:hzwer 第一次写替罪羊树,完全是照着题解写的,发现这玩意儿好强啊,不用旋转每次都重构还能nlognnlognnlogn. 还有外面二分和里面线段树的值域一样,那么r = mi ...

  5. maven工程指定jdk版本,maven全局配置jdk的版本

  6. 1、Mat类的属性、方法

    Mat类分有两个部分:矩阵头和指向矩阵数据部分的指针 Mat类的属性: rows  矩阵的行数 cols   矩阵的列数 dims  矩阵的维度,例如5*6矩阵是二维矩阵,则dims=2,三维矩阵di ...

  7. Linux之动态库

    命令规则 lib + 名字 + .so 制作步骤 1)生成与位置无关的代码(生成与位置无关的代码) 2)将.o打包成共享库(动态库) 发布和使用共享库 动态库运行原理: 生成动态库: gcc -fPI ...

  8. MySQL树

    树 树状图是一种数据结构,它是由n(n>=1)个有限结点组成一个具有层次关系的集合.把它叫做“树”是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的. 它具有以下的特点:每个结点有零个 ...

  9. CodeForces 519D A and B and Interesting Substrings ——(奥义字符串)

    题意:给出26个字母每个字母的价值,问字符串中有多少个满足以下条件的子串: 1.子串的第一个和最后一个相同 2.子串除了头和尾的其他字符的价值加起来和尾0 这题普通方法应该是O(n^2),但是在1e5 ...

  10. JS判断开始时间不能大于检查结束时间

    //用来检验检查开始时间不能大于检查结束时间 function checkDate(date){ var startDate = $("#jcrwModel_rwfqsj").va ...