Razor syntax

Posted on 2019-05-18 Edited on 2023-11-24 In ASP.NET MVC Views: Disqus:

一、「@」保留字

在 Razor 語法中，「@」是保留字，

當想要秀出「@」字元時，可以再加上第二個「@」字元,，於 CSHTML 寫法如下

<p>@@Username</p>

而所呈現的 HTML 將會是

<p>@Username</p>

二、email addresses 格式的「@」字元

Razor 對 email addresses 格式的「@」字元不會把他看成是保留字，於 CSHTML 寫法如下

<a href="mailto:Support@contoso.com">Support@contoso.com</a>

於瀏覽器呈現的畫面為

另外一特點，只要是「@」字元前後都有緊接英文或數字的話，也不會被看成是保留字

<p>abc@abc</p>

<p>123@abc</p>

<p>123@123</p>

於瀏覽器呈現的畫面為

三、Razor expressions

用來將 C# 的值呈現在 HTML 上

1、Implicit Razor expressions

於 CSHTML 寫法如下

<p>@DateTime.Now</p>

2、Explicit Razor expressions

於 CSHTML 寫法如下

<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>

3、Helpers belong to Razor expressions

雖然我不是很確定，但目前我會把 @Html、@Url…等等的 Helpers 歸類為 Razor expressions，

如有錯誤請指正。

4、結合 code block 的型式

這是結合 code block 的型式，使用 Implicit Razor expressions 或 Explicit Razor expressions，

都可以將 C# 的值呈現在 HTML 上

@{
    string hello = "Hello";
}

<p>@hello</p>

<p>@(hello)</p>

四、Expression encoding

1、於 CSHTML 寫法如下

@("<span>Hello World</span>")

而所呈現的 HTML 將會是

&lt;span&gt;Hello World&lt;/span&gt;

於瀏覽器呈現的畫面為

2、於 CSHTML 寫法如下

@Html.Raw("<span>Hello World</span>")

而所呈現的 HTML 將會是

<span>Hello World</span>

於瀏覽器呈現的畫面為

五、Razor code blocks

Razor code blocks 可以與 Razor expressions 相配合。

在 Razor code blocks 裡，如果你想將 C# 變數呈現到 HTML 則變數前要加「@」字元，

若否，則不用加。

1、Implicit transitions

於 CSHTML 寫法如下

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

於瀏覽器呈現的畫面為

2、Explicit delimited transition

於 CSHTML 寫法如下

@for (var i = 0; i < 5; i++)
{
    var digit = i;
    <p>digit: @digit</p>
}

於瀏覽器呈現的畫面為

3、Explicit Line Transition with @:

於 CSHTML 寫法如下

@{
    var inCSharp = true;
    @:Name: @inCSharp
}

於瀏覽器呈現的畫面為

六、keywords

1、Razor keyword - class

class 是屬於 Razor 關鍵字之一，所以在 Razor expressions 裡使用他時，

需要再加上「@」跳脫字元，如下

@Html.Label("StudentName", new { @class = "text-danger" })

2、Razor keywords

page (Requires ASP.NET Core 2.0 and later)

namespace

functions

inherits

model

section

helper (Not currently supported by ASP.NET Core)

以上通常只會使用一個跳脫字元「@」

3、C# Razor keywords

@switch、case、default

@try、catch、finally

@do、while

@if、else

@for、@foreach

@lock

@using

以上皆可使用兩次跳脫字元「@」，第一個「@」字元 for Razor parser，

第二個「@」字元 for C# parser，如下範例

@for (var i = 0; i < 5; i++)
{
    var digit = i;
    <p>digit: @digit</p>
}

相等於 Razor code blocks 寫法

@{
    for (var i = 0; i < 5; i++)
    {
        var digit = i;
        <p>digit: @digit</p>
    }
}

七、Comments

於 CSHTML 裡的 C# 與 HTML 的註解寫法如下

@{
    /* C# comment */
    // Another C# comment
}
<!-- HTML comment -->

所呈現的 HTML 將會是

<!-- HTML comment -->

而 Razor 註解的寫法則是使用 @**@ 寫法

@*
    @{
        /* C# comment */
        // Another C# comment
    }
    <!-- HTML comment -->
*@

八、Templated Razor delegates

Templated Razor delegates 基本寫法如下型式，

於 CSHTML 寫法如下

@{
    Func<dynamic, System.Web.WebPages.HelperResult> hello = @<p>Hello world</p>;
}

@hello(null)

於瀏覽器呈現的畫面為

另一範例

model

namespace WebApplication1.Models
{
    public class Pet
    {
        public string Name { get; set; }
    }
}

view

@using WebApplication1.Models

@{
    Func<dynamic, object> petTemplate = @<p>You have a pet named <strong>@item.Name</strong>.</p>;

    var pets = new List<Pet>
    {
        new Pet { Name = "Rin Tin Tin" },
        new Pet { Name = "Mr. Bigglesworth" },
        new Pet { Name = "K-9" }
    };
}

@foreach (var pet in pets)
{
    @petTemplate(pet)
}

於瀏覽器呈現的畫面為

另一 asp.net core 範例

model

namespace WebApplication1.Models
{
    public class Pet
    {
        public string Name { get; set; }
    }
}

view

@{
    var pets = new List<Pet>
{
    new Pet { Name = "Rin Tin Tin" },
    new Pet { Name = "Mr. Bigglesworth" },
    new Pet { Name = "K-9" }
    };
}

@using Microsoft.AspNetCore.Html

@functions {
    public static IHtmlContent Repeat(IEnumerable<dynamic> items, int times, Func<dynamic, IHtmlContent> template)
    {
        var html = new HtmlContentBuilder();

        foreach (var item in items)
        {
            for (var i = 0; i < times; i++)
            {
                html.AppendHtml(template(item));
            }
        }

        return html;
    }
}

<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

於瀏覽器呈現的畫面為

參考資料：

Razor syntax reference for ASP.NET Core