ASP.NET Core – Razor Syntax

前言

Full stack 的问题就是经常需要一阵子离开一个环境. 比如我跑去写 Angular 几个月. 回来写 Razor, 肯定是卡卡的.

尤其是一些比较不常用到的语法. 所以有一个很好的笔记就很重要了. 以前我都懒的写, 但这半年我整理了很多, 也体会到这样做确实是很方便.

毕竟人家写的是教程, 但是我只是要复习丫, 自然是看自己的笔记最舒服.

这里记入一些我常用到的

参考

Docs – Razor syntax reference for ASP.NET Core

1. 当想写 @ 时

@ 是特殊字符, 用来切换 to C#, 所以下面会报错

解决方法就是写 double @@

<h1>value @@ value</h1>

最后只会输出 1 个

题外话: C# 的 quote "

C# 的 quote 也是类似的方式破解.

var value1 = "class="abc""; // 语法错误
var value2 = "class=\"abc\""; // 用反斜杠破
var value3 = @"class=""abc"""; // 用 @ + double "" 破

2. 当在 C# 作用域想输出 HTML text

<text>

用 <text> 标签可以切换回 HTML 作用域, 但 <text> 是 Razor 特别的 tag 最终不会 render, 类似 <ng-container>

<h1>@if (true)
  {
    <text>Hello World</text>
  }
  else
  {
    <text>Derrick</text>
  }</h1>

上面这个只是作为一个例子, 更好的写法是

<h1>@(true ? "Hello World" : "Derrick")</h1>

@:

还有这种写法

<h1>@if (true)
  {
    @:my text
  }
</h1>

3. 拼接 attribute

用 Html.Raw, 这个是最安全的做法, 什么情况都不会坏掉

@{
  var value = "value";
}
<h1 @(true ? Html.Raw($"class={value} abc") : "")>Hello World</h1>

如果简单一点的话可以这样写.

<h1 @(true ? "class=abc" : "")>Hello World</h1>

注意 class 不需要 quote 哦.

<h1 @(true ? $"class={value}" : "")>Hello World</h1> 
<h1 @(true ? $"class={value} abc" : "")>Hello World</h1>

第一行是 ok 的, 第二行是错误的

所以最好还是用 Html.Raw

@namespace

参考: Docs – @namespace

在 _ViewImports.cshtml 里面有一个 @namespace

@namespace Hello.World
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

之后所有的 view 都会依据 folder 给予 namespace

我踩过一个坑. 在一个 view 中想引入我的 Library Stooges

但我的 folder 结果里也有一个同名的 Stooges

于是就 error 了. 解决方法是避开这种撞名字的情况. 不建议去修改 @namespace 的逻辑.