ASP.NET Core MVC 之视图(Views)
ASP.NET Core MVC 控制器可以使用视图返回格式化的结果。
1.什么是视图
在 MVC 中,视图封装了用户与应用交互呈现细节。视图是具有生成要发送到客户端内容的,包含嵌入代码的HTML模板。视图使用使用 Razor 语法,该语法允许以最少的代码或复杂度与 HTML 进行交互。
ASP.NET Core MVC 视图默认以 .cshtml 文件保存在应用程序的 Views 文件夹里面。通常,每个控制器都有自己的文件夹,其中包含对应控制器操作方法的视图。
除了对应操作的视图,局部视图,布局以及其他特定视图文件可以用来减少重复,并允许在视图中重复使用。
视图在 MVC 应用程序中提供了关注的分离,将用户界面级标记与业务逻辑分开封装。通常,可以通过 布局与共享指令<layout>或布局视图<partial>对应的用户界面中重复使用。
2.创建视图
属于某个控制器的视图创建在 Views/[ControllerName] 文件夹下。在控制器之间公用的视图则放在 /Views/Shared 文件夹下。将视图命名为与其关联的控制器操作一样的名字,并添加 .cshtml 扩展名。例如,为Home 控制器的 About 操作创建一个视图,则应在 /Views/Home 文件夹下创建一个 About.cshtml 文件,或者在操作方法上右键点击添加视图:
@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3> <p>Use this area to provide additional information.</p>
@ 符号代表 Razor 代码。C# 语法在 { } 包裹的 Razor 代码块中运行,Razor 可以通过运用 @ 符号对值进行操作,从而在HTML中显示,就像上面 <h2> 和 <h3> 元素里面展示的那样。
这个视图只关心由它负责的这部分输出。而页面布局的部分,以及视图中的通用外观,在别的地方指定。
3.控制器指定视图
视图通常作为 ViewResult 从操作返回。操作方法可以直接创建和返回一个 ViewResult ,但一般,如果控制器继承自 Controller ,则只需使用 View 辅助方法即可:
public IActionResult About()
{
ViewData["Message"] = "Your application description page."; return View();
}
View 的辅助方法有多个重载,以便于返回视图。可以有选择性地指定一个返回的视图,还可以给视图返回一个模型对象。
当操作返回视图时,将发生称为视图发现的过程。此过程将确定使用哪个视图文件。除非指定了特定的视图文件,否则运行时首先查找控制器对应的视图,然后在 Share 文件夹中查找匹配的视图名称。
当操作返回 View 方法时,比如 return View(); 这个操作的名字则被用作视图名称。也可以给这个方法床底一个明确的视图名称 return View("SomeView"); 。这两种情况视图都会在对应控制器的视图文件夹和Share文件夹搜索匹配的文件。
可以提供视图文件的路径,在这种情况下, .cshtml 扩展名必须指定为文件路径的一部分,return View(“Views/Home/About.cshtml ”);
4.给视图传递数据
ASP.NET Core MVC 可以使用多种机制给视图传递数据。最健壮的方式是在视图中指定一个模型类型(通常称为视图模型,以区别于业务领域的模型类型),然后将此类型的实例从操作传递到视图。建议使用模型或视图模型将数据传递到视图。这允许视图利用强类型检查,可以使用 @model 指令为视图指定模型:
@model MVCTest.Models.Operation @{
ViewData["Title"] = "Create";
} <h2>Create</h2> <h4>Operation</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Id" class="control-label"></label>
<input asp-for="Id" class="form-control" />
<span asp-validation-for="Id" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div> <div>
<a asp-action="Index">Back to List</a>
</div>
一旦为视图指定了模型,就可以使用 @Model 以强类型方式访问发送到视图的实例。(@Model.Name)上面使用的标签助手。控制器向视图提供实例:
public ActionResult Create()
{
var model = new Operation()
{
Id=,
Name="test"
};
return View(model);
}
对于可以作为模型提供给视图的类型没有限制,建议传递具有很少或没有行为的视图模型,以便将业务逻辑封装在应用程序的其他位置。
1.弱类型数据
除了强类型视图之外,所有视图都可以访问弱类型的数据集合。此集合可以通过控制器和视图上的 ViewData 或 ViewBag 属性进行引用。ViewBag 属于 ViewData 的一个包装器,它提供了该集合的动态视图,它不是一个单独的集合。
ViewData 是通过字符串键访问的字典对象,可以在其中存储和检索对象。当提取对象时,需要将它们转化为特定类型。可以使用 ViewData 将数据从控制器传递到视图,以及在视图(局部视图和布局)中传递。字符串可以直接存储和使用,不需要转化:
public IActionResult About()
{
var model = new Operation()
{
Id=,
Name="test"
};
ViewData["Operation"] = model ; ViewData["Message"] = "Your application description page."; return View();
}
视图:
@{
ViewData["Title"] = "About";
//需要转化
var operation = ViewData["Operation"] as Operation ;
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
<h3>@operation.Id</h3>
<h3>@operation.Name</h3>
<p>Use this area to provide additional information.</p>
ViewBag 对象提供对存储在 ViewData 中的对象的动态访问,这样可以更方便的使用,因为不需要转换:
@{
ViewData["Title"] = "About"; }
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
<h3>@ViewBag.Operation.Id</h3>
<h3>@ViewBag.Operation.Name</h3>
<p>Use this area to provide additional information.</p>
由于两者都指向相同的底层 ViewData 集合,因此如果方便,可以在读取和写入值时,在 ViewBag 和 ViewData 之间可以混合使用。
2.动态视图
不声明类型,但具有传递给它们的模型实例的视图可以动态引用此实例。但不提供任何编译保护或 IntelliSense 。如果属性不存在,则页面将在运行时出错。
5.更多视图特性
标签助手可以轻松地将服务器端行为添加到现有地 HTML 标签中,从而避免在视图中使用自定义代码或助手代码。
生成自定义 HTML 标记可以使用许多内置地 HTML 助手来实现,更复杂地 UI 逻辑(可能具有自己地数据需求)可以封装在视图组件(View Components)中。视图组件提供了与控制器和视图提供的相同的关注点,并且可以消除对于处理由常见UI 元素使用数据的动作和视图的需要。
视图页支持依赖注入,允许服务注入到视图。(会在后面提到)
ASP.NET Core MVC 之视图(Views)的更多相关文章
- ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...
- ASP.NET Core MVC 之视图组件(View Component)
1.视图组件介绍 视图组件是 ASP.NET Core MVC 的新特性,类似于局部视图,但它更强大.视图组件不使用模型绑定,并且仅依赖于调用它时所提供的数据. 视图组件特点: 呈块状,而不是整个响应 ...
- ASP.NET Core 入门笔记8,ASP.NET Core MVC 分部视图入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...
- #asp.net core mvc 的视图注入
View injection is the most useful feature introduced in ASP.NET Core. 1.添加一个FruitsService public cla ...
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
- ASP.NET Core MVC 视图
ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...
- ASP.NET Core 入门笔记7,ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
- 创建ASP.NET Core MVC应用程序(4)-添加CRUD动作方法和视图
创建ASP.NET Core MVC应用程序(4)-添加CRUD动作方法和视图 创建CRUD动作方法及视图 参照VS自带的基架(Scaffold)系统-MVC Controller with view ...
- ASP.NET Core MVC之ViewComponents(视图组件)
前言 大概一个来星期未更新博客了,久违了各位,关于SQL Server性能优化会和ASP.NET Core MVC穿插来讲,如果你希望我分享哪些内容可以在评论下方提出来,我会筛选并看看技术文档来对你的 ...
随机推荐
- 在Delphi中编辑res文件
先用记事本编写一个rc的文件.如内容为:_Comms RCData Comms.jpg Comms.jpg为图片名称,然后在这个rc文件和图片拷贝到delphi安装路径的bin文件夹里面,选中这两个文 ...
- 给变量赋值,程序会跳到 HardFault_Handler的问题
原因:变量属于指针,该指针没有初始化
- 判断一个窗口是否被挂起(发WM_NULL消息,或者调用IsHungAppWindow API进行测试)
判断一个窗口是否被挂起了(就是没有响应了),在多窗口编程了经常会用到,在给别的窗口发消息前,为了目的窗口能确定收到消息,常常在之前先检测窗口是否被挂起了,我们以前常用的方式的是使用下面的方法: // ...
- VM中linux和windows主机进行串口通信
最近在做关于AIS的内容.为了对AIS电文进行解码,串口收发. 数据有PC机模拟发送,为了调试方便,不用次次将程序放到开发板上运行,所以利用pc主机和虚拟机进行串口通信模拟该过程. 首先需要用到一个软 ...
- 30+ 强大的Buddypress主题–开始您的社区站点吧
BuddyPress起源于2008年,当时设计者设想添加社交网络功能到WordPress多用户版本中.第一个正式稳定版本的发布是在2009年的5月.自从那时起.BuddyPress开始快速的成长和演变 ...
- 云计算核心技术Docker的探索
首先通过一个简单的场景来看一下为什么Docker这么火? 开发人员在开发的时候是有一套开发环境,包括运行的操作系统,依赖的服务比如WebLogic.Java,一些特定的配置,比如JVM大小.字符集,操 ...
- Laravel中我们登录服务器通过 Tinker 手动创建后台管理用户
Laravel中我们可以登录到服务器通过 Tinker 手动创建后台用户 laravel中tinker命令的作用是用来调试laravel,可以打印变量或对象信息,显示函数代码,对数据库写入和查询数据. ...
- 【JRebel 作者出品--译文】Java class 热更新:关于对象,类,类加载器
一篇大神的译文,勉强(嗯..相当勉强)地放在类加载器系列吧,第8弹: 实战分析Tomcat的类加载器结构(使用Eclipse MAT验证) 还是Tomcat,关于类加载器的趣味实验 了不得,我可能发现 ...
- Eclipse远程代码调试
前提:远程服务器上运行的WEB项目class对应的源码与本地项目中必须保持一致 也就是远程tomcat部署的项目就是本机项目打包过去的,而本机项目没有发生变动. 1.配置$tomcat_home/bi ...
- element-ui源码之组件通信那些事
最近在用element-ui重构前端项目,无意之中翻阅到一个比较好用的组件间通信方式,借助于vue的封装的发布-订阅消息模式与mixin语法.在开始之前先总结下vue常用的组件间通信方式,具体如下: ...