第二章基础知识（2） - Razor语法

本文链接：https://blog.csdn.net/jjailsa/article/details/142026163

Razor 是一种用于构建动态网页的视图引擎，而 Blazor 是一个用于构建交互式 Web 应用程序的框架。
Blazor 使用 Razor 语法来定义组件的 UI，二者在 ASP.NET Core 中紧密集成，使开发者能够将 C# 代码与 HTML 和 CSS 代码混合在一起，实现 UI 的渲染和逻辑处理。在这个模型中，C# 负责业务逻辑和用户交互的处理，而 HTML 和 CSS 则负责用户界面的样式，也就是可以使用C#替代JavaScript。
下面学习一下Blazor中的Razor语法的使用。

需要注意的是Blazor与MVC在Razor语法的使用上是有些不同的，下面主要说的是Blazor中的Razor语法

Razor基础语法

一、表达式与代码块

1、表达式

隐式代码表达式
隐式代码表达式直接在@后面使用表达式即可，一般用于简单的表达式：

语法：@表达式

示例

@page "/counter"
@rendermode InteractiveServer

<p>Current count: @currentCount</p>
<p class="@style">Current count: @GetCount()</p>

@code {
    private int currentCount = 0;
    private string style = "text-success";
    private int GetCount()
    {
        return currentCount;
    }
}

显示表达式

显式表达式，需要使用圆括号将表达式括起来，可以进行一些简单运算：

语法：@(表达式)

实际开发中显式表达式是很常用的：

当使用时可能会产生了二义性，此时可以使用显式表达式来排除二义性
当表达式中出现泛型时，在HTML中<>会当转回标记处理，所以要使用显式表达式。

示例

//这里如果没有使用显式表达式，就容易被当成邮箱了，例如Age@joe.Age
<p>Age@(joe.Age)</p>

//泛型的使用
<p>@(GenericMethod<int>() + 100)</p>

2、C#代码块

语法：@code{}

在Razor组件中允许定义多个@code代码块，其中只能编写C#代码，相当于在类中编写代码，可以添加类的成员，如字段、属性、方法等成员。

实质上，Razor组件就是一个C#类，而@code代码块就是一个组件类的分部类，效果等同于创建一个xxx.razor.cs的同名分部类作为后台代码。当在组件中双击选中code后，可以看到VS会出现一个灯泡，点击后会帮我们生成对应的分部类。
在这里插入图片描述
因为@code本质上是一个分部类，所以不能直接使用var定义字段或属性，也不能在其中直接使用html标签。

示例

@page "/counter"
@rendermode InteractiveServer

@Name

@code {
    string Name = "View";
    int[] intArray = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
}

3、Razor代码块

语法：@{}
与@code{}代码块不同，在@{}代码块中，不仅可以编写 C#代码，还可以直接使用 HTML 标签或者 HTML+C# 混合使用。

Razor代码块（包括@if、@for等）和表达式共享相同的作用域并按顺序进行定义和使用。

示例

@page "/razorCodeTest"
@rendermode InteractiveServer

@{
    <div>可以直接使用html标签</div>
    <p class="@style">
        @Name
    </p>
}

@code {
    string Name = "Schuyler";
    string style = "text-success";
}

显式转换

在@{}代码块中，如果我们使用了html的标签，那么会自动将内容转换成html（隐式转换）。但如果不需要展示对应的标签，只是直接展示文本内容，此时有两种处理方案：

使用<text>，也属于是隐式转换，但能保留原味。
使用@:表示在代码块内以HTML的形式呈现整个标记行的其余内容。

使用<text>标记可以在多行编写纯文本，适合大量的文本。而@:格式只能输出一行文本内容

示例

<div class="text-center">
    @for (int i = 0; i < persons.Count(); i++)
    {
        var person = persons[i];
        <div>这里会自动转为Html,但是会保留html标签的特性，比如这里是 块内容</div>
        @:但是这里如果想直接展示文本，就要这样
        @:也可以在过程中使用表达式 @person.Name
        <text>
	        这样也是可以的 
	        @person.Name
        </text>
    }
</div>

@code {
    List<Person> persons = new List<Person>{
        new Person(){Age = 12,Name = "Schuyler"},
        new Person(){Age = 13,Name = "Schuyler1"}
    };
}

4、动态Html表达式

在Razor组件中，对于表达式中的HTML内容，默认采用HTML编码输出，这是为了防止HTML注入攻击（如XSS攻击）和确保浏览器能够正确解析和显示内容。
例如：

< 被编码为 <
> 被编码为 >
& 被编码为 &
" 被编码为 "
' 被编码为 '

通过HTML编码，用户输入的内容不会被浏览器误解为HTML标签或脚本，从而提高了安全性。

示例

@page "/htmlCodeTest"
@rendermode InteractiveServer

@content

@code {
    string content = "<p class=\"text-success\">Html编码</p>";
}

在这里插入图片描述
但是有时候确实需要通过表达式来插入动态生成的HTML内容，也就是希望能将表达式中包含的HTML内容被正确解析并且插入到HTML DOM中。此时，可以使用MarkupString类型。
在Razor组件中，MarkupString类型有两种用法，一种是直接定义MarkupString类型变量，另一种是在Razor表达式中对string进行强转。

示例

@page "/htmlCodeTest"
@rendermode InteractiveServer

<div>
    @((MarkupString)contentA)
</div>
<div>
    @contentB
</div>
@code {
    string contentA = "<p class=\"text-success\">Html编码-表达式中强转</p>";

    MarkupString contentB = new MarkupString("<p class=\"text-success\">Html编码-直接定义类型</p>");
}

二、控制结构

注意，下面所讲的，也属于Razor代码块。Razor代码块、表达式共享相同的作用域并按顺序进行定义和使用。

1、条件语句

Razor中支持@if、else if、else和@switch等条件语句。

示例

<div class="text-center">
    @if(persons.Count > 1)
    {
        @:数量大于1
    }
    else
    {
        @:数量小于1
    }

    @switch (persons.Count)
    {
        case 1:
            @:数量为1
            break;
        case 2:
            @:数量为2
            break;
        default:
            @:数量为未知
            break;
    }
</div>

@code {
    List<Person> persons = new List<Person>{
        new Person(){Age = 12,Name = "Schuyler"},
        new Person(){Age = 13,Name = "Schuyler1"}
    };
}

2、循环语句

Razor中支持@for(...){...}、@foreach(...){...}、@while(...){...}和@do{...}while(...)等循环语句。

示例

@page "/forTest"
@rendermode InteractiveServer

<table class="table table-borderd">
    <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
    </thead>
    <tbody>
        @{
            var i = 0;
        }
        @do
        {
            <tr>
                <td>@persons[i].Name</td>
                <td>@persons[i].Age</td>
            </tr>
            i++;
        }
        while (i < persons.Count);
    </tbody>
</table>

<div class="text-center">
    @for (int index = 0; index < persons.Count(); index++)
    {
        var person = persons[index];
        @: Name: @person.Name
    }
    @foreach (var person in persons)
    {
        @: Name: @person.Name
    }
</div>
@code {
    List<Person> persons = new List<Person>{
        new Person(){Age = 12,Name = "Schuyler"},
        new Person(){Age = 13,Name = "Schuyler1"}
    };
}

在这里插入图片描述

3、复合语句

Razor中支持@using语句，在 C# 中 using 语句用于确保对象被正确释放。在 Razor 中这一相同机制被用于创建包含额外内容的 HTML helpers 。

Razor提供了一些内置的HTML helpers，例如Html.BeginForm()、Html.TextBoxFor()等。这些helpers可以帮助开发者生成表单、输入框、下拉列表等HTML元素。
使用@using语句和HTML helpers结合使用，可以创建一个代码块，在这个代码块中，你可以放置多个HTML元素和C#代码。这个代码块会在using语句结束时自动关闭，确保生成的HTML结构是完整的。

示例

@using (Html.BeginForm())
{
	<div>
		email:
		<input type="email" id="Email" value=""/>
		<button>Register</button>
	</div>
}

4、异常处理

Razor中同样支持异常处理，用法和C#十分相似

示例

@try
{
    throw new InvalidOperationException("You did something invalid.");
}
catch (Exception ex)
{
    <p>The exception message: @ex.Message</p>
}
finally
{
    <p>The finally statement.</p>
}

需要注意的是，如果只是使用@try{...}finally{...}，而没有catch。当发生异常时，并不会捕获异常，而是转到异常页或抛出异常，但始终会执行finally语句中的代码。

5、同步锁

Razor中支持使用@lock执行同步代码块，可以防止多个请求同时执行该代码块。

示例
```
@lock (MyLock) 
{
		//。。。
}
```

三、注释

在Razor组件中，是有三种注释可以使用的

对于HTML标签，可以使用注释
对于@code{}代码块中，可以使用c#的注释
而Razor语法中只提供了一种注释，以@*开始，以***@结束。是一种通用注释，可以注释C#代码、HTML和Razor指令。

示例

<ul>
    <li>
        @* 使用Razor注释
        @if (!string.IsNullOrEmpty(Name))
        {
        <text>
        你好
        123
        </text>
        }
        else
        {
        @:Hello
        }
        *@
    </li>
    <!-- <li></li> -->
</ul>
@code{
    //这里面可以使用C#注释
}