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

Rick AndersonTaylor MullenDan VicarelBy Rick Anderson, Taylor Mullen, and Dan Vicarel

Razor は、web ページにサーバーベースのコードを埋め込むためのマークアップ構文です。Razor is a markup syntax for embedding server-based code into webpages. 構文は、 Razor Razor マークアップ、C#、および HTML で構成されています。The Razor syntax consists of Razor markup, C#, and HTML. に含まれるファイル Razor に .cshtml は、通常、拡張子が付いています。Files containing Razor generally have a .cshtml file extension. Razorは、 Razor コンポーネントファイル (razor) にもあります。Razor is also found in Razor components files (.razor).

HTML のレンダリングRendering HTML

既定の Razor 言語は HTML です。The default Razor language is HTML. マークアップから html をレンダリング Razor することは、html ファイルから html をレンダリングする場合と同じです。Rendering HTML from Razor markup is no different than rendering HTML from an HTML file. ファイル 内の HTML マークアップ Razor は、サーバーによって変更されずに表示されます。HTML markup in .cshtml Razor files is rendered by the server unchanged.

Razor の構文Razor syntax

Razor C# をサポートし、シンボルを使用して @ HTML から c# に移行します。Razor supports C# and uses the @ symbol to transition from HTML to C#. Razor C# の式を評価し、HTML 出力に表示します。Razor evaluates C# expressions and renders them in the HTML output.

記号の @ 後に Razor 予約済みのキーワードがある場合は、 Razor 固有のマークアップに遷移します。When an @ symbol is followed by a Razor reserved keyword, it transitions into Razor-specific markup. それ以外の場合は、普通の C# に移行します。Otherwise, it transitions into plain C#.

マークアップでシンボルをエスケープするには @ Razor 、2番目のシンボルを使用し @ ます。To escape an @ symbol in Razor markup, use a second @ symbol:

<p>@@Username</p>

HTML では、コードは 1 つの @ 記号でレンダリングされます。The code is rendered in HTML with a single @ symbol:

<p>@Username</p>

メール アドレスを含む HTML の属性とコンテンツは、@ 記号を遷移文字として扱いません。HTML attributes and content containing email addresses don't treat the @ symbol as a transition character. 次の例の電子メールアドレスは、解析によってそのまま残り Razor ます。The email addresses in the following example are untouched by Razor parsing:

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

暗黙的な Razor 式Implicit Razor expressions

暗黙的 Razor な式の先頭に @ は、次の C# コードが続きます。Implicit Razor expressions start with @ followed by C# code:

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

C# の await キーワードを除き、暗黙的な式にスペースを含めることはできません。With the exception of the C# await keyword, implicit expressions must not contain spaces. C# のステートメントに明確な終わりがある場合は、スペースを混在させることができます。If the C# statement has a clear ending, spaces can be intermingled:

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

暗黙的な式では、山かっこ (<>) の内側の文字は HTML タグとして解釈されるため、C# ジェネリックを含めることは できませんImplicit expressions cannot contain C# generics, as the characters inside the brackets (<>) are interpreted as an HTML tag. 次のコードは有効では ありませんThe following code is not valid:

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

上記のコードでは、次のいずれかのようなコンパイラ エラーが生成されます。The preceding code generates a compiler error similar to one of the following:

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

ジェネリックメソッドの呼び出しは、明示的な Razor 式または Razor コードブロックでラップする必要があります。Generic method calls must be wrapped in an explicit Razor expression or a Razor code block.

明示的な Razor 式Explicit Razor expressions

明示的な Razor 式は、 @ 均衡かっこ付きの記号で構成されます。Explicit Razor expressions consist of an @ symbol with balanced parenthesis. 先週の時間を表示するには、次の Razor マークアップを使用します。To render last week's time, the following Razor markup is used:

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

@() のかっこ内の内容が評価されて、出力にレンダリングされます。Any content within the @() parenthesis is evaluated and rendered to the output.

前のセクションで説明した暗黙的な式は、一般に、スペースを含むことはできません。Implicit expressions, described in the previous section, generally can't contain spaces. 次のコードでは、現在時刻から 1 週間は減算されません。In the following code, one week isn't subtracted from the current time:

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

このコードでは、次のような HTML がレンダリングされます。The code renders the following HTML:

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

明示的な式を使うと、テキストと式の結果を連結できます。Explicit expressions can be used to concatenate text with an expression result:

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

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

明示的な式を使わないと、<p>Age@joe.Age</p> はメール アドレスとして扱われ、<p>Age@joe.Age</p> がレンダリングされます。Without the explicit expression, <p>Age@joe.Age</p> is treated as an email address, and <p>Age@joe.Age</p> is rendered. 明示的な式として記述すると、<p>Age33</p> がレンダリングされます。When written as an explicit expression, <p>Age33</p> is rendered.

明示的な式を使うと、ジェネリック メソッドから .cshtml ファイルに出力できます。Explicit expressions can be used to render output from generic methods in .cshtml files. 次のマークアップは、C# ジェネリックの山かっこによって発生した前述のエラーを修正する方法について示します。The following markup shows how to correct the error shown earlier caused by the brackets of a C# generic. コードは明示的な式として書き込まれます。The code is written as an explicit expression:

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

式のエンコードExpression encoding

文字列として評価される C# の式は、HTML でエンコードされます。C# expressions that evaluate to a string are HTML encoded. IHtmlContent として評価される C# の式は、IHtmlContent.WriteTo によって直接レンダリングされます。C# expressions that evaluate to IHtmlContent are rendered directly through IHtmlContent.WriteTo. IHtmlContent として評価されない C# の式は、ToString によって文字列に変換され、レンダリングされる前にエンコードされます。C# expressions that don't evaluate to IHtmlContent are converted to a string by ToString and encoded before they're rendered.

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

上記のコードは、次の HTML をレンダリングします。The preceding code renders the following HTML:

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

HTML は、プレーンテキストとしてブラウザーに表示されます。The HTML is shown in the browser as plain text:

<スパン > Hello World < /span><span>Hello World</span>

HtmlHelper.Raw の出力はエンコードされませんが、HTML マークアップとしてレンダリングされません。HtmlHelper.Raw output isn't encoded but rendered as HTML markup.

警告

サニタイズされていないユーザー入力で HtmlHelper.Raw を使うと、セキュリティ上のリスクがあります。Using HtmlHelper.Raw on unsanitized user input is a security risk. ユーザー入力には、悪意のある JavaScript または他の攻撃が含まれる可能性があります。User input might contain malicious JavaScript or other exploits. ユーザー入力をサニタイズすることは困難です。Sanitizing user input is difficult. ユーザー入力では HtmlHelper.Raw を使わないでください。Avoid using HtmlHelper.Raw with user input.

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

このコードでは、次のような HTML がレンダリングされます。The code renders the following HTML:

<span>Hello World</span>

Razor コードブロックRazor code blocks

Razor コードブロックはで始まり @ 、で囲まれて {} います。Razor code blocks start with @ and are enclosed by {}. 式とは異なり、コード ブロック内の C# コードはレンダリングされません。Unlike expressions, C# code inside code blocks isn't rendered. ビュー内のコード ブロックと式は同じスコープを共有し、次の順序で定義されます。Code blocks and expressions in a view share the same scope and are defined in order:

@{
    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 がレンダリングされます。The code renders the following 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>

コード ブロックで、るローカル関数をマークアップで宣言し、テンプレート メソッドとしてのサービスを提供します。In code blocks, declare local functions with markup to serve as templating methods:

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

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

このコードでは、次のような HTML がレンダリングされます。The code renders the following HTML:

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

暗黙の移行Implicit transitions

コードブロックの既定の言語は C# ですが、 Razor ページは HTML に戻ることができます。The default language in a code block is C#, but the Razor Page can transition back to HTML:

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

明示的に区切られた遷移Explicit delimited transition

HTML を表示する必要があるコードブロックのサブセクションを定義するには、タグを使用して、表示する文字を囲み Razor <text> ます。To define a subsection of a code block that should render HTML, surround the characters for rendering with the Razor <text> tag:

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

HTML タグによって囲まれていない HTML をレンダリングするには、この方法を使います。Use this approach to render HTML that isn't surrounded by an HTML tag. HTML またはタグがないと Razor 、 Razor ランタイムエラーが発生します。Without an HTML or Razor tag, a Razor runtime error occurs.

<text> タグは、内容をレンダリングするときに空白文字を制御するのに便利です。The <text> tag is useful to control whitespace when rendering content:

  • <text> タグの間の内容だけがレンダリングされます。Only the content between the <text> tag is rendered.
  • <text> タグの前後にある空白文字は HTML の出力には表示されません。No whitespace before or after the <text> tag appears in the HTML output.

明示的な行の遷移Explicit line transition

残りの行全体をコード ブロック内に HTML としてレンダリングするには、@: 構文を使います。To render the rest of an entire line as HTML inside a code block, use @: syntax:

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

コードにを指定しないと @: 、 Razor ランタイムエラーが生成されます。Without the @: in the code, a Razor runtime error is generated.

@ファイルに余分な文字が含まれ Razor ていると、ステートメントの後のブロックで、コンパイラエラーが発生する可能性があります。Extra @ characters in a Razor file can cause compiler errors at statements later in the block. これらのコンパイラ エラーは、実際のエラーは報告されたエラーより前で発生しているため、理解するのが難しい場合があります。These compiler errors can be difficult to understand because the actual error occurs before the reported error. このエラーは、複数の暗黙的/明示的な式を 1 つのコード ブロックに結合した後で発生することがよくあります。This error is common after combining multiple implicit/explicit expressions into a single code block.

制御構造Control structures

制御構造は、コード ブロックの拡張機能です。Control structures are an extension of code blocks. コード ブロックのすべての側面 (マークアップへの遷移、インライン C# ) が、次の構造にも適用されます。All aspects of code blocks (transitioning to markup, inline C#) also apply to the following structures:

条件 @if, else if, else, and @switchConditionals @if, else if, else, and @switch

@if は、いつコードを実行するかを制御します。@if controls when code runs:

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

else および else if には、@ 記号は必要ありません。else and else if don't require the @ symbol:

@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 ステートメントの使い方を示します。The following markup shows how to use a switch statement:

@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 whileLooping @for, @foreach, @while, and @do while

ループ制御ステートメントを使って、テンプレート化された HTML をレンダリングできます。Templated HTML can be rendered with looping control statements. 人の一覧をレンダリングするには:To render a list of people:

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

以下のループ ステートメントがサポートされています。The following looping statements are supported:

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

複合 @usingCompound @using

C# では、オブジェクトを確実に破棄するために using オブジェクトが使われています。In C#, a using statement is used to ensure an object is disposed. で Razor は、同じメカニズムを使用して、追加のコンテンツを含む HTML ヘルパーを作成します。In Razor, the same mechanism is used to create HTML Helpers that contain additional content. 次のコードの HTML ヘルパーは、@using ステートメントを含む <form> タグをレンダリングします。In the following code, HTML Helpers render a <form> tag with the @using statement:

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

@try, catch, finally

例外処理は C# に似ています。Exception handling is similar to 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 ステートメントで保護する機能があります。Razor has the capability to protect critical sections with lock statements:

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

説明Comments

Razor C# および HTML コメントをサポートしています。Razor supports C# and HTML comments:

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

このコードでは、次のような HTML がレンダリングされます。The code renders the following HTML:

<!-- HTML comment -->

Razor コメントは、web ページが表示される前にサーバーによって削除されます。Razor comments are removed by the server before the webpage is rendered. Razor は @* *@ 、を使用してコメントを区切ります。Razor uses @* *@ to delimit comments. 次のコードはコメント化されているため、サーバーはどのマークアップもレンダリングしません。The following code is commented out, so the server doesn't render any markup:

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

ディレクティブDirectives

Razor ディレクティブは、記号の後に予約済みのキーワードを持つ暗黙的な式で表され @ ます。Razor directives are represented by implicit expressions with reserved keywords following the @ symbol. 通常、ディレクティブは、ビューの解析方法を変更したり、異なる機能を有効にしたりします。A directive typically changes the way a view is parsed or enables different functionality.

が Razor ビューのコードを生成する方法を理解すると、ディレクティブのしくみを理解しやすくなります。Understanding how Razor generates code for a view makes it easier to understand how directives work.

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

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

上のコードでは、次のようなクラスが生成されます。The code generates a class similar to the following:

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# クラスを調べる 」セクションでは、この生成されたクラスを表示する方法について説明します。Later in this article, the section Inspect the Razor C# class generated for a view explains how to view this generated class.

@attribute

@attribute ディレクティブでは、指定された属性が生成されたページまたはビューのクラスに追加されます。The @attribute directive adds the given attribute to the class of the generated page or view. 次の例では、[Authorize] 属性が追加されます。The following example adds the [Authorize] attribute:

@attribute [Authorize]

@code

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

この @code ブロックにより、 Razor コンポーネントは、コンポーネントに C# のメンバー (フィールド、プロパティ、およびメソッド) を追加できます。The @code block enables a Razor component to add C# members (fields, properties, and methods) to a component:

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

コンポーネントの場合 Razor 、 @code はのエイリアスであり、よりも優先され @functions @functions ます。For Razor components, @code is an alias of @functions and recommended over @functions. 複数の @code ブロックが許容されます。More than one @code block is permissible.

@functions

@functions ディレクティブでは、生成されたクラスに C# メンバー (フィールド、プロパティ、メソッド) を追加できます。The @functions directive enables adding C# members (fields, properties, and methods) to the generated class:

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

[ Razor コンポーネント] で、を使用して @code @functions C# メンバーを追加します。In Razor components, use @code over @functions to add C# members.

次に例を示します。For example:

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

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

このコードは、次の HTML マークアップを生成します。The code generates the following HTML markup:

<div>From method: Hello</div>

次のコードは、生成された Razor C# クラスです。The following code is the generated Razor C# class:

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 メソッドは、マークアップが与えられているとき、テンプレート メソッドとしてサービスを提供します。@functions methods serve as templating methods when they have markup:

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

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

このコードでは、次のような HTML がレンダリングされます。The code renders the following HTML:

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

@implements

@implements ディレクティブでは、生成されたクラスのインターフェイスが実装されます。The @implements directive implements an interface for the generated class.

次の例では、Dispose メソッドを呼び出せるように、System.IDisposable が実装されます。The following example implements System.IDisposable so that the Dispose method can be called:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

@inherits

@inherits ディレクティブは、ビューが継承するクラスの完全な制御を提供します。The @inherits directive provides full control of the class the view inherits:

@inherits TypeNameOfClassToInheritFrom

次のコードは、カスタム Razor ページの種類です。The following code is a custom Razor page type:

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 がビューに表示されます。The CustomText is displayed in a view:

@inherits CustomRazorPage<TModel>

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

このコードでは、次のような HTML がレンダリングされます。The code renders the following HTML:

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

@model@inherits は同じビューで使うことができます。@model and @inherits can be used in the same view. @inherits は、ビューがインポートする _ViewImports.cshtml ファイルで指定できます。@inherits can be in a _ViewImports.cshtml file that the view imports:

@inherits CustomRazorPage<TModel>

次のコードは、厳密に型指定されたビューの例です。The following code is an example of a strongly-typed view:

@inherits CustomRazorPage<TModel>

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

モデルに rick@contoso.com が渡された場合、ビューは次の HTML マークアップを生成します。If "rick@contoso.com" is passed in the model, the view generates the following HTML markup:

<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 コンテナー からビューにサービスを挿入できます。The @inject directive enables the Razor Page to inject a service from the service container into a view. 詳しくは、「ビューへの依存関係の挿入」をご覧ください。For more information, see Dependency injection into views.

@layout

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

ディレクティブは、 @layout コンポーネントのレイアウトを指定し Razor ます。The @layout directive specifies a layout for a Razor component. レイアウト コンポーネントは、コードの重複や不整合を回避するために使用されます。Layout components are used to avoid code duplication and inconsistency. 詳細については、 ASP.NET Core Blazor レイアウト を参照してください。For more information, see ASP.NET Core Blazor レイアウト.

@model

このシナリオは、MVC ビューおよび Razor ページ (cshtml) にのみ適用されます。This scenario only applies to MVC views and Razor Pages (.cshtml).

@model ディレクティブにより、ビューまたはページに渡されるモデルの型が指定されます。The @model directive specifies the type of the model passed to a view or page:

@model TypeNameOfModel

Razor個々のユーザーアカウントで作成された ASP.NET CORE MVC またはページアプリでは、 Views/Account/Login. cshtml には次のモデル宣言が含まれています。In an ASP.NET Core MVC or Razor Pages app created with individual user accounts, Views/Account/Login.cshtml contains the following model declaration:

@model LoginViewModel

生成されるクラスは、RazorPage<dynamic> を継承します。The class generated inherits from RazorPage<dynamic>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

RazorModelビューに渡されるモデルにアクセスするためのプロパティを公開します。Razor exposes a Model property for accessing the model passed to the view:

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

@model ディレクティブにより、Model プロパティの型が指定されます。The @model directive specifies the type of the Model property. ディレクティブでは、ビューが派生する生成されたクラスの TRazorPage<T> で指定します。The directive specifies the T in RazorPage<T> that the generated class that the view derives from. @model ディレクティブが指定されていない場合、Model プロパティは dynamic 型になります。If the @model directive isn't specified, the Model property is of type dynamic. 詳細については、「 厳密に型指定されたモデルと @model キーワード」を参照してください。For more information, see Strongly typed models and the @model keyword.

@namespace

@namespace ディレクティブ:The @namespace directive:

  • 生成された Razor ページ、MVC ビュー、またはコンポーネントのクラスの名前空間を設定し Razor ます。Sets the namespace of the class of the generated Razor page, MVC view, or Razor component.
  • ページ、ビュー、またはコンポーネントクラスのルート派生名前空間を、ディレクトリツリー内の最も近いインポートファイル、 _ViewImports (ビューまたはページ)、または _Imports razor ( Razor コンポーネント) に設定します。Sets the root derived namespaces of a pages, views, or components classes from the closest imports file in the directory tree, _ViewImports.cshtml (views or pages) or _Imports.razor (Razor components).
@namespace Your.Namespace.Here

次の表に示すページの例については、「」を参照して Razor ください。For the Razor Pages example shown in the following table:

  • 各ページで Pages/_ViewImports.cshtml がインポートされます。Each page imports Pages/_ViewImports.cshtml.
  • Pages/_ViewImports.cshtml@namespace Hello.World が含まれます。Pages/_ViewImports.cshtml contains @namespace Hello.World.
  • 各ページには、その名前空間のルートとして Hello.World が含まれます。Each page has Hello.World as the root of it's namespace.
ページPage 名前空間Namespace
Pages/Index. cshtmlPages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtmlPages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtmlPages/MorePages/EvenMorePages/Page.cshtml Hello.World.MorePages.EvenMorePages

前のリレーションシップは、MVC ビューおよびコンポーネントで使用されるファイルのインポートに適用され Razor ます。The preceding relationships apply to import files used with MVC views and Razor components.

複数のインポート ファイルに @namespace ディレクティブがあるとき、ディレクトリ ツリーでページ、ビュー、またはコンポーネントに最も近いファイルがルート名前空間の設定に使用されます。When multiple import files have a @namespace directive, the file closest to the page, view, or component in the directory tree is used to set the root namespace.

前の例の EvenMorePages フォルダーに @namespace Another.Planet が含まれるインポート ファイルがある場合 (または、Pages/MorePages/EvenMorePages/Page.cshtml ファイルに @namespace Another.Planet が含まれる場合)、結果は次の表のようになります。If the EvenMorePages folder in the preceding example has an imports file with @namespace Another.Planet (or the Pages/MorePages/EvenMorePages/Page.cshtml file contains @namespace Another.Planet), the result is shown in the following table.

ページPage 名前空間Namespace
Pages/Index. cshtmlPages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtmlPages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtmlPages/MorePages/EvenMorePages/Page.cshtml Another.Planet

@page

@page ディレクティブには、それが表示されるファイルの型によって、さまざまな効果があります。The @page directive has different effects depending on the type of the file where it appears. ディレクティブ:The directive:

@pageファイルの先頭行にあるディレクティブは、ファイルがページであることを示し ます。 RazorThe @page directive on the first line of a .cshtml file indicates that the file is a Razor Page. 詳細については、 ASP.NET Core での Razor ページの概要 を参照してください。For more information, see ASP.NET Core での Razor ページの概要.

@preservewhitespace

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

false(既定値) に設定した場合、コンポーネント () から表示されるマークアップ内の空白は、次の場合に削除され Razor .razor ます。When set to false (default), whitespace in the rendered markup from Razor components (.razor) is removed if:

  • 要素内の先頭または末尾。Leading or trailing within an element.
  • パラメーター内の先頭または末尾 RenderFragmentLeading or trailing within a RenderFragment parameter. たとえば、別のコンポーネントに渡される子コンテンツなどです。For example, child content passed to another component.
  • またはなどの C# コードブロックの前または後に @if @foreach あります。It precedes or follows a C# code block, such as @if or @foreach.

@section

このシナリオは、MVC ビューおよび Razor ページ (cshtml) にのみ適用されます。This scenario only applies to MVC views and Razor Pages (.cshtml).

ディレクティブは、 @section ビューまたはページが HTML ページのさまざまな部分でコンテンツを表示できるようにするために、 MVC および Razor ページレイアウト と組み合わせて使用されます。The @section directive is used in conjunction with MVC and Razor Pages layouts to enable views or pages to render content in different parts of the HTML page. 詳細については、 ASP.NET Core でのレイアウト を参照してください。For more information, see ASP.NET Core でのレイアウト.

@using

@using ディレクティブは、生成されるビューに C# の using ディレクティブを追加します。The @using directive adds the C# using directive to the generated view:

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

Razor コンポーネント@using は、スコープ内のコンポーネントも制御します。In Razor components, @using also controls which components are in scope.

ディレクティブ属性Directive attributes

Razor ディレクティブ属性は、記号の後に予約済みのキーワードを使用した暗黙的な式によって表され @ ます。Razor directive attributes are represented by implicit expressions with reserved keywords following the @ symbol. 通常、ディレクティブ属性は、要素の解析方法を変更したり、さまざまな機能を有効にしたりします。A directive attribute typically changes the way an element is parsed or enables different functionality.

@attributes

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

@attributes では、非宣言属性のレンダリングがコンポーネントに許可されます。@attributes allows a component to render non-declared attributes. 詳細については、 ASP.NET Core Razor コンポーネントの作成と使用 を参照してください。For more information, see ASP.NET Core Razor コンポーネントの作成と使用.

@bind

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

コンポーネントのデータ バインドは、@bind 属性によって実現されます。Data binding in components is accomplished with the @bind attribute. 詳細については、 ASP.NET Core Blazor データ バインディング を参照してください。For more information, see ASP.NET Core Blazor データ バインディング.

@on{EVENT}

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

Razor コンポーネントのイベント処理機能を提供します。Razor provides event handling features for components. 詳細については、 ASP.NET Core Blazor のイベント処理 を参照してください。For more information, see ASP.NET Core Blazor のイベント処理.

@on{EVENT}:preventDefault

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

イベントの既定のアクションを禁止します。Prevents the default action for the event.

@on{EVENT}:stopPropagation

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

イベントのイベント伝達を停止します。Stops event propagation for the event.

@key

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

@key ディレクティブ属性により、コンポーネントの比較アルゴリズムは、キーの値に基づいて要素またはコンポーネントの保存を保証します。The @key directive attribute causes the components diffing algorithm to guarantee preservation of elements or components based on the key's value. 詳細については、 ASP.NET Core Razor コンポーネントの作成と使用 を参照してください。For more information, see ASP.NET Core Razor コンポーネントの作成と使用.

@ref

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

コンポーネント参照 (@ref) からは、コンポーネント インスタンスにコマンドを発行できるように、そのインスタンスを参照する方法が与えられます。Component references (@ref) provide a way to reference a component instance so that you can issue commands to that instance. 詳細については、 ASP.NET Core Razor コンポーネントの作成と使用 を参照してください。For more information, see ASP.NET Core Razor コンポーネントの作成と使用.

@typeparam

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

@typeparam ディレクティブによって、生成されるコンポーネント クラスのジェネリック型パラメーターを宣言します。The @typeparam directive declares a generic type parameter for the generated component class. 詳細については、 ASP.NET Core Blazor テンプレート コンポーネント を参照してください。For more information, see ASP.NET Core Blazor テンプレート コンポーネント.

テンプレート化 Razor デリゲートTemplated Razor delegates

Razor テンプレートを使用すると、次の形式で UI スニペットを定義できます。Razor templates allow you to define a UI snippet with the following format:

@<tag>...</tag>

次の例は、テンプレート化されたデリゲートをとして指定する方法を示してい Razor Func<T,TResult> ます。The following example illustrates how to specify a templated Razor delegate as a Func<T,TResult>. デリゲートによってカプセル化されるメソッドのパラメーターに対しては、dynamic 型を指定します。The dynamic type is specified for the parameter of the method that the delegate encapsulates. デリゲートの戻り値としては、object 型を指定します。An object type is specified as the return value of the delegate. テンプレートは、Name プロパティを持つ PetList<T> で使用されます。The template is used with a List<T> of Pet that has a Name property.

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 で表示されます。The template is rendered with pets supplied by a foreach statement:

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

表示される出力:Rendered output:

<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メソッドの引数としてインラインテンプレートを指定することもできます。You can also supply an inline Razor template as an argument to a method. 次の例では、 Repeat メソッドがテンプレートを受け取り Razor ます。In the following example, the Repeat method receives a Razor template. メソッドは、テンプレートを使用して、リストから提供される項目の繰り返しで HTML コンテンツを生成します。The method uses the template to produce HTML content with repeats of items supplied from a list:

@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 メソッドを呼び出します。Using the list of pets from the prior example, the Repeat method is called with:

  • List<T>PetList<T> of Pet.
  • 各ペットを繰り返す回数。Number of times to repeat each pet.
  • 順不同のリストのリスト項目に対して使用するインライン テンプレート。Inline template to use for the list items of an unordered list.
<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

表示される出力:Rendered output:

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

タグ ヘルパーTag Helpers

このシナリオは、MVC ビューおよび Razor ページ (cshtml) にのみ適用されます。This scenario only applies to MVC views and Razor Pages (.cshtml).

タグ ヘルパーに関する 3 つのディレクティブがあります。There are three directives that pertain to Tag Helpers.

ディレクティブDirective 機能Function
@addTagHelper ビューでタグ ヘルパーを使えるようにします。Makes Tag Helpers available to a view.
@removeTagHelper 前に追加したタグ ヘルパーをビューから削除します。Removes Tag Helpers previously added from a view.
@tagHelperPrefix タグ プレフィックスを指定して、タグ ヘルパーのサポートを有効にしたり、タグ ヘルパーの使用を明示的にしたりします。Specifies a tag prefix to enable Tag Helper support and to make Tag Helper usage explicit.

Razor 予約済みキーワードRazor reserved keywords

Razor keywordsRazor keywords

  • page (ASP.NET Core 2.1 以降が必要)page (Requires ASP.NET Core 2.1 or later)
  • namespace
  • functions
  • inherits
  • model
  • section
  • helper (現在 ASP.NET Core ではサポートされていません)helper (Not currently supported by ASP.NET Core)

Razor キーワードは、でエスケープされ @(Razor Keyword) ます (たとえば、 @(functions) )。Razor keywords are escaped with @(Razor Keyword) (for example, @(functions)).

C# の Razor キーワードC# Razor keywords

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

C# の Razor キーワードは、を使用してダブルエスケープする必要があり @(@C# Razor Keyword) ます (例: @(@case) )。C# Razor keywords must be double-escaped with @(@C# Razor Keyword) (for example, @(@case)). 最初のは、 @ パーサーをエスケープし Razor ます。The first @ escapes the Razor parser. 2 番目の @ は、C# パーサーをエスケープします。The second @ escapes the C# parser.

予約済みキーワードがで使用されていません RazorReserved keywords not used by Razor

  • class

Razorビューに対して生成された C# クラスを検査するInspect the Razor C# class generated for a view

.NET Core SDK 2.1 以降では、 Razor SDKによってファイルのコンパイルが処理さ Razor れます。With .NET Core SDK 2.1 or later, the Razor SDK handles compilation of Razor files. プロジェクトをビルドすると、SDK によって、 Razor プロジェクトルートに obj/<build_configuration>Razor /<target_framework_moniker/ ディレクトリが生成されます。When building a project, the Razor SDK generates an obj/<build_configuration>/<target_framework_moniker>/Razor directory in the project root. ディレクトリ内のディレクトリ構造は、 Razor プロジェクトのディレクトリ構造をミラー化します。The directory structure within the Razor directory mirrors the project's directory structure.

.NET Core 2.1 を対象とする ASP.NET Core 2.1 ページプロジェクトでは、次のディレクトリ構造について考えてみ Razor ます。Consider the following directory structure in an ASP.NET Core 2.1 Razor Pages project targeting .NET Core 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 ディレクトリが生成されます。Building the project in Debug configuration yields the following obj directory:

 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/netcoreapp 2.1/ Razor /Pages/Index.g.cshtml.cs を開きます。To view the generated class for Pages/Index.cshtml, open obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

次のクラスを ASP.NET Core MVC プロジェクトに追加します。Add the following class to the ASP.NET Core MVC project:

#if V2
using Microsoft.AspNetCore.Mvc.Razor.Extensions;
using Microsoft.AspNetCore.Razor.Language;

public class CustomTemplateEngine : MvcRazorTemplateEngine
{
    public CustomTemplateEngine(RazorEngine engine, RazorProject project) 
        : base(engine, project)
    {
    }
        
    public override RazorCSharpDocument GenerateCode(RazorCodeDocument codeDocument)
    {
        var csharpDocument = base.GenerateCode(codeDocument);
        var generatedCode = csharpDocument.GeneratedCode;

        // Look at generatedCode

        return csharpDocument;
    }
}
#endif

Startup.ConfigureServices で、MVC によって追加された RazorTemplateEngineCustomTemplateEngine クラスでオーバーライドします。In Startup.ConfigureServices, override the RazorTemplateEngine added by MVC with the CustomTemplateEngine class:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();

CustomTemplateEnginereturn csharpDocument; ステートメントにブレークポイントを設定します。Set a breakpoint on the return csharpDocument; statement of CustomTemplateEngine. プログラムの実行がブレークポイントで停止したら、generatedCode の値を表示します。When program execution stops at the breakpoint, view the value of generatedCode.

generatedCode のテキスト ビジュアライザーの表示

ビューの参照と大文字/小文字の区別View lookups and case sensitivity

Razorビューエンジンは、ビューに対して大文字と小文字を区別して検索を実行します。The Razor view engine performs case-sensitive lookups for views. ただし、実際の参照は、基になるファイル システムによって決定されます。However, the actual lookup is determined by the underlying file system:

  • ファイル ベースのソース:File based source:
    • 大文字と小文字が区別されないファイル システムを使っているオペレーティング システム (Windows など) では、物理的なファイル プロバイダーの参照は大文字と小文字を区別しません。On operating systems with case insensitive file systems (for example, Windows), physical file provider lookups are case insensitive. たとえば、return View("Test") は、/Views/Home/Test.cshtml/Views/home/test.cshtml、その他のすべての大文字と小文字のバリエーションと一致します。For example, return View("Test") results in matches for /Views/Home/Test.cshtml, /Views/home/test.cshtml, and any other casing variant.
    • 大文字と小文字が区別されるファイル システム (たとえば、Linux、OSX、および EmbeddedFileProvider) では、参照は大文字と小文字を区別します。On case-sensitive file systems (for example, Linux, OSX, and with EmbeddedFileProvider), lookups are case-sensitive. たとえば、return View("Test")/Views/Home/Test.cshtml だけと一致します。For example, return View("Test") specifically matches /Views/Home/Test.cshtml.
  • プリコンパイル済みのビュー: ASP.NET Core 2.0 以降では、プリコンパイル済みのビューの参照は、すべてのオペレーティング システムで大文字と小文字を区別しません。Precompiled views: With ASP.NET Core 2.0 and later, looking up precompiled views is case insensitive on all operating systems. 動作は、Windows での物理ファイル プロバイダーの動作と同じです。The behavior is identical to physical file provider's behavior on Windows. 2 つのプリコンパイル済みビューの相違点が大文字と小文字の使い分けだけの場合、参照の結果はどちらになるかわかりません。If two precompiled views differ only in case, the result of lookup is non-deterministic.

開発者には、ファイル名とディレクトリ名の大文字/小文字の使い分けを、次のものと一致させることをお勧めします。Developers are encouraged to match the casing of file and directory names to the casing of:

  • 領域、コントローラー、アクションの名前。Area, controller, and action names.
  • Razor トピック.Razor Pages.

大文字と小文字の使い分けを一致させると、展開は基になっているファイル システムに関係なくビューを検索できます。Matching case ensures the deployments find their views regardless of the underlying file system.

その他のリソースAdditional resources

使用した ASP.NET Web プログラミング Razor の概要構文には、構文を使用したプログラミングの多くのサンプルが用意されて Razor います。Introduction to ASP.NET Web Programming Using the Razor Syntax provides many samples of programming with Razor syntax.