在介紹魔術前，要先跟大家展示的是魔術道具，不了解道具的魔術師，不是好的魔術師。

Blazor = Browser + Razor

Browser 是瀏覽器，而 Razor 是什麼呢？Razor 是將伺服器程式碼內嵌到網頁中的標記語法，透過 Razor 標記、C# 和 HTML 所組合成的，而我們的元件實作於 Razor 檔(.razor)，所以 Razor 可說是至關重要啊！

Razor 語法使用 @ 將 HTML 檔案轉譯成 C#，Razor 會評估 C# 運算式並輸出成 HTML，只有當 @ 後面接著 Razor 保留關鍵字時，它才會轉換成 Razor 特定的標記，否則只會轉換成一般 C#。

若只是想在 HTML 中使用 @ 符號而不想轉成 C# 時，就需要使用第二個 @ 符號來進行跳脫字元：

1
<p>@@文字</p>

HTML 屬性及含有電子郵件地址的內容不會將 @ 符號視為轉換字元，下列範例中的電子郵件地址並不會藉由剖析而變成 Razor 語句：

1
<a href="mailto:mio093611@gmail.com">mio093611@gmail.com</a>

隱式 Razor 運算式

透過將變數前面加一個 @ 來轉換成 Razor 語句：

1
<p>@DateTime.Now</p>

除了連接 C# 關鍵字 await 與具有明確結束字元的陳述式外，隱式運算式是不能包含空格的！

1
2
<p>@await DoSomethingAsync()</p>
<p>@DoSomething(1, 2)</p>

注意：隱式運算式不能包含 C# 泛型，因為括弧 (<>) 內的字元會解譯為 HTML 標籤，所以下列程式碼是無效的：

1
<p>@GenericMethod<int>()</p>

顯式 Razor 運算式

透過將 @() 內的所有內容轉換成 Razor 語句：

1
2
@* 顯示 7 天前的時間 *@
<p>@(DateTime.Now - TimeSpan.FromDays(7))</p>

顯式運算式可以防止 Razor 誤判電子信箱：

1
<p>mio@(123)</p>

以及使用 C# 泛型：

1
<p>@(GenericMethod<int>())</p>

Razor 程式碼區塊

Razor 程式碼區塊會以 @ 開頭，並以 {} 括住表示範疇，不同於運算式，程式碼區塊內的 C# 程式碼並不會被轉譯。

1
2
3
4
5
@{
    var mio = new Person("Joe", 26);
}

<p>Age@(mio.Age)</p>

也可以放置區域函式，但不建議這樣使用，明天的內容會提及區域函式該怎麼寫。

1
2
3
4
5
6
7
8
9
@{
    void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }

    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}

程式碼會轉譯成下列 HTML：

1
2
<p>Name: <strong>Mahatma Gandhi</strong></p>
<p>Name: <strong>Martin Luther King, Jr.</strong></p>

若想在程式碼區塊中改寫回 HTML，可以直接在區塊內使用 HTML 標籤就能自動轉回 HTML：

1
2
3
4
@{
    var inCSharp = true;
    <p>Now in HTML, was in C# @inCSharp</p>
}

若擔心使用 HTML 標籤會破壞 HTML 結構，可以使用 @: 來進行單行轉回 HTML：

1
2
3
4
@{
    var inCSharp = true;
    @:Now in HTML, was in C# @inCSharp
}

或使用 <text> 標籤來進行多行轉換：

1
2
3
4
5
6
@{
    var inCSharp = true;
    <text>
        Now in HTML, was in C# @inCSharp
    </text>
}

所以你也可以這樣寫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@{
    var name = "Mio";
    <text>
        <p>這裡的名稱是 @name</p>
        @{
            name = "Rascal";
            @: 這裡的名稱是 @name, 且沒有 HTML 標籤
            <text>
                <p>這裡的名稱是 @name, 並被 p 包住</p>
                @{
                    name = "Kabimon";
                    <text>
                       <p>這裡的名稱是 @name, 是最底層的 HTML !!!</p>
                    </text>
                }
            </text>
        }
    </text>
}

將 HTML 轉成 C#，再把 C# 轉回 HTML，再轉轉轉轉轉都是合法的語句，但非常不建議這樣做。

註解

有兩種方式可以在 razor 檔案中註解：

  1. 轉成 C# 在使用 C# 的註解方式。
1
2
3
4
@{
    /* C# comment */
    // Another C# comment
}
  1. 透過 @* *@ 來劃定註解，使 Razor 轉譯時會移除註解內容。
1
@*  *@

參考資料
Razor ASP.NET Core 的語法參考