2、ASP .NETCore 2.0之视图

一、Razor基础

  声明:Razor不是编程语言,是服务器端标记语言。Razor是一种允许开发者在网页中嵌入服务器端代码的标记语法(主要是针对VB和C#)。

1、C#中Razor基本语法

(1)、Razor代码封装在@里面,具体@字段、@(...)、@{...};

(2)、@{..}里面的代码是C#代码,要遵从C#规范,预计以分号“;”结尾;

(3)、C#文件的扩展名是cshtml。

2、实例

2.1、字符串实例

@{
string name = "andy";
int age = 18;

}
name=@name,age=@age

结果:

2.2、循环实例

结果:

说明:Razor的注释是包含在@**@里面的。

有这个基础就ok了,其余的后面边用边介绍。

二、View视图

2.1、布局视图(Layout View)

  布局视图的名称可以随意的起,但是扩展名必须是.cshtml,我们习惯上给布局视图起名为_Layout.cshtml。

2.1.1、布局视图的新建

  在View文件夹下面新建一个Shared文件夹(Shared文件夹下面放置一些公共的视图页面,比如报错页面,导航页等)。然后在Shared文件夹右击选择“添加”→新建项。

2.1.3 布局页的使用。

新建Action和页面视图:

layout页面:

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>菜单导航栏-当前的时间是:@DateTime.Now</div>
<div>
@RenderBody()
</div>
<div>@@关于我们 江苏省苏州市工业园区XX有限公司</div>
</body>
</html>

输出:

 ViewBag.Title 的值也可以在当前的页面中赋值。

2.1.4、关于Layout页面占位:

  其实这整个一个过程,可以理解为“挖坑”→“填坑”。Layout页面其他的“挖坑”。@RenderBody()这个语句可以看做是一种特殊的“挖坑”,填充它的是整个页面。

(1)、必填坑定义:@RenderSection("Header"),挖坑,坑的名称为:“Header”,并且这个坑是必填的。

(2)、非必填坑定义:@RenderSection("Footer", false),挖坑,坑的名称为:“Footer”,不是必填。

也就是RenderSection有两个重载,第一个参数为挖的坑的名称,第二个参数表示此坑是否必填。默认为true,必填。

(3)、不填显示默认值:

@if (IsSectionDefined("MyBody"))//判断是否填坑,填了:显示填坑的值,没填:显示默认值的
{
@RenderSection("MyBody")
}
else
{
<div>这个是显示默认的填MyBody"坑"的内容</div>
}

2.1.5、填坑

  挖坑的方式千奇百怪,但是填坑的方式却是只有一种。以上面的Header为例:

@section Header{
我是给Header
}

当然里面可以写各种前端内容,包括css、html、JavaScript还有Razor语法等。

2.1.6、关于Layout View的说明:

  如果页面不想使用Layout视图,只需要在当前的页面引用中设置Layout=null或者直接不引用即可。

2.2 ViewStart视图

   ViewStart,顾名思义就是视图开始,也就是它是在视图渲染的一开始就调用的一个视图。关于ViewStart视图使用的几点说明:

  (1)、视图渲染时,先查找在文件的结构中是否有ViewStart视图;

  (2)、如果ViewStart在Views文件夹中,那么它将会对Views文件夹下面所有的视图起作用,其中包括Views下面的Shared;如果ViewStart在Home文件夹中,那么它对Home文件夹下面的所有视图起作用。简而言之,就是ViewStart会对它所在的文件夹层级中的所有视图文件起作用,包括子文件夹和公共文件夹中的视图。

  (3)、可以有多个ViewStart文件。

2.2.1、ViewStart文件的作用

  ViewStart是呈现view的启动文件,会在所有的view(.cshtml)文件执行之前执行,主要用于一些不方便或者不能再Layout中进行的统一操作。在viewstart页面可以定义一些函数或者做一些判断,用于其他页面。所有的View页面都会调用ViewStart,但不包括PartialView。PartialView的渲染不会调用ViewStart。

2.2.2 单个ViewStart实例

  在Views下面新进ViewStart视图,如图:,页面添加信息:,新建ViewStart视图后会默认的在里面引用layout的路径,如果没有,也可以手动添加。另外有加了一句话,用于显示页面。运行截图如下:

可以发现,页面不光输出了ViewStart页面上的div元素内容,也引用了Layout文件。

2.2.3、多个ViewStart文件的引用

  如果在Views视图下面有多个ViewStart,那么他们又是怎么引用的呢?

  

Home下面有一个ViewStart,Views下面也有一个ViewStart。我们先在两个ViewStart中写入不同的内容,看看他们显示的问题。

Views直属文件夹下:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{

<div>这个是Views直属下面的viewstart</div>
}

Home文件夹下:

@{
<div>这个是Home文件下面的viewstart</div>
}

运行后显示:

 从上面的输出我们可以发现,先输出的是Views文件夹下面的ViewStart视图,然后才是Home文件夹下面的。由此我们可以得出结论:ViewStart视图调用的顺序是最先调用Views直属下面的,然后才是Home等Action文件夹下的。

2.2.4、ViewStart、Layout和当前视图的加载顺序

  我在每一个输出的视图页面动了一点“手脚”。输出截图如下:

这个手脚就是,我在每一个页面输出了自己的文件名称还有当前的时间。

通过上面输出的时间,我们可以总结出整个视图加载的顺序:Viewstart(views下面的→Home下面的)→当前action对应的View→Layout视图

转载于:https://www.cnblogs.com/adq-1314/p/9153829.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值