[ASP.NET MVC] Razor Syntax 정리

[ASP.NET Core용 Razor]

Razor는 웹 페이지에 .NET 기반 코드를 포함하는 태그 구문입니다. Razor 구문은 Razor 태그, C# 및 HTML로 구성됩니다. Razor를 포함하는 파일의 확장명은 일반적으로 .cshtml입니다. Razor 구문은 다양한 JavaScript SPA(단일 페이지 애플리케이션) 프레임워크(예: Angular, React, VueJs 및 Svelte)의 템플릿 엔진과 비슷합니다. 

https://docs.microsoft.com/ko-kr/aspnet/core/mvc/views/razor?view=aspnetcore-6.0 

ASP.NET Core용 Razor 구문 참조

 

---

 

HTML 렌더링

기본 Razor 언어는 HTML입니다. Razor 태그에서 HTML을 렌더링하는 방법은 HTML 파일에서 HTML을 렌더링하는 방법과 다르지 않습니다. 파일의 HTML 태그 .cshtmlRazor 는 서버에서 변경 되지 않은 상태로 렌더링 됩니다.

-> Razor Syntax 사용 시 실제 페이지의 소스보기에서는 렌더링 된 상태로 나오기 때문에 변수명 등이 보이지 않음.

 

---

사용 방법

1.암시적 Razor 식

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

암시적 Razor식은 @으로 시작하고 그 뒤에 C#코드를 붙인다.

위 방법은 간단한 데이터를 나타내기엔 좋지만 공백이 있거나 제네릭을 포함할 수 없다.

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

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

 

2.명시적 Razor 식

위 방법의 한계를 해결하기 위한 명시적 Razor식이다.

명시적 Razor 식은 @ 기호와 균형 잡힌 괄호로 구성됩니다. 지난 주의 시간을 렌더링하기 위해 다음 Razor 태그가 사용됩니다.

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

 

조건 @if, else if, else

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

else 및 else if는 @기호를 사용하지 않아도 된다.

 

반복 @for, @foreach

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