ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf

Microsoft Community Conference

Agenda
＞Razor Syntax? 누구냐? 너는!
＞일단 만나보자! Hello~ Razor!
＞Step 1 – 기본 구문 정복!
＞Step 2 – 집중 탐구! (애매할 때는 이렇게!)
＞Power Up! – 공통 레이아웃 (Layout Page)
＞Power Up! – 공통 모듈 (Helper)
＞Summary

Razor Syntax? 누구냐 너는?
＞웹 사이트 개발을 위한 스크립트 구문
＞ASP.NET의 새로운 View 엔진
• ASP.NET MVC Framework 기본 View 엔진으로 탑재
＞새로운 구문이다! 그렇지만 어색하지 않다!
• 기반 언어(C# & VB)를 그대로 지원
• 익숙한 Inline Script 형식!!! 스파게티 코드로의 퇴보? OTL
＞지금까지의 스파게티 코드와는 다르다! 극~복~
• 군더더기 소스코드, 다이어트에 성공한 몸짱!
＞Visual Studio와의 완벽한 호흡
• 코드 에러 검출, 코드 인텔리센스 지원 등
쉽게! 빠르게! 유연하게!

Razor Syntax? 누구냐 너는?
＞Razor Syntax의 포지션

일단 만나보자! Hello~ Razor!
＞남다른 Razor, 파일 확장자도 다르다!
• C#기반(.cshtml), VB기반(.vbhtml)
＞Razor의 핵심 포인트는 “@” 기호
• “@” 기호를 기억하라~
@{
string greeting = "Hello~ Razor!";
}
<!DOCTYPE html>
<html>
<head>
<title>일단 만나보자! Hello~ Razor!</title>
</head>
<body>
<div>
<h1>@greeting</h1>
</div>
</body>
</html>

- 일단 만나보자! Hello~ Razor! -

Step 1 - 기본 구문 정복 (1)
＞“@” 기호를 키워드로 사용하는 형식
＞기반 언어의 코드 작성 문법을 그대로 사용
• 변수, 연산자, 분기문, 반복문, 제어문 등 코드 형식 일체
• 제약 조건도 동일
– 대/소문자 구분, 변수 선언의 필수화, 구문 종료 표시(“;”) 등
＞코드 비하인드가 존재하지 않는 Inline Script

＞코드 블록
• “{ }” 를 활용하여 블록 지정
@{ string site = "Taeyo.NET"; }
@{ string id = "itist"; }
@{
string site = "Taeyo.NET";
string id = "itist";
}
- 한 줄 형식의 코드 블록 -
- 여러 줄 형식의 코드 블록 -

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

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

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

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

Step 2 – 집중 탐구 (1)
＞코드 블록 내 일반 텍스트 출력
• 코드 블록 안에서 마크업 태그가 동반되지 않은 일반 텍스
트가 존재하면 서버 측 코드로 판단
• 일반 텍스트 출력을 위한 구문 사용
– <text>일반 텍스트</text>
@{
<text>조금 늦었지만 새해 복 많이 받으세요!!</text>
}
@{
@:조금 늦었지만 새해 복 많이 받으세요!!
}
- <text></text> -
- 또 다른 일반 텍스트 출력 구문 : “@:” -

＞“@” 기호를 출력하는 경우
• “@” 기호가 키워드이기 때문에 바로 출력은 불가
• “@” 기호를 두 번 넣어주는 방식으로 해결
• E-mail 형식인 경우에는 별다른 처리 없이 출력 가능
@{
<text>Razor Syntax의 핵심 키워드는 @@ 입니다!</text>
}
@{
<text>안녕하세요! 제 E-mail 주소는 itist@live.co.kr 입니다!!</text>
}
- “@” 기호 출력 -
- E-mail 형식 출력 -

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

＞안 되는 것도 있다!
• 코드 블록 지정 시 “@” 기호와 “{” 기호 사이에는 공백이나
줄 바꿈이 존재할 수 없음
• 코드 블럭 기호 ({중괄호})를 생략할 수 없음
@ {
<text>이런 형태는 안 되요!</text>
}
@
{
<text>이런 형태도 안 되구요!</text>
}
// 이런 코드 작성은 안 되요!
if (isCheck)
else
// 중괄호는 필수!
if (isCheck) {
} else {
}
X O

Power Up! – 공통 레이아웃 (1)
＞반복되는 레이아웃 컨텐츠를 재사용
• 웹 페이지의 헤더나 푸터 영역과 같이 여러 페이지에서 반
복되는 컨텐츠를 재사용
• Include(Classic ASP), MasterPage(ASP.NET)와 유사한 개념

＞재사용 가능한 페이지 구성
• 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 파일이 실행되기 이전에 먼저 실행되는 파일
– 가장 먼저 실행되기 때문에 공통적인 레이아웃 설정 가능

Power Up! – 공통 모듈 (1)
＞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 : 특정 레이아웃을 반환하는 형태
– 자주 사용되는 폼이나 태그 양식 라이브러리
• Functions : 클래스화된 메서드 형태
– 자주 사용되는 메서드 라이브러리
• App_Code 폴더에 생성하면 프로젝트 전체에서 사용 가능

＞Helper
• @helper { } 구문 사용
• 외부 파일로 생성시 파일명이 클래스명으로 지정됨
@* SiteHelper.cshtml : Helper 정의 *@
@helper ShowGreeting(string id) {
<p>
<strong>안녕하세요! 저는 @id 입니다!!</strong>
</p>
}
@* 페이지에서 사용 예 *@
@SiteHelper.ShowGreeting("itist“)

＞Functions
• @functions { } 구문 사용
• 외부 파일로 생성시 파일명이 클래스명으로 지정됨
@* SiteFunctions.cshtml : Functions 정의 *@
@functions {
public static string CheckGender(string gender)
{
var value = string.Empty;
if (gender.Equals("M"))
value = "남자";
else
value = "여자“;
return value;
}
}
@* 페이지에서 사용 예 *@
<p>제 성별은 @SiteHelper.CheckGender("M") 입니다.</p>

Summary
＞Razor Syntax는…
• 최강의 ASP.NET MVC View 엔진!
• 무엇을 상상해도 그 이상으로 쉽다!
• 어라? 스파게티 코드로의 퇴보? No! No! 사용하기 나름!
• 미뤄오셨나요? 그렇다면 이제는 하셔야 할 때입니다!
무조건 파이팅 입니다!

ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf

ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf

ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf

Recomendados

Más contenido relacionado

Similar a ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf

Similar a ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf(20)

Más de SangHoon Han

Más de SangHoon Han(20)

ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf