Razor ASP.NET Core에 대한 구문 참조

아티클
11/30/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 웹 프로그래밍 소개는 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로 전환됩니다.

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' 메서드 그룹을 비대리자 형식 '개체'로 변환할 수 없습니다. 메서드를 호출할 생각이었나요?

제네릭 메서드 호출은 명시적 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 태그로 렌더링됩니다.

Warning

삭제되지 않은 사용자 입력에서 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> 태그 사이의 콘텐츠만 렌더링됩니다.
<text> 태그 앞 또는 뒤에 있는 공백은 HTML 출력에 나타나지 않습니다.

명시적 줄 전환

코드 블록 내부의 나머지 전체 줄을 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>");
    }
}

이 문서의 뒷부분에 나오는 보기용으로 생성된 Razor C# 클래스 검사 섹션에서는 생성된 이 클래스를 보는 방법에 대해 설명합니다.

`@attribute`

@attribute 지시문은 지정된 특성을 생성된 페이지 또는 보기의 클래스에 추가합니다. 다음 예제에서는 [Authorize] 특성을 추가합니다.

@attribute [Authorize]

@attribute 지시문을 사용하여 Razor 구성 요소에서 상수 기반 경로 템플릿을 제공할 수도 있습니다. 다음 예제에서, 구성 요소의 @page 지시문은 앱의 다른 곳에서 "/counter"로 설정된 Constants.CounterRoute의 @attribute 지시문 및 상수 기반 경로 템플릿으로 바뀝니다.

- @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 페이지에서 서비스 컨테이너의 서비스를 보기에 주입할 수 있습니다. 자세한 내용은 보기에 종속성 주입을 참조하세요.

`@layout`

이 시나리오는 Razor 구성 요소(.razor)에만 적용됩니다.

@layout 지시문은 @page 지시문이 있는 라우팅 가능한 Razor 구성 요소의 레이아웃을 지정합니다. 레이아웃 구성 요소는 코드 중복 및 불일치를 방지하는 데 사용됩니다. 자세한 내용은 ASP.NET CoreBlazor 레이아웃을 참조하세요.

`@model`

이 시나리오는 MVC 보기와 Razor Pages(.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 속성의 형식을 지정합니다. 이 지시문은 보기가 파생되는 클래스를 생성한 RazorPage<T>의 T를 지정합니다. @model 지시문이 지정되지 않을 경우 Model 속성은 dynamic 형식입니다. 자세한 내용은 Strongly typed models and the @model keyword를 참조하세요.

`@namespace`

@namespace 지시문:

생성된 Razor 페이지, MVC 보기 또는 Razor 구성 요소의 클래스에 대한 네임스페이스를 설정합니다.
디렉터리 트리에서 가장 가까운 가져오기 파일(보기 또는 페이지) _Imports.razor 또는 (Razor구성 요소)에서 페이지, _ViewImports.cshtml 뷰 또는 구성 요소 클래스의 루트 파생 네임스페이스를 설정합니다.

@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)의 앞 또는 뒤에 있는 공백.

`@rendermode`

이 시나리오는 Razor 구성 요소(.razor)에만 적용됩니다.

구성 요소의 렌더링 모드를 설정합니다.Razor

InteractiveServer: 를 사용하여 Blazor Server대화형 서버 렌더링을 적용합니다.
InteractiveWebAssembly: 를 사용하여 Blazor WebAssembly대화형 WebAssembly 렌더링을 적용합니다.
InteractiveAuto: 처음에는 번들을 사용하여 Blazor Server대화형 WebAssembly 렌더링을 적용한 다음, 번들이 다운로드된 후 후속 방문 시 WebAssembly를 사용하여 대화형 WebAssembly 렌더링을 Blazor 적용합니다.

구성 요소 인스턴스의 경우:

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

구성 요소 정의에서 다음을 수행합니다.

@rendermode InteractiveServer

참고 항목

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 Pages(.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 CoreBlazor 데이터 바인딩을 참조하세요.

`@bind:culture`

이 시나리오는 Razor 구성 요소(.razor)에만 적용됩니다.

@bind:culture 특성을 @bind 특성과 함께 사용하여 값을 구문 분석하고 서식을 지정하기 위한 System.Globalization.CultureInfo을 제공합니다. 자세한 내용은 ASP.NET Core Blazor 세계화 및 지역화를 참조하세요.

`@formname`

이 시나리오는 Razor 구성 요소(.razor)에만 적용됩니다.

@formname는 구성 요소의 일반 HTML 양식 또는 (Editform설명서)에 기반한 양식에 EditForm 양식 이름을 Razor 할당합니다. 값 @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 지시어 특성을 사용하면 구성 요소 diff 알고리즘이 키의 값에 따라 요소 또는 구성 요소를 유지할 수 있습니다. 자세한 내용은 ASP.NET Core의 요소, 구성 요소 및 모델 관계 유지를 참조 하세요 Blazor.

`@ref`

이 시나리오는 Razor 구성 요소(.razor)에만 적용됩니다.

구성 요소 참조(@ref)에서는 해당 인스턴스에 대해 명령을 실행할 수 있도록 구성 요소 인스턴스를 참조하는 방법을 제공합니다. 자세한 내용은 ASP.NET Core Razor 구성 요소를 참조하세요.

템플릿에 작성된 Razor 대리자

이 시나리오는 MVC 보기와 Razor Pages(.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 Pages(.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# 클래스 검사

Razor SDK는 Razor 파일 컴파일을 처리합니다. 기본적으로 생성된 코드 파일은 내보내지지 않습니다. 코드 파일 내보내기를 사용하도록 설정하려면 프로젝트 파일(.csproj)의 EmitCompilerGeneratedFiles지시문을 true으로 설정합니다.

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

Debug빌드 구성에서 6.0 프로젝트(net6.0)를 빌드할 때 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 2.0 이상을 사용하는 경우 모든 운영 체제에서 미리 컴파일된 보기 조회 시 대/소문자를 구분하지 않습니다. 이 동작은 Windows의 물리적 파일 공급자 동작과 동일합니다. 미리 컴파일된 두 보기의 대소문자만 다른 경우 조회 결과가 불명확합니다.

개발자는 파일 및 디렉터리 이름의 대/소문자를 다음의 대/소문자와 매칭하는 것이 좋습니다.

영역, 컨트롤러 및 작업 이름.
Razor Pages

대/소문자를 일치시키면 배포 시 기본 파일 시스템에 관계 없이 해당 보기를 잘 찾습니다.

Razor에서 사용하는 가져오기

다음 가져오기는 Razor 파일을 지원하기 위해 ASP.NET Core 웹 템플릿에 의해 생성됩니다.

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 웹 프로그래밍 소개는 Razor 구문을 통해 다양한 프로그래밍 샘플을 제공합니다.

Razor ASP.NET Core에 대한 구문 참조

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에서 사용하는 가져오기

추가 리소스

피드백

추가 리소스

조건 `@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`