Razor模板语法

Razor是ASP.NET Core的视图层实现,Razor的功能极为强大(换句话说,Razor里也充斥着鸡肋特性),这篇笔记我们学习一些Razor中常用的模板语法。

注释

Razor中使用以下标记作为注释,它既可以用于单行也可以用于多行。

@* *@

@{ }代码块中,我们可以正常使用C#注释。

@{
    // string hello = "Hello, ASP.NET Core!";
    /*
     string hello = "Hello, ASP.NET Core!";
    */
}

注意HTML注释<!-- -->也可以在Razor中使用,但该注释依然会输出到HTML文本中。

输出C#表达式

Razor中,我们可以使用@开头输出一个C#表达式,下面例子输出了当前的日期。

<p>@DateTime.Now.ToString("yyyy-MM-dd")</p>

Razor代码块

Razor中我们可以使用@{ }定义一个代码块,其中可以包含C#代码,代码中定义的变量可以在HTML中使用@表达式输出。

@{
    string hello = "Hello, ASP.NET Core!";
}
<p>@hello</p>

一个视图中的代码块和表达式共享相同的作用域并按顺序进行定义。

条件判断

Razor中条件判断可以使用@if ... else if ... else实现,下面是一个例子。

@{
    int balance = 100;
}
<p>
    您好,
    @if (balance < 10)
    {
        <span>普通用户</span>
    }
    else if (balance >= 10 && balance < 100)
    {
        <span>VIP用户</span>
    }
    else if (balance >= 100 && balance < 10000)
    {
        <span>超级VIP用户</span>
    }
    else if (balance >= 1000)
    {
        <span>白金VIP中P用户</span>
    }
    else
    {
        <span>系统错误!</span>
    }
</p>

此外我们也可以使用@switch实现条件判断,下面是一个例子。

@{
    int flag = 1;
}
<p>
    @switch (flag)
    {
        case 0:
            <span>线路正常</span>
            break;
        case 1:
            <span>线路繁忙</span>
            break;
        case 2:
            <span>线路爆满</span>
            break;
        default:
            <span>错误</span>
            break;
    }
</p>

循环

循环我们可以使用@for@foreach@while@do ... while来实现,下面是一些例子。

@{
    string[] fruits = new string[] { "apple", "banana", "pear" };
}
@for (var i = 0; i < fruits.Length; i++)
{
    <p>@fruits[i]</p>
}
@{
    string[] fruits = new string[] { "apple", "banana", "pear" };
}
@foreach (var f in fruits)
{
    <p>@f</p>
}

@while@do ... while几乎不会用到,这里就不演示了,具体可以参考文档。

Razor指令

Razor提供了很多指令用于实现各种功能,指令使用@指令关键字的方式编写。

@model指令用于在MVC中绑定模型到视图。

@model Gacfox.Demo.DemoMVC.Models.Student

@using用于向Razor视图添加C#的using指令。

@using System.IO
@{
    bool flag = File.Exists("E:/1.txt");
}
<p>@flag</p>

Razor有很多指令,不过除了@model基本都很少使用,这里仅作了解。

引入<partial>视图

Razor中使用<partial>元素可以在一个Razor视图中包含另一个Razor视图,下面是一个例子。

<partial name="_Nav.cshtml"></partial>
<div>正文</div>

<partial name="_Nav.cshtml"></partial>表示引入同文件夹下的_Nav.cshtml文件。

我们也可以使用类似~/的形式引入其它Razor视图,~表示程序根目录。

<partial name="~/Views/Demo/_Nav.cshtml"></partial>
<div>正文</div>

注意:<partial>引入的Razor视图中不会执行_ViewStart.cshtml

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap