Asp.net Razor

• Razor 란?
• Razor 작동 구조
• Razor 기초문법
• 공통 레이아웃
• 공통 모듈

• Razor Syntax??
- 웹 사이트 개발을 위한 스크립트 구문
- ASP.NET의 새로운 View 엔진
- 새로운 구문이다! 그렇지만 어색하지 않
다!!
기반 언어(C# & VB)를 그대로 사용

코드에
HTML
“@
”
를 넣는다.

Razor
Syntax
ASP.NET
.NET Framework

• Hello~ Razor!
- C#기반(.cshtml), VB기반(.vbhtml)
- Razor의 핵심 포인트는 “@” 기호
@{
string greeting = "Hello~ Razor!";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<h1>@greeting</h1>
</div>
</body>
</html>

- “@” 기호를 키워드로 사용하는 형식
- 기반 언어의 코드 작성 문법을 그대로 사
용
• 변수, 연산자, 분기문, 반복문, 제어문 등 코드 형식
일체
• 제약 조건도 동일
• Ex) 대/소문자 구분, 변수 선언 필수, 구문 종료 표시
(‘;’)

• 코드 블록
- “{ }” 를 활용하여 블록 지정
[한 줄 형식의 코드 블록]
@{ string site = “ASP.NET”; }
@{ string id = “Razor”; }
[여러 줄 형식의 코드 블록]
@{
string site = “ASP.NET”;
string id = “Razor”;
}

• 변수 출력
- “@” 기호를 변수 앞에 붙여주는 형태
- 코드 블록 바깥쪽 / 안쪽 모두 동일하게 사
용
[코드 블록 바깥쪽에서의 변수 출력]
<span>오늘 날짜와 시간은 @DateTime.Now 입니다.</span>
[코드 블록 안쪽에서의 변수 출력]
@{
string today = DateTime.Now.ToString();
<span>오늘 날짜와 시간은 @today 입니다.</span>
}

• 주석문
- Razor의 주석문은 서버 측 주석(페이지 실행시
렌더링 되지 않음)
[코드 블록 바깥쪽에서의 주석 표현]
@*한 줄 주석문(코드 바깥쪽) *@
@*
여러 줄 주석문(코드 바깥쪽)
*@
[코드 블록 안쪽에서의 주석 표현]
@{
//한 줄 주석문(코드 안쪽)
/*
여러 줄 주석문(코드 안쪽)
*/
}

• 코드 블록 내 마크업 태그 출력
- 별다른 처리 없이 태그 형식 그대로 사용
- 닫는 태그가 반드시 필요하다!!
@{
<span>
제가 활동하는 커뮤니티는 @site 이고, <br />
저의 커뮤니티 아이디는 @id 입니다.
</span>
}
@{
<span>
제가 활동하는 커뮤니티는 @site 이고, <br />
저의 커뮤니티 아이디는 @id 입니다.
}

• 코드 블록 내 일반 텍스트 출력
- 코드 블록 내에서 마크업 태그가 동반되지 않은 일반 텍
스트가 존재하면 서버 측 코드로 판단
- 일반 텍스트 출력을 위한 구문 사용
[ <text></text> 구문 사용 ]
@{
<text>ASP.NET Razor 문법에 대해 배워봅시다!!</text>
}
[ 또 다른 일반 텍스트 출력 구문 : “@:” ]
@{
@:ASP.NET Razor 문법에 대해 배워봅시다!!
}

• “@” 기호를 출력하는 경우
- “@” 기호가 키워드이기 때문에 바로 출력은 불
가
- “@” 기호를 두 번 넣어주는 방식 사용
- 단, E-mail 형식인 경우에는 상관없음
@{
[ “@” 기호 출력 ]
<text>Razor Syntax의 핵심 키워드는 @@입니다!!</text>
}
[ @{
E-mail 형식 출력 ]
<text>E-mail : Razor@mail.com</text>
}

• 변수가 포함된 문자열에 “.” 기호를 출력하는 경
우
- 변수 뒤에 “.” 기호가 있으면 접근 연산자로 판단
- “@( )” 구문 사용
@{
string title = “ASP”;
@:MicroSoft <strong>@(title).NET</strong> MVC Framework
}

• 그 외 기본적인 코드 작성 문법 모두 동일
- 기반 언어의 코드 작성 문법을 그대로 사용
- 변수, 연산자, 분기문, 반복문, 제어문 등
[ IF문 ] [ FOREACH문 ]
@{
bool isCheck = true;
string message = string.Empty;
if(isCheck) {
message = “체크 완료!”;
}
else {
message = “체크 미완료!”;
}
}
@{
string[] speakers = {“ 김 상 윤 ”,
“이정훈”};
foreach (string item in speakers)
{
@item;
}
}

• 주의사항!!
- 코드 블록 지정 시 “@” 기호와 “{“ 기호 사이에는 공백이나
줄 바꿈이 존재할 수 없음
@ {
<text>이런 형태나</text>
}
@
{
<text>이런 형태 모두 안됩니다.</text>
}
- 코드 블록 기호 ({ })를 생략할 수 없음
//중괄호는 필수!
if(isCheck) {
}
else {
}
//이런 코드 작성은 안됩니다!!!
if(isCheck)
else

같은 HEADER
FOOTER를 사용

코드가 한번 틀리기 시작하
면
COPY & PASTE도
지친다.

• 반복되는 레이아웃 컨텐츠를 재사용
– 웹 페이지의 Header나 Footer영역과 같이 여러 페이지
에서 반복되는 컨텐츠를 재사용.
– Include(PHP, ASP, JSP)와 유사한 개념!
• RenderPage( )
• RenderBody( )
• RenderSection( )
• 기본 레이아웃 사용

• 재사용 가능한 페이지 구성
– RenderPage( )
• 해당 영역에 다른 페이지의 컨텐츠를 렌더링
public override HelperResult
RenderPage( string path, params
Object[] data )

• 구조화된 레이아웃 구성 : 레이아웃 페이지
– Layout( )
• 레이아웃 페이지의 경로를 지정
– RenderBody( )
• 레이아웃 페이지를 호출한 콘텐츠 페이지 렌더링
public override string Layout { get;
set; }
public HelperResult
RenderBody( )

• 페이지 별로 특정 영역 렌더링
– RenderSection( )
• 컨텐츠 페이지에서 명명된 섹션 컨텐츠 렌더링
public HelperResult RenderSection( string name )
public HelperResult RenderSection( string name, bool
required )

• 기본 레이아웃 페이지 설정
– _ViewStart.cshtml
• View 파일이 실행되기 이전에 먼저 실행되는 파일
• 가장 먼저 실행되므로 기본 레이아웃 페이지 설정
가능

• Helper : 도우미 메서드
– 자주 사용되는 기능 및 코드의 모듈화.
– 유용한 기능의 헬퍼 추가 및 제작 가능 !
기본으로 제공되는 주요 Helper
HtmlHelper
HTML 관련 작업
도우미 메서드
AjaxHelper
Ajax 작업 관련
도우미 메서드
UrlHelper
URL 작업 관련
도우미 메서드
HtmlHelper의 주요 메서드
Raw HTML로 인코딩되지 않은 태그를 반환
Encode HTML로 인코딩된 문자열로 반환
ActionLink 지정된 가상 경로를 포함하는 앵커 요소(a) 반
환
TextBox 텍스트박스 input 요소를 반환
(<input type = “text” />
Password 패스워드 input 요소를 반환
(<input type = “password” />
CheckBox 체크박스 input 요소를 반환
(<input type = “checkbox” />

• Custom Helper : 직접 정의하여 사용
– Helper : 특정 레이아웃 반환
• Ex) 자주 사용하는 폼이나 태그 양식
– Functions : 클래스화된 메서드 형태
• Ex) 자주 사용되는 메서드
– App_code 폴더에 넣으면 프로젝트 전체에서 사용
가능!

• Functions
– @functions { } 구문 사용
– 외부 파일로 생성시 파일명이 클래스명으로 지정됨.
• Ex) Functions 정의 및 호출
@functions {
public static string CheckGender(string gender)
{
string value = string.Empty;
if (gender.Equals("M"))
value = "남자";
else
value = "여자“;
return value;
}
}
<p> 나는@MyFunctions.CheckGender(“M”) 입니다.</p>
functions 정의
Functions 호출

• Helper
– @helper { } 구문 사용
– 외부 파일로 생성시 파일명이 클래스명으로 지정됨.
• Ex) Helper 정의 및 호출
@helper ShowGreeting(string id)
{
<p>
<strong>안녕하세요! 저는@id 입니다!!</strong>
</p>
}
@MyHelper.ShowGreeting(“itist”)
Helper 정의
Helper 호출

Asp.net Razor

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Asp.net Razor (20)

Asp.net Razor