前言

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