ASP.NET Core 2 学习笔记(十)视图

Stella981
• 阅读 414

ASP.NET Core MVC中的Views是负责网页显示,将数据一并渲染至UI包含HTML、CSS等。并能痛过Razor语法在*.cshtml中写渲染画面的程序逻辑。
本篇将介绍ASP.NET Core MVC的Views。

之前 ASP.NET Core 2 学习笔记(六)MVC 有稍微介绍到Views及Controller的对应关系,这边就不重复说明。

Razor 语法

ASP.NET Core MVC的Views默认是使用Razor引擎,Views的扩展名是用*.cshtml。文件内容以HTML为主,但可以通过@Razor语法写C#程序。可以假想一下*.cshmtl就是一般的HTML,而Razor语法是C#程序跟静态HTML沟同的媒介。

**@就是Razor语法最重要的沟同媒介,在C#变量前面加上@,就可以将C#程序混合成HTML输出。如果要在HTML显示@符号的话,可以连用两个@符号,就可以把@**输出,范例如下:

<div>@@DateTime.Now @DateTime.Now</div>
<div>
    @@(DateTime.Now - TimeSpan.FromDays(7)) 
    @(DateTime.Now - TimeSpan.FromDays(7))
</div>

实际输出的HTML 结果:

<div>@DateTime.Now 2018-06-04 10:32:38</div>
<div>
    @(DateTime.Now - TimeSpan.FromDays(7)) 
    2018-05-28 10:32:38
</div>

控制结构(Control Structures)

如果有需要也可以在Views写C#代码,通过**@{ }**定义程式区块,便可以在Views中写C#程序,如下:

也可以在循环、判断式或C#区块的关键字前加上**@**表示程序区块,如:**@if@switch@for@foreach@while@do{ }while()@try@using@lock**。
范例如下:

@{
    bool flag = true;
    int number = 3;
}

@if(flag)
{
  <div>flag is true</div>
} 
else
{
  <div>flag is false</div>
}

@switch(number)
{
    case 3:
        <div>number is lucky 3!!!!</div>
        break;
    default:
        <div>number is @number</div>
        break;
}

@for(var i = 0; i < number; i++)
{
    <div>For sample: @i</div>
}

@try
{
    throw new Exception("something wrong");
}
catch(Exception ex)
{
    <div>@ex.Message</div>
}

输出画面:

ASP.NET Core 2 学习笔记(十)视图

指令(Directives)

Razor Views 会被Razor 引擎动态转换成Class,所以也有些类似C# Class 的方法可以使用。

  • @using
    同C# Class的using,载入不同namespaces,简化使用时的名称。例:

    @using System.IO @{ var dir = Directory.GetCurrentDirectory(); }

    @dir

  • @model
    用来绑定Controller传来的Model类型,并填入Model属性中,在Views中就可以通过Model取得Controller传来的Model。例:

    @using MyWebsite.Models @model UserModel Hello~ 我是 @Model.Name

  • @inherits
    让Razor View继承其他自定义的RazorPage类型。例:
    CustomRazorPage.cs

    using Microsoft.AspNetCore.Mvc.Razor;

    public abstract class CustomRazorPage : RazorPage { public string CustomText { get; } = "CustomRazorPage.CustomText"; }

Sample.cshtml

@using MyWebsite.Utils

@inherits CustomRazorPage<TModel>
<div>Custom text: @CustomText</div>
  • @inject
    将DI容器的Service注入至Razor View使用。
    (DI可以参考这篇:ASP.NET Core 2 学习笔记(四)依赖注入 )

  • @functions
    在Razor View 定义方法。例:

    @functions { public string GetHello() { return "Hello"; } }

    From method: @GetHello()
  • @section
    配合Layout 排版使用,下面会介绍。

Layout

通常网站的页面都有类似的风格,可能只有部分的内容会不一样,这种清况很适合用Layout。
以下图为例,网站的每页都会有Header及Footer而且都长的一样,就只有Content会不同。

ASP.NET Core 2 学习笔记(十)视图

通常Layout都会放在_Views\Shared_资料夹,建立一个__Layout.cshtml_:

Views\Shared\_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    @RenderSection("styles", required: false)
</head>
<body>
    <header>
        Layout Header
    </header>
    <div>
        <h1>@ViewBag.Title</h1>
        @RenderBody()
    </div>
    <footer>
        Layout footer
    </footer>
    @RenderSection("scripts", required: false)
</body>
</html>

在要套用Layout 的Views,指派要套用的Layout 名称,如下:

Views\Home\Index.cshtml

@using MyWebsite.Models
@model UserModel
@{
    Layout = "_Layout";
    ViewBag.Title = "Sample";
}

<div>Hello~ 我是 @Model.Name</div>

@section styles {
  <link rel="stylesheet" type="text/css" href="https://my.oschina.net/css/theme.css">
}
@section scripts {
  <script type="text/javascript" src="https://my.oschina.net/js/jquery.js"></script>
} 
  • Layout
    Layout是指定要套用Layout的名称,预设会在文件夹_Views\Shared_寻找{Layout 名称}.cshtml
    也可以指定完整路径,如:Layout = "/Views/Shared/_Layout.cshtml"
  • ViewBag
    ViewBag是Dynamic类型的对象,可以在同一个Request中,跨Controller及Views存取数据。
  • @section
    在使用Layout时,并不一定会将Razor View全部填入至RenderBody,可能会有需求将某些内容填入至Layout的其他地方。如:*.css的引用填入至<head></head>中;*.js的引用填入至</body>之前。

当打开http://localhost:5000/home/index时,Razor引擎会将_Index.cshtml_的结果都填入_Views\Shared\_Layout.cshtml_的@RenderBody()
实际输出的HTML结果:

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    
  <link rel="stylesheet" type="text/css" href="https://my.oschina.net/css/theme.css">

</head>
<body>
    <header>
        Layout Header
    </header>
    <div>
        <h1>Sample</h1>
        
<div>Hello~ 我是 SnailDev</div>


    </div>
    <footer>
        Layout footer
    </footer>
    
  <script type="text/javascript" src="https://my.oschina.net/js/jquery.js"></script>

</body>
</html>

_ViewImports

上例_Views\Home\Index.cshtml_有用到@using MyWebsite.Models,实务上可能每个Razor View都会用到@using MyWebsite.Models,如果每个*.cshtml都加上这行就会显得有点笨拙。
可以通过__ViewImports.cshtml_把通用性的@using都加到这边,如此一来就可以套用到全部的Razor View,如:

Views\_ViewImports.cshtml

@using System.IO
@using System.Collections.Generic
@using MyWebsite
@using MyWebsite.Models

如此一来就能将_Views\Home\Index.cshtml_第一行的@using MyWebsite.Models移除。

_ViewStart

指定Layout也会有套用全部Razor View的需求,可以通过__ViewStart.cshtml_,在Razor View的第一个渲染事件指派预设Layout,如:

Views\_ViewStart.cshtml

@{
    Layout = "_Layout";
}

Partial Views

有些重复性很高的画面,如果散落在各个Razor View,在维护上就会比较麻烦。
可以通过Partial Views把重复的内容变成组件,再重复使用。范例如下:

Controllers\HomeController.cs

// ...
public class HomeController : Controller
{
    public IActionResult Index(int id)
    {
        return View(new List<UserModel>()
        {
            new UserModel()
            {
                Id = 1,
                Name = "John",
                Email = "john@xxx.xxx",
            },
            new UserModel()
            {
                Id = 2,
                Name = "Blackie",
                Email = "blackie@xxx.xxx"
            },
            new UserModel()
            {
                Id = 3,
                Name = "Claire",
                Email = "claire@xxx.xxx"
            }
        });
    }
}

Views\Home\_UserInfo.cshtml

@model UserModel
<div>
    <label>Id:</label>@Model.Id <br />
    <label>Name:</label>@Model.Name <br />
    <label>Email:</label>@Model.Email <br />
</div>

Views\Home\Index.cshtml

@model List<UserModel>
@{
    ViewBag.Title = "User List";
}

@foreach(var user in Model)
{
    @Html.Partial("_UserInfo", user)
    <hr />
}

实际输出的HTML 结果:

<!DOCTYPE html>
<html>
<head>
    <title>User List</title>
</head>
<body>
    <header>
        Layout Header
    </header>
    <div>
        <h1>User List</h1>
        <div>
            <label>Id:</label>1 <br />
            <label>Name:</label>John <br />
            <label>Email:</label>john@xxx.xxx <br />
        </div>
        <hr />
        <div>
            <label>Id:</label>2 <br />
            <label>Name:</label>Blackie <br />
            <label>Email:</label>blackie@xxx.xxx <br />
        </div>
        <hr />
        <div>
            <label>Id:</label>3 <br />
            <label>Name:</label>Claire <br />
            <label>Email:</label>claire@xxx.xxx <br />
        </div>
        <hr />
    </div>
    <footer>
        Layout footer
    </footer>
</body>
</html>

后记

Views的渲染过程都还是在Server端,所以可以通过Razor写C#代码。
Razor引擎最终会将渲染的结果以HTML的方式回传给Client。
回顾 ASP.NET Core 2 学习笔记(六)MVC 数据流动画:

ASP.NET Core 2 学习笔记(十)视图

要注意的是,Razor 的渲染是耗用Server 的CPU 资源,如果有多笔的数据通过循环产生HTML,也会变成网路传输的负担。如果要注重性能,建议用Single Page Application(SPA) 的方式取代Razor。

参考

Views in ASP.NET Core MVC
Razor syntax for ASP.NET Core
Partial Views

老司机发车啦:https://github.com/SnailDev/SnailDev.NETCore2Learning

点赞
收藏
评论区
推荐文章
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
helloworld_34035044 helloworld_34035044
6个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为