2、ASP .NETCore 2.0之View

一、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视图

2.3、Partial

三、静态文件和wwwroot

3.1 wwwroot

新建ASP.NET Core项目后,会在项目的根目录层级下面有一个“wwwroot”的文件,层级目录如截图:

很显然,它里面放置的是一些css、images和js等一些静态的文件。

3.1.1  项目对wwwroot文件的引用(错误)

我们了解了wwwroot文件夹中放置的文件,但是项目如何才能引用呢?我们按照之前的逻辑先引用一下,看看会不会又作用。

引用:


运行:


很显然文件路径不存在,报404错误。这也说明通过之前的那种方式是不可以对wwwroot中的文件进行访问的。为什么之前在ASP.NET MVC中可以这样访问文件,但是在.net Core中就不可以了呢?原来是.Net Core对静态文件的路径做了安全访问的限制。通过之前的引用是不行的。

3.1.2 项目对wwwroot文件的引用(正确)

需要再Startup文件类中的Configure方法中添加对静态文件的访问:  app.UseStaticFiles();//使用默认文件夹wwwroot   。


这种操作就可以对wwwroot中的文件进行引用了。

3.1.3自定义文件夹下文件的引用

在现实中,我们的页面会引用很多的静态文件,需要我们去引用。在这种情况下用上面的方法又是不行的,引用不了,因为它默认的;路径就是wwwroo。这样我们还得在app.UseStaticFiles()方法中找解决方案。

var staticFiles = new StaticFileOptions();
            staticFiles.FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),"Images"));
            staticFiles.RequestPath = new PathString("/Images111");
            app.UseStaticFiles(staticFiles);

我们发现在UseStaticFiles方法中有多个重载,其中一个是有一个StaticFileOptions参数。StaticFileOptions继承SharedOptionsBase,而SharedOptionsBase中有里面有两个重要的属性,分别是FileProvider和RequestPath,FileProvider是指文件的提供者,也就是文件真实存在的路径;而RequestPath是文件的请求路径,可以是真实的文件路径,也可以是虚拟的路径。上面的Images111就是虚拟的路径。它的真实路径是Images。

运行结果:

3.1.4自定义路径和默认路径混合使用

    前面介绍了默认路径和我们自定义路径,但是通过改造成自定义文件后,发现默认的有不能正常引用了,顾头不顾腚,尴尬,尝试将两种方式联合一起使用呢?



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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值