ASP.NET Core の Razor 構文リファレンス

[アーティクル]
11/30/2023

作成者: Rick Anderson、Taylor Mullen、Dan Vicarel

Razor は、Web ページに .NET ベースのコードを埋め込むためのマークアップ構文です。 Razor 構文は、Razor マークアップ、C#、HTML で構成されます。通常、Razor を含むファイルには、ファイル拡張子 .cshtml が付いています。 Razor は、Razorコンポーネントファイル (.razor) にも含まれています。 Razor の構文は、Angular、React、VueJs、Svelte などのさまざまな JavaScript シングルページアプリケーション (SPA) フレームワークのテンプレートエンジンに似ています。詳細情報については、「この記事で説明されている機能は、ASP.NET Core 3.0 時点で古くなっています」を参照してください。

「Razor 構文を使用した ASP.NET Web プログラミングの概要」では、Razor 構文を使用したプログラミングのサンプルが多数提供されています。このトピックは ASP.NET Core ではなく ASP.NET 向けに記述されていますが、ほとんどのサンプルは ASP.NET Core に適用されます。

HTML のレンダリング

既定の Razor 言語は、HTML です。 Razor マークアップからの HTML のレンダリングは、HTML ファイルからの HTML のレンダリングと同じです。 .cshtmlRazor ファイル内の HTML マークアップは、変更されないままサーバーによってレンダリングされます。

Razor の構文

Razor では、C# がサポートされており、@ シンボルを使用して HTML を C# に移行します。 Razor では、C# の式を評価し、それらを HTML 出力にレンダリングします。

@ シンボルの後に Razor予約キーワードが続いている場合は、Razor 固有のマークアップに移行します。それ以外の場合は、プレーン HTML に移行します。

@ マークアップで @ シンボルをエスケープするには、2 つ目の Razor シンボルを使用します。

<p>@@Username</p>

HTML では、コードは 1 つの @ 記号でレンダリングされます。

<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>

暗黙的な式では、山かっこ (<>) の内側の文字は HTML タグとして解釈されるため、C# ジェネリックを含めることはできません。次のコードは有効ではありません。

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

上記のコードでは、次のいずれかのようなコンパイラエラーが生成されます。

The "int" element wasn't closed. All elements must be either self-closing or have a matching end tag. ("int" 要素が閉じられませんでした。すべての要素は、自己終了するか、対応する終了タグが存在する必要があります。)
メソッドグループ 'GenericMethod' を非デリゲート型 'object' に変換することはできません。このメソッドを呼び出しますか?

ジェネリックメソッド呼び出しは、明示的な Razor 式またはRazorコードブロックでラップする必要があります。

明示的な Razor 式

明示的な Razor 式は、@ シンボルと、バランスの取れたかっこで構成されます。 1 週間前の時刻を表示するには、次の Razor マークアップを使用します。

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

@() のかっこ内の内容が評価されて、出力にレンダリングされます。

前のセクションで説明した暗黙的な式は、一般に、スペースを含むことはできません。次のコードでは、現在時刻から 1 週間は減算されません。

<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 コードブロック

RazorRazor コードブロックは、@ で始まり、{} で囲まれます。式とは異なり、コードブロック内の 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> タグの間の内容だけがレンダリングされます。
<text> タグの前後にある空白文字は HTML の出力には表示されません。

明示的な行の遷移

残りの行全体をコードブロック内に HTML としてレンダリングするには、@: 構文を使います。

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

コードに @: がない場合、Razor ランタイムエラーが生成されます。

Razor ファイルに余分な @ 文字があると、ブロックの後続のステートメントでコンパイラエラーが発生することがあります。これらの追加の @ コンパイラエラーは:

実際のエラーは報告されたエラーより前で発生しているため、理解するのが難しい場合があります。
複数の暗黙的な式と明示的な式を 1 つのコードブロックに結合した後によく発生します。

条件付き属性のレンダリング

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 のコメントは、Web ページがレンダリングされる前に、サーバーによって削除されます。 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>");
    }
}

この記事で後述する「ビューに対して生成された Razor C# クラスを検査する」セクションでは、この生成されたクラスを表示する方法について説明します。

`@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 コンポーネントでは、@functions ではなく @code を使用して 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 ディレクティブでは、生成されたクラスのインターフェイスが実装されます。

次の例では、Dispose メソッドを呼び出せるように、System.IDisposable が実装されます。

@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 Page (.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>

Razor では、ビューに渡されるモデルにアクセスするための Model プロパティが公開されています。

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

@model ディレクティブにより、Model プロパティの型が指定されます。ディレクティブでは、ビューが派生する生成されたクラスの T を RazorPage<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 であることを示します。詳細については、「カスタムルート」と「Razor Pages の ASP.NET Core への導入」を参照してください。
Razor コンポーネントで要求を直接処理する必要があることを指定します。詳細については、「ASP.NET Core の Blazor ルーティングとナビゲーション」を参照してください。

`@preservewhitespace`

"このシナリオは、Razor コンポーネント (.razor) のみに適用されます。"

false (既定) に設定すると、Razor コンポーネント (.razor) からレンダリングされたマークアップ内の空白は、次の場合に削除されます。

要素内の先頭または末尾。
RenderFragment パラメーター内の先頭または末尾。別のコンポーネントに渡される子コンテンツなどです。
@if または @foreach のような、C# コードブロックの前か後にある。

`@rendermode`

"このシナリオは、Razor コンポーネント (.razor) のみに適用されます。"

Razor コンポーネントのレンダリングモードを設定します。

InteractiveServer: Blazor Server を使用して対話型のサーバーレンダリングを適用します。
InteractiveWebAssembly: Blazor WebAssembly を使用して、対話型の WebAssembly レンダリングを適用します。
InteractiveAuto: 最初に、Blazor Server を使用して対話型の WebAssembly レンダリングを適用します。それから、Blazor バンドルがダウンロードされた後のアクセスに対し、WebAssembly を使用して対話型の WebAssembly レンダリングを適用します。

コンポーネントインスタンスの場合:

<... @rendermode="InteractiveServer" />

コンポーネント定義内:

@rendermode InteractiveServer

Note

Blazor テンプレートには、より短い @rendermode 構文のためにアプリの _Imports ファイル (Components/_Imports.razor) の RenderMode の静的 using ディレクティブが含まれています。

@using static Microsoft.AspNetCore.Components.Web.RenderMode

上のディレクティブがない場合、コンポーネントは @rendermode 構文で静的 RenderMode クラスを明示的に指定する必要があります。

<Dialog @rendermode="RenderMode.InteractiveServer" />

ディレクティブ/ディレクティブ属性を使用したプリレンダリングの無効化に関するガイダンスなど、詳細については、「ASP.NET Core Blazor のレンダリングモード」を参照してください。

`@section`

"このシナリオは、MVC ビューと Razor Page (.cshtml) にのみ適用されます。"

@section ディレクティブを MVC および Razor Pages レイアウトと組み合わせて使用すると、HTML ページのさまざまな部分のコンテンツをビューやページでレンダリングできます。詳細については、「ASP.NET Core でのレイアウト」をご覧ください。

`@typeparam`

"このシナリオは、Razor コンポーネント (.razor) のみに適用されます。"

@typeparam ディレクティブによって、生成されるコンポーネントクラスのジェネリック型パラメーターを宣言します。

@typeparam TEntity

where 型制約のあるジェネリック型がサポートされています。

@typeparam TEntity where TEntity : IEntity

詳細については、次の記事を参照してください。

`@using`

@using ディレクティブは、生成されるビューに C# の using ディレクティブを追加します。

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

Razor コンポーネントでは、@using により、スコープ内のコンポーネントも制御されます。

ディレクティブ属性

Razor のディレクティブ属性は、@ シンボルの後に予約キーワードが続く暗黙的な式によって表されます。通常、ディレクティブ属性を使用して、要素の解析方法の変更や、さまざまな機能の有効化を行います。

`@attributes`

"このシナリオは、Razor コンポーネント (.razor) のみに適用されます。"

@attributes では、非宣言属性のレンダリングがコンポーネントに許可されます。詳細については、「ASP.NET Core Blazor の属性のスプラッティングと任意のパラメーター」を参照してください。

`@bind`

"このシナリオは、Razor コンポーネント (.razor) のみに適用されます。"

コンポーネントのデータバインドは、@bind 属性によって実現されます。詳細については、「ASP.NET Core Blazor データ保護」を参照してください。

`@bind:culture`

"このシナリオは、Razor コンポーネント (.razor) のみに適用されます。"

@bind:culture 属性を @bind 属性と共に使用して、値の解析や書式設定を行うための System.Globalization.CultureInfo を提供します。詳細については、「ASP.NET Core Blazor のグローバリゼーションおよびローカライズ」を参照してください。

`@formname`

"このシナリオは、Razor コンポーネント (.razor) のみに適用されます。"

@formname は、Razor コンポーネントのプレーン HTML フォームまたは EditForm (Editform ドキュメント) に基づくフォームにフォーム名を割り当てます。 @formname の値は一意である必要があります。これにより、次の状況でのフォームの競合を防ぐことができます。

フォームが、複数のフォームを持つコンポーネントに配置される。
フォームが、複数のフォームを持つコンポーネントの外部クラスライブラリ (一般的には NuGet パッケージ) から取得され、アプリ作成者は、コンポーネント内の別のフォームで使用される名前とは異なる外部フォーム名を設定するためにライブラリのソースコードを制御しない。

詳細と例については、「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 Blazor で要素、コンポーネント、モデルのリレーションシップを保持する」を参照してください。

`@ref`

"このシナリオは、Razor コンポーネント (.razor) のみに適用されます。"

コンポーネント参照 (@ref) からは、コンポーネントインスタンスにコマンドを発行できるように、そのインスタンスを参照する方法が与えられます。詳細については、「ASP.NET Core Razor コンポーネント」を参照してください。

テンプレート化された Razor デリゲート

"このシナリオは、MVC ビューと Razor Page (.cshtml) にのみ適用されます。"

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 Page (.cshtml) にのみ適用されます。"

タグヘルパーに関する 3 つのディレクティブがあります。

ディレクティブ	機能
`@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 パーサーをエスケープします。 2 番目の @ は、C# パーサーをエスケープします。

Razor で使用されない予約キーワード

class

ビューに対して生成された Razor C# クラスを検査する

Razor SDK では、Razor ファイルのコンパイルを処理します。既定では、生成されたコードファイルは出力されません。コードファイルの出力を有効にするには、EmitCompilerGeneratedFiles プロジェクトファイル (.csproj) のディレクティブを true に設定します:

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

6.0 プロジェクト (net6.0) を Debug ビルド構成にビルドすると、Razor SDK によって、プロジェクトルートに obj/Debug/net6.0/generated/ ディレクトリが生成されます。そのサブディレクトリには、出力された Razor ページコードファイルが含まれています。

Razor SDK では、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 での物理ファイルプロバイダーの動作と同じです。 2 つのプリコンパイル済みビューの相違点が大文字と小文字の使い分けだけの場合、参照の結果はどちらになるかわかりません。

開発者には、ファイル名とディレクトリ名の大文字/小文字の使い分けを、次のものと一致させることをお勧めします。

領域、コントローラー、アクションの名前。
Razor Pages。

大文字と小文字の使い分けを一致させると、展開は基になっているファイルシステムに関係なくビューを検索できます。

Razor で使用されるインポート

次のインポートは、Razor ファイルをサポートする ASP.NET Core Web テンプレートによって生成されます。

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

@rendermode

@section

@typeparam

@using

ディレクティブ属性

@attributes

@bind

@bind:culture

@formname

@on{EVENT}

@on{EVENT}:preventDefault

@on{EVENT}:stopPropagation

@key

@ref

テンプレート化された Razor デリゲート

タグ ヘルパー

Razor 予約キーワード

Razor キーワード

C# Razor キーワード

Razor で使用されない予約キーワード

ビューに対して生成された Razor C# クラスを検査する

ビューの参照と大文字/小文字の区別

Razor で使用されるインポート

その他のリソース

フィードバック

その他のリソース

スケーラブルベクターグラフィックス (SVG)

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`

`@rendermode`

`@section`

`@typeparam`

`@using`

`@attributes`

`@bind`

`@bind:culture`

`@formname`

`@on{EVENT}`

`@on{EVENT}:preventDefault`

`@on{EVENT}:stopPropagation`

`@key`

`@ref`

タグヘルパー