ASP.NET MVC3 – Razor 문법

개요

  • 발음 : 레이저
  • @으로 표현
  • ASP.NET MVC3에서 사용가능
  • ASP.NET 엔진과 별개로 동작
  • Razor Template + Data = Output

Quick Reference

실습

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
</head>
<body>
    <div>
        <h1>레이저 구문 학습</h1>

        @for (int i = 0; i < 5; i++)
        {
            // html과 code를 알아서 판단
            <div>@i</div>
        }

        @{
            // 변수를 선언
            string userName = "kimstar";
            int age = 12;
            var js = "<script>alert('테스트')</script>";
        }            
           
        @*@()로 정확하게..*@
        <div>저는 @userName 입니다. 제 나이는 @age 입니다.</div>
            
        @*<text>사용하거나 @:를 사용하면 그냥 텍스트로 인식한다. 브라우저에는 표시가 안된다.*@
        <div>나이 : @if (age % 2 == 0) { <text>짝수</text> } else { <text>홀수</text> } </div>

        @if (age % 2 == 0)
        {
            @:나이는 @age 이며 짝수입니다.
        }
        

        @*이메일을 표시해도 알아서 레이저가 아님을 판단한다.*@
        <div>이메일 : kimstar@kimstar.pe.kr</div>

        @*골뱅이를 표시하고 싶으면 두개*@
        <div>트위터 : @@byul124</div>

        @*userName 뒤에 .을 붙이면 속성과 헷갈린다. @() 사용하여 정확하게 하자. *@
        <div>
            <img src="@(userName).jpg" alt="@userName" />
        </div>

        @*그대로 인코딩되어 화면에 표시된다.*@
        <div>
            @js
        </div>

        @*인코딩하지 않고 그대로 출력한다.*@
        <div>
            @Html.Raw(js)
        </div>
            
        <div>
            @DateTime.Now.ToString()
        </div>
            
    </div>
</body>
</html>

 

 

사용자 삽입 이미지
실행결과

슬라이드

Notice

  • 이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용할 수 있습니다. 크리에이티브 커먼즈 라이선스
  • 저작권과 관련된 파일요청 및 작업요청을 받지 않습니다.
  • 댓글에 대한 답변은 늦을 수도 있습니다.
  • 답글 남기기

    이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다