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

Rick AndersonTaylor MullenDan Vicarel

Razor は、web ページに .NET ベースのコードを埋め込むためのマークアップ構文です。 構文は、 Razor Razor マークアップ、C#、および HTML で構成されています。 が含ま Razor れているファイルには、通常、ファイル拡張子が付いてい .cshtml ます。 Razorは、 Razor コンポーネントファイル () にもあり .razor ます。 Razor構文は、Angular、React、VueJs、svelte など、さまざまな JavaScript シングルページアプリケーション (SPA) フレームワークのテンプレートエンジンに似ています。 詳細については、「ASP.NET Core で JavaScript サービスを使用してシングル ページ アプリケーションを作成する」を参照してください。

HTML のレンダリング

既定の Razor 言語は HTML です。 マークアップから html をレンダリング Razor することは、html ファイルから html をレンダリングする場合と同じです。 ファイル内の HTML マークアップ .cshtml Razor は、サーバーによって変更されずに表示されます。

Razor の構文

Razor C# をサポートし、シンボルを使用して @ HTML から c# に移行します。 Razor C# の式を評価し、HTML 出力に表示します。

記号の @ 後に Razor 予約済みのキーワードがある場合は、 Razor 固有のマークアップに遷移します。 それ以外の場合は、プレーン HTML に移行します。

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

<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 式は、 @ 均衡かっこ付きの記号で構成されます。 先週の時間を表示するには、次の 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>

明示的な式を使わないと、<p>Age@joe.Age</p> はメール アドレスとして扱われ、<p>Age@joe.Age</p> がレンダリングされます。 明示的な式として記述すると、<p>Age33</p> がレンダリングされます。

明示的な式を使用して、ファイル内のジェネリックメソッドからの出力を表示でき .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 < /span>

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 ページは 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 つのコード ブロックに結合した後で発生することがよくあります。

制御構造

制御構造は、コード ブロックの拡張機能です。 コード ブロックのすべての側面 (マークアップへの遷移、インライン 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]

@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 @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 ディレクティブでは、生成されたクラスのインターフェイスが実装されます。

次の例では、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 コンテナー からビューにサービスを挿入できます。 詳しくは、「ビューへの依存関係の挿入」をご覧ください。

@layout

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

ディレクティブは、 @layout ディレクティブを持つルーティング可能なコンポーネントのレイアウトを指定し Razor @page ます。 レイアウト コンポーネントは、コードの重複や不整合を回避するために使用されます。 詳細については、「ASP.NET Core Blazor レイアウト」を参照してください。

@model

このシナリオは、MVC ビューおよびページ () にのみ適用さ Razor .cshtml れます。

@model ディレクティブにより、ビューまたはページに渡されるモデルの型が指定されます。

@model TypeNameOfModel

Razor個々のユーザーアカウントで作成された ASP.NET Core MVC またはページアプリには、 Views/Account/Login.cshtml 次のモデル宣言が含まれています。

@model LoginViewModel

生成されるクラスは、RazorPage<dynamic> を継承します。

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

RazorModelビューに渡されるモデルにアクセスするためのプロパティを公開します。

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

@model ディレクティブにより、Model プロパティの型が指定されます。 ディレクティブでは、ビューが派生する生成されたクラスの TRazorPage<T> で指定します。 @model ディレクティブが指定されていない場合、Model プロパティは dynamic 型になります。 詳細については、「 厳密に型指定されたモデルと @model キーワード」を参照してください。

@namespace

@namespace ディレクティブ:

  • 生成された Razor ページ、MVC ビュー、またはコンポーネントのクラスの名前空間を設定し Razor ます。
  • ページ、ビュー、またはコンポーネントクラスのルート派生名前空間を、ディレクトリツリー内の最も近いインポートファイル _ViewImports.cshtml (ビューまたはページ) または _Imports razor ( Razor コンポーネント) から設定します。
@namespace Your.Namespace.Here

次の表に示すページの例については、「」を参照して Razor ください。

  • 各ページがインポート 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 ディレクティブには、それが表示されるファイルの型によって、さまざまな効果があります。 ディレクティブ:

@preservewhitespace

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

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

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

@section

このシナリオは、MVC ビューおよびページ () にのみ適用さ Razor .cshtml れます。

ディレクティブは、 @section ビューまたはページが HTML ページのさまざまな部分でコンテンツを表示できるようにするために、 MVC および Razor ページレイアウト と組み合わせて使用されます。 詳細については、「ASP.NET Core でのレイアウト」を参照してください。

@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 @bindSystem.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 プロパティを持つ PetList<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 れます。

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

ディレクティブ 関数
@addTagHelper ビューでタグ ヘルパーを使えるようにします。
@removeTagHelper 前に追加したタグ ヘルパーをビューから削除します。
@tagHelperPrefix タグ プレフィックスを指定して、タグ ヘルパーのサポートを有効にしたり、タグ ヘルパーの使用を明示的にしたりします。

Razor 予約済みキーワード

Razor keywords

  • page(ASP.NET Core 2.1 以降が必要)
  • 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 します。 プロジェクトをビルドすると、SDK によって Razor obj/<build_configuration>/<target_framework_moniker>/Razor プロジェクトルートにディレクトリが生成されます。 ディレクトリ内のディレクトリ構造は、 Razor プロジェクトのディレクトリ構造をミラー化します。

ASP.NET Core Pages プロジェクトでは、次のディレクトリ構造について考えてみ Razor ます。

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

デバッグ 構成でプロジェクトをビルドすると、次のディレクトリが生成され 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 トピック.

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

使用されるインポート 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;

その他の技術情報

使用した ASP.NET Web プログラミング Razor の概要構文には、構文を使用したプログラミングの多くのサンプルが用意されて Razor います。