ASP.NET Core 的 Razor 語法參考

發行項
04/25/2023

作者： Rick Anderson、 Taylor Mullen和 Dan Vicarel

Razor 是將 .NET 型程式碼內嵌至網頁的標記語法。語法 Razor 是由 Razor 標記、C# 和 HTML 所組成。包含 Razor 的檔案通常具有 .cshtml 副檔名。 Razor也可以在元件檔案中找到Razor (.razor) 。 Razor語法類似于各種 JavaScript 單頁應用程式的範本化引擎， (SPA) 架構，例如 Angular、React、VueJs 和 Svelte。如需詳細資訊，請參閱本文所述的功能自 ASP.NET Core 3.0 起過時。

使用 Razor ASP.NET Web 程式設計簡介語法提供許多使用 Razor 語法進行程式設計的範例。雖然主題是針對 ASP.NET 而非 ASP.NET Core所撰寫，但大部分的範例都適用于 ASP.NET Core。

轉譯 HTML

預設 Razor 語言為 HTML。從 Razor 標記轉譯 HTML 與從 HTML 檔案轉譯 HTML 並無不同。檔案中的 .cshtmlRazor HTML 標籤會由伺服器轉譯為未變更。

Razor 語法

Razor 支援 C# 並使用 @ 符號從 HTML 轉換至 C#。 Razor 會評估 C# 運算式，並在 HTML 輸出中轉譯它們。

@符號後面接著Razor 保留關鍵字時，它會轉換成 Razor 特定的標記。否則，它會轉換成純 HTML。

若要逸出 @ 標記中的 Razor 符號，請使用第二 @ 個符號：

<p>@@Username</p>

此程式碼在 HTML 中是使用單一 @ 符號轉譯：

<p>@Username</p>

HTML 屬性及含有電子郵件地址的內容不會將 @ 符號視為轉換字元。下列範例中的電子郵件地址未經剖析所變更 Razor ：

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

可變式向量圖形 (SVG)

支援SVG foreignObject元素：

@{
    string message = "foreignObject example with Scalable Vector Graphics (SVG)";
}

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" rx="10" ry="10" width="200" height="200" stroke="black" 
        fill="none" />
    <foreignObject x="20" y="20" width="160" height="160">
        <p>@message</p>
    </foreignObject>
</svg>

隱含 Razor 運算式

隱含 Razor 運算式以開頭 @ ，後面接著 C# 程式碼：

<p>@DateTime.Now</p>
<p>@DateTime.IsLeapYear(2016)</p>

除了 C# await 關鍵字以外，隱含運算式不能包含空格。如果 C# 陳述式具有明確的結束字元，則可以混合空格：

<p>@await DoSomething("hello", "world")</p>

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

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

上述程式碼會產生類似下列其中一項的編譯器錯誤：

"Int" 項目未關閉。所有項目都必須自行結束或具有相對應的結束標籤。
無法將方法群組 'GenericMethod' 轉換成非委派類型 'type'。您是否想要叫用方法？

泛型方法呼叫必須包裝在明確 Razor 運算式或Razor 程式碼區塊中。

明確 Razor 運算式

明確 Razor 運算式是由 @ 具有平衡括弧的符號所組成。若要轉譯上周的時間，會使用下列 Razor 標記：

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

@() 括弧內的任何內容都會經過評估並轉譯成輸出。

上一節中所述的隱含運算式通常不能包含空格。在下列程式碼中，不會從目前的時間減去一週：

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

程式碼會轉譯下列 HTML：

<p>Last week: 7/7/2016 4:39:52 PM - TimeSpan.FromDays(7)</p>

明確運算式可用來串連文字與運算式結果：

@{
    var joe = new Person("Joe", 33);
}

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

若沒有明確運算式，Age@joe.Age 會視為電子郵件地址，並轉譯 Age@joe.Age。當撰寫為明確運算式時，會轉譯 Age33。

明確運算式可用來轉譯檔案中泛型方法的 .cshtml 輸出。下列標記會顯示如何修正稍早顯示的錯誤，此錯誤是由 C# 泛型的括弧所造成。程式碼會撰寫為明確運算式：

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

運算式編碼

評估為字串的 C# 運算式會以 HTML 編碼。評估為 IHtmlContent 的 C# 運算式會透過 IHtmlContent.WriteTo 直接轉譯。未評估為 IHtmlContent 的 C# 運算式會由 ToString 轉換成字串，並經過編碼再轉譯。

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

上述程式碼會轉譯下列 HTML：

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

HTML 會顯示在瀏覽器中為純文字：

Hello World

HtmlHelper.Raw 輸出不會經過編碼，而是轉譯為 HTML 標記。

警告

對未清理的使用者輸入使用 HtmlHelper.Raw 會造成安全性風險。使用者輸入可能包含惡意的 JavaScript 或其他惡意探索。清理使用者輸入並不容易。請避免對使用者輸入使用 HtmlHelper.Raw。

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

程式碼會轉譯下列 HTML：

<span>Hello World</span>

Razor 程式碼區塊

Razor 程式碼區塊以 @ 開頭，並以括住 {} 。不同於運算式，程式碼區塊內的 C# 程式碼不會轉譯。一個檢視中的程式碼區塊和運算式會共用相同的範圍並依序定義：

@{
    var quote = "The future depends on what you do today. - Mahatma Gandhi";
}

<p>@quote</p>

@{
    quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.";
}

<p>@quote</p>

程式碼會轉譯下列 HTML：

<p>The future depends on what you do today. - Mahatma Gandhi</p>
<p>Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.</p>

在程式碼區塊中，使用標記宣告區域函式作為樣板化方法：

@{
    void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }

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

程式碼會轉譯下列 HTML：

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

隱含轉換

程式碼區塊中的預設語言是 C#，但 Razor Page 可以轉換回 HTML：

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

明確分隔的轉換

若要定義應該轉譯 HTML 的程式碼區塊子區段，請使用標記括住要轉譯的 Razor<text> 字元：

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <text>Name: @person.Name</text>
}

使用此方法可轉譯未以 HTML 標籤括住的 HTML。如果沒有 HTML 或 Razor 標記，就會 Razor 發生執行階段錯誤。

<text> 標籤可在轉譯內容時用來控制空白字元：

只會轉譯 <text> 標籤之間的內容。
在 HTML 輸出中，<text> 標籤前後都不能出現任何空白字元。

明確線條轉換

若要將整個行的其餘部分轉譯為程式碼區塊內的 HTML，請使用 @: 語法：

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    @:Name: @person.Name
}

@:如果沒有程式碼中的， Razor 就會產生執行階段錯誤。

檔案中的 Razor 額外 @ 字元可能會導致區塊稍後的語句發生編譯器錯誤。這些額外的 @ 編譯器錯誤：

可能難以瞭解，因為實際錯誤發生在回報的錯誤之前。
將多個隱含和明確運算式結合成單一程式碼區塊之後，很常見。

條件屬性轉譯

Razor 會自動省略不需要的屬性。如果傳入的值是 null 或 false ，則不會轉譯屬性。

例如，請考慮下列 razor：

<div class="@false">False</div>
<div class="@null">Null</div>
<div class="@("")">Empty</div>
<div class="@("false")">False String</div>
<div class="@("active")">String</div>
<input type="checkbox" checked="@true" name="true" />
<input type="checkbox" checked="@false" name="false" />
<input type="checkbox" checked="@null" name="null" />

上述 Razor 標記會產生下列 HTML：

<div>False</div>
<div>Null</div>
<div class="">Empty</div>
<div class="false">False String</div>
<div class="active">String</div>
<input type="checkbox" checked="checked" name="true">
<input type="checkbox" name="false">
<input type="checkbox" name="null">

控制結構

控制結構是程式碼區塊的延伸。程式碼區塊的所有層面 (轉換成標記、內嵌 C#) 也適用於下列結構：

條件 `@if, else if, else, and @switch`

@if 控制何時執行程式碼：

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

else 和 else if 不需要 @ 符號：

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}
else if (value >= 1337)
{
    <p>The value is large.</p>
}
else
{
    <p>The value is odd and small.</p>
}

下列標記示範如何使用 switch 陳述式：

@switch (value)
{
    case 1:
        <p>The value is 1!</p>
        break;
    case 1337:
        <p>Your number is 1337!</p>
        break;
    default:
        <p>Your number wasn't 1 or 1337.</p>
        break;
}

迴圈 `@for, @foreach, @while, and @do while`

樣板化 HTML 可以透過迴圈控制陳述式轉譯。若要轉譯人員清單：

@{
    var people = new Person[]
    {
          new Person("Weston", 33),
          new Person("Johnathon", 41),
          ...
    };
}

支援的迴圈陳述式如下：

@for

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@foreach

@foreach (var person in people)
{
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@while

@{ var i = 0; }
@while (i < people.Length)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
}

@do while

@{ var i = 0; }
@do
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
} while (i < people.Length);

複合 `@using`

在 C# 中，using 陳述式可用來確保物件經過處置。在 Razor 中，會使用相同的機制來建立包含其他內容的 HTML 協助程式。在下列程式碼中，HTML 協助程式會使用 @using 陳述式來轉譯 <form> 標籤：

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

`@try, catch, finally`

例外狀況處理會類似於 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>
}

`@lock`

Razor 具有使用 lock 語句保護重要區段的功能：

@lock (SomeLock)
{
    // Do critical section work
}

註解

Razor 支援 C# 和 HTML 批註：

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

程式碼會轉譯下列 HTML：

<!-- HTML comment -->

Razor 在轉譯網頁之前，伺服器會移除批註。 Razor 會使用 @* *@ 分隔批註。下列程式碼會標記為註解，以確保伺服器不會轉譯任何標記：

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

指示詞

Razor 指示詞是由隱含運算式所表示，其具有符號後面的 @ 保留關鍵字。指示詞通常會變更檢視的剖析方式或啟用不同的功能。

瞭解如何 Razor 為檢視產生程式碼，可讓您更輕鬆地瞭解指示詞的運作方式。

@{
    var quote = "Getting old ain't for wimps! - Anonymous";
}

<div>Quote of the Day: @quote</div>

程式碼會產生類似如下的類別：

public class _Views_Something_cshtml : RazorPage<dynamic>
{
    public override async Task ExecuteAsync()
    {
        var output = "Getting old ain't for wimps! - Anonymous";

        WriteLiteral("/r/n<div>Quote of the Day: ");
        Write(output);
        WriteLiteral("</div>");
    }
}

Later in this article, the section Inspect the Razor C# class generated for a view explains how to view this generated class.

`@attribute`

@attribute 指示詞會將指定屬性新增至所產生頁面或檢視的類別。下列範例會新增 [Authorize] 屬性：

@attribute [Authorize]

指示 @attribute 詞也可以用來在元件中 Razor 提供常數型路由範本。在下列範例中， @page 元件中的指示詞會取代為 @attribute 指示詞，並將中的 Constants.CounterRoute 常數型路由範本取代為 /counter ，其設定為「」：

- @page "/counter"
+ @attribute [Route(Constants.CounterRoute)]

`@code`

此案例僅適用于 Razor () .razor 的元件。

區塊 @code 可讓Razor 元件將 C# 成員新增至元件 (欄位、屬性和方法) ：

@code {
    // C# members (fields, properties, and methods)
}

對於 Razor 元件， @code 是的 @functions 別名，建議用於 @functions 。允許一個以上的 @code 區塊。

`@functions`

@functions 指示詞能夠將 C# 成員 (欄位、屬性和方法) 新增至產生的類別：

@functions {
    // C# members (fields, properties, and methods)
}

在元件中 Razor，使用 @code over @functions 來新增 C# 成員。

例如：

@functions {
    public string GetHello()
    {
        return "Hello";
    }
}

<div>From method: @GetHello()</div>

程式碼會產生下列 HTML 標記：

<div>From method: Hello</div>

下列程式碼是產生的 Razor C# 類別：

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.Razor;

public class _Views_Home_Test_cshtml : RazorPage<dynamic>
{
    // Functions placed between here 
    public string GetHello()
    {
        return "Hello";
    }
    // And here.
#pragma warning disable 1998
    public override async Task ExecuteAsync()
    {
        WriteLiteral("\r\n<div>From method: ");
        Write(GetHello());
        WriteLiteral("</div>\r\n");
    }
#pragma warning restore 1998

具有標記時，@functions 方法會作為樣板化方法：

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

@functions {
    private void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }
}

程式碼會轉譯下列 HTML：

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

`@implements`

@implements 指示詞會針對產生的類別實作介面。

下列範例會實作 System.IDisposable，如此便能呼叫 Dispose 方法：

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

    public void Dispose() => _isDisposed = true;
}

`@inherits`

@inherits 指示詞可讓您完全控制檢視所繼承的類別：

@inherits TypeNameOfClassToInheritFrom

下列程式碼是自訂 Razor 頁面類型：

using Microsoft.AspNetCore.Mvc.Razor;

public abstract class CustomRazorPage<TModel> : RazorPage<TModel>
{
    public string CustomText { get; } = 
        "Gardyloo! - A Scottish warning yelled from a window before dumping" +
        "a slop bucket on the street below.";
}

CustomText 會顯示在檢視中：

@inherits CustomRazorPage<TModel>

<div>Custom text: @CustomText</div>

程式碼會轉譯下列 HTML：

<div>
    Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping
    a slop bucket on the street below.
</div>

@model 和 @inherits 可用於相同的檢視。 @inherits 可以在檢視匯入的檔案中 _ViewImports.cshtml ：

@inherits CustomRazorPage<TModel>

下列程式碼是強型別檢視的範例：

@inherits CustomRazorPage<TModel>

<div>The Login Email: @Model.Email</div>
<div>Custom text: @CustomText</div>

如果模型中傳遞了 "rick@contoso.com"，檢視會產生下列 HTML 標記：

<div>The Login Email: rick@contoso.com</div>
<div>
    Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping
    a slop bucket on the street below.
</div>

`@inject`

指示 @inject 詞可讓 Razor Page 將服務容器中的服務插入檢視。如需詳細資訊，請參閱在檢視中插入相依性。

`@layout`

此案例僅適用于 Razor () .razor 的元件。

指示 @layout 詞會指定具有 @page 指示詞之可 Razor 路由傳送元件的版面配置。版面配置元件可用來避免程式碼重複和不一致。如需詳細資訊，請參閱ASP.NET Core Blazor 版面配置。

`@model`

此案例僅適用于 MVC 檢視和 Razor 頁面 (.cshtml) 。

@model 指示詞會指定傳遞至檢視或頁面的模型類型：

@model TypeNameOfModel

在以個別使用者帳戶建立的 ASP.NET Core MVC 或 Razor Pages 應用程式中， Views/Account/Login.cshtml 包含下列模型宣告：

@model LoginViewModel

產生的類別繼承自 RazorPage<LoginViewModel>：

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

RazorModel會公開屬性，以存取傳遞至檢視的模型：

<div>The Login Email: @Model.Email</div>

@model 指示詞會指定 Model 屬性的類型。該指示詞會將 RazorPage<T> 中的 T 指定為檢視從中衍生的產生類別。若未指定 @model 指示詞，Model 屬性的類型為 dynamic。如需詳細資訊，請參閱Strongly typed models and the @model keyword。

`@namespace`

@namespace 指示詞：

設定所 Razor 產生頁面、MVC 檢視或 Razor 元件類別的命名空間。
從目錄樹狀目錄中最接近的匯入檔案，設定頁面、檢視或元件類別的根衍生命名空間， _ViewImports.cshtml (檢視或頁面) 或 _Imports.razor (元件) Razor 。

@namespace Your.Namespace.Here

下表所示的 Razor Pages 範例：

每個頁面都會匯入 Pages/_ViewImports.cshtml 。
Pages/_ViewImports.cshtml 包含 @namespace Hello.World 。
每個頁面都有 Hello.World 作為其命名空間的根目錄。

頁面	命名空間
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Hello.World.MorePages.EvenMorePages`

上述關聯性適用于匯入與 MVC 檢視和 Razor 元件搭配使用的檔案。

當多個匯入檔案具有 @namespace 指示詞時，會使用目錄樹狀結構中最接近頁面、檢視或元件的檔案來設定根命名空間。

EvenMorePages如果上述範例中的資料夾具有具有 (的匯入檔案 @namespace Another.Planet ，或 Pages/MorePages/EvenMorePages/Page.cshtml 檔案包含 @namespace Another.Planet) ，下表會顯示結果。

頁面	命名空間
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Another.Planet`

`@page`

@page 指示詞會根據其出現的檔案類型而有不同的效果。指示詞：

在檔案 .cshtml 中，表示檔案是 Razor Page。如需詳細資訊，請參閱自訂路由和ASP.NET Core中的頁面簡介 Razor。
指定 Razor 元件應該直接處理要求。如需詳細資訊，請參閱ASP.NET Core Blazor 路由和導覽。

`@preservewhitespace`

此案例僅適用于 Razor () .razor 的元件。

當設定為 false (預設) 時，如果下列專案會移除 () 中轉譯標記 Razor.razor 中的空白字元：

在元素內前置或後置。
參數內的 RenderFragment 前置或尾端。例如，傳遞至另一個元件的子內容。
其在 C# 程式碼區塊之前或之後，例如 @if 或 @foreach。

`@section`

此案例僅適用于 MVC 檢視和 Razor 頁面 (.cshtml) 。

指示 @section 詞會與 MVC 和 Razor Pages 版面配置搭配使用，讓檢視或頁面轉譯 HTML 頁面不同部分的內容。如需詳細資訊，請參 ASP.NET 中的配置。

`@using`

@using 指示詞會將 C# using 指示詞新增至產生的檢視：

@using System.IO
@{
    var dir = Directory.GetCurrentDirectory();
}
<p>@dir</p>

在Razor 元件中， @using 也會控制哪些元件位於範圍內。

指示詞屬性

Razor 指示詞屬性是由隱含運算式所表示，其具有符號後面的 @ 保留關鍵字。指示詞屬性通常會變更專案剖析或啟用不同功能的方式。

`@attributes`

此案例僅適用于 Razor () .razor 的元件。

@attributes 允許元件轉譯非宣告的屬性。如需詳細資訊，請參閱ASP.NET Core Razor 元件。

`@bind`

此案例僅適用于 Razor 元件 (.razor) 。

元件中的資料繫結會使用 @bind 屬性來完成。如需詳細資訊，請參閱ASP.NET Core Blazor 資料系結。

`@bind:culture`

此案例僅適用于 Razor 元件 (.razor) 。

使用 @bind:culture 屬性搭配 @bind 屬性來提供 System.Globalization.CultureInfo ，以便剖析和格式化值。如需詳細資訊，請參閱ASP.NET Core Blazor 全球化和當地語系化。

`@on{EVENT}`

此案例僅適用于 Razor 元件 (.razor) 。

Razor 提供元件的事件處理功能。如需詳細資訊，請參閱ASP.NET Core Blazor 事件處理。

`@on{EVENT}:preventDefault`

此案例僅適用于 Razor 元件 (.razor) 。

防止事件的預設動作。

`@on{EVENT}:stopPropagation`

此案例僅適用于 Razor 元件 (.razor) 。

停止事件的事件傳播。

`@key`

此案例僅適用于 Razor 元件 (.razor) 。

@key 指示詞屬性導致元件差異比較演算法會根據索引鍵的值來保證元素或元件的保留。如需詳細資訊，請參閱ASP.NET Core Razor 元件。

`@ref`

此案例僅適用于 Razor 元件 (.razor) 。

元件參考 (@ref) 提供一種方式來參考元件執行個體，讓您可以對該執行個體發出命令。如需詳細資訊，請參閱ASP.NET Core Razor 元件。

`@typeparam`

此案例僅適用于 Razor 元件 (.razor) 。

@typeparam 指示詞會宣告所產生元件類別的一般類型參數：

@typeparam TEntity

支援具有型別條件約束的 where 泛型型別：

@typeparam TEntity where TEntity : IEntity

如需詳細資訊，請參閱下列文章：

`@typeparam`

此案例僅適用于 Razor 元件 (.razor) 。

@typeparam 指示詞會宣告所產生元件類別的一般類型參數：

@typeparam TEntity

如需詳細資訊，請參閱下列文章：

樣板化 Razor 委派

Razor 範本可讓您使用下列格式來定義 UI 程式碼片段：

@<tag>...</tag>

下列範例說明如何將樣板化 Razor 委派指定為 Func<T,TResult> 。該範例會指定 dynamic 類型作為委派所封裝方法的參數。並指定 object 類型作為委派的傳回值。此範本會搭配具有 Name 屬性之 Pet 的 List<T> 來使用。

public class Pet
{
    public string Name { get; set; }
}

@{
    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 陳述式所提供的 pets 進行轉譯：

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

轉譯輸出：

<p>You have a pet named <strong>Rin Tin Tin</strong>.</p>
<p>You have a pet named <strong>Mr. Bigglesworth</strong>.</p>
<p>You have a pet named <strong>K-9</strong>.</p>

您也可以提供內嵌 Razor 範本做為方法的引數。在下列範例中 Repeat ，方法會 Razor 接收範本。此方法使用範本來產生 HTML 內容，並重複出現清單所提供的項目：

@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;
    }
}

使用先前範例中的寵物清單，呼叫 Repeat 方法並指定：

List<T> 的 Pet。
每個寵物的重複次數。
用於未排序清單中清單項目的內嵌範本。

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

轉譯輸出：

<ul>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>K-9</li>
    <li>K-9</li>
    <li>K-9</li>
</ul>

標籤協助程式

此案例僅適用于 MVC 檢視和 Razor 頁面 (.cshtml) 。

標籤協助程式有三個相關的指示詞。

指示詞	函式
`@addTagHelper`	使標籤協助程式可供檢視。
`@removeTagHelper`	移除先前從檢視新增的標籤協助程式。
`@tagHelperPrefix`	指定標籤前置字元，以啟用標籤協助程式支援，並將標籤協助程式使用方式設為明確。

Razor 保留關鍵字

Razor 關鍵字

page
namespace
functions
inherits
model
section
helper (目前不支援 ASP.NET Core)

Razor 關鍵字會以 @(Razor Keyword) (逸出，例如) @(functions) 。

C# Razor 關鍵字

case
do
default
for
foreach
if
else
lock
switch
try
catch
finally
using
while

C# Razor 關鍵字必須使用雙逸 @(@C# Razor Keyword) 出，例如 () @(@case) 。第一個 @ 會逸 Razor 出剖析器。第二個 @ 會將 C# 剖析器逸出。

未使用的保留關鍵字 Razor

class

Razor檢查為檢視產生的 C# 類別

SDK 會Razor處理檔案的 Razor 編譯。根據預設，產生的程式碼檔案不會發出。若要啟用發出程式碼檔案，請將 EmitCompilerGeneratedFiles 專案檔中的指示詞 (.csproj) 設定為 true ：

<PropertyGroup>
  <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
</PropertyGroup>

在組建組態中 Debug 建置 6.0 專案 (net6.0) 時， Razor SDK 會在 obj/Debug/net6.0/generated/ 專案根目錄中產生目錄。其子目錄包含發出的 Razor 頁面代碼檔案。

SDK 會Razor處理檔案的 Razor 編譯。建置專案時， Razor SDK 會在 obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor 專案根目錄中產生目錄。目錄中的 Razor 目錄結構會鏡像專案的目錄結構。

請考慮 ASP.NET Core Razor Pages 2.1 專案中的下列目錄結構：

 Areas/
   Admin/
     Pages/
       Index.cshtml
       Index.cshtml.cs
 Pages/
   Shared/
     _Layout.cshtml
   _ViewImports.cshtml
   _ViewStart.cshtml
   Index.cshtml
   Index.cshtml.cs

在組態中建置 Debug 專案會產生下列 obj 目錄：

 obj/
   Debug/
     netcoreapp2.1/
       Razor/
         Areas/
           Admin/
             Pages/
               Index.g.cshtml.cs
         Pages/
           Shared/
             _Layout.g.cshtml.cs
           _ViewImports.g.cshtml.cs
           _ViewStart.g.cshtml.cs
           Index.g.cshtml.cs

若要檢視產生的類別 Pages/Index.cshtml ，請開啟 obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs 。

檢視查閱和區分大小寫

檢 Razor 視引擎會針對檢視執行區分大小寫的查閱。不過，實際查閱則取決於基礎檔案系統：

檔案式來源：
- 在具有不區分大小寫之檔案系統的作業系統上 (例如 Windows)，實體檔案提供者查閱不會區分大小寫。例如， return View("Test") 會產生、 /Views/home/test.cshtml 和任何其他大小寫變數的相符 /Views/Home/Test.cshtml 專案。
- 在區分大小寫的檔案系統上 (例如 Linux、OSX 及使用 EmbeddedFileProvider)，查閱會區分大小寫。例如， return View("Test") 特別符合 /Views/Home/Test.cshtml 。
先行編譯的檢視：在 ASP.NET Core 2.0 和更新版本中，在所有作業系統上查閱先行編譯的檢視不會區分大小寫。此行為與 Windows 上之實體檔案提供者的行為相同。如果兩個先行編譯的檢視只有大小寫不同，查閱的結果不會由此決定。

建議開發人員比對檔案和目錄的大小寫以及下列項目的大小寫：

區域、控制器和動作名稱。
Razor 頁面。

比對大小寫可確保不論基礎檔案系統為何，部署作業都能夠找到其值。

所使用的匯入 Razor

下列匯入是由 ASP.NET Core Web 範本所產生，以支援 Razor 檔案：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;

其他資源

使用 Razor ASP.NET Web 程式設計簡介語法提供許多使用 Razor 語法進行程式設計的範例。

ASP.NET Core 的 Razor 語法參考

轉譯 HTML

Razor 語法

可變式向量圖形 (SVG)

隱含 Razor 運算式

明確 Razor 運算式

運算式編碼

Razor 程式碼區塊

隱含轉換

明確分隔的轉換

明確線條轉換

條件屬性轉譯

控制結構

條件 @if, else if, else, and @switch

迴圈 @for, @foreach, @while, and @do while

複合 @using

@try, catch, finally

@lock

註解

指示詞

@attribute

@code

@functions

@implements

@inherits

@inject

@layout

@model

@namespace

@page

@preservewhitespace

@section

@using

指示詞屬性

@attributes

@bind

@bind:culture

@on{EVENT}

@on{EVENT}:preventDefault

@on{EVENT}:stopPropagation

@key

@ref

@typeparam

@typeparam

樣板化 Razor 委派

標籤協助程式

Razor 保留關鍵字

Razor 關鍵 字

C# Razor 關鍵字

未使用的保留關鍵字 Razor

Razor檢查為檢視產生的 C# 類別

檢視查閱和區分大小寫

所使用的匯入 Razor

其他資源

其他資源

其他資源

條件 `@if, else if, else, and @switch`

迴圈 `@for, @foreach, @while, and @do while`

複合 `@using`

`@try, catch, finally`

`@lock`

`@attribute`

`@code`

`@functions`

`@implements`

`@inherits`

`@inject`

`@layout`

`@model`

`@namespace`

`@page`

`@preservewhitespace`

`@section`

`@using`

`@attributes`

`@bind`

`@bind:culture`

`@on{EVENT}`

`@on{EVENT}:preventDefault`

`@on{EVENT}:stopPropagation`

`@key`

`@ref`

`@typeparam`

`@typeparam`

Razor 關鍵字