asp.net razor
TRANSCRIPT
ASP.NET Razor
24-1 김상윤
Contents
• Razor 란 ?• Razor 작동 구조• Razor 기초문법• 공통 레이아웃• 공통 모듈
Razor• Razor Syntax??- 웹 사이트 개발을 위한 스크립트 구문- ASP.NET 의 새로운 View 엔진- 새로운 구문이다 ! 그렇지만 어색하지
않다 !!
기반 언어 (C# & VB) 를 그대로 사용
Razor
를 넣는다 .
코드에
“@”
HTML
Razor 작동 구조ASP.NET
.NET Framework
Razor 기초문법• 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) 대 / 소문자 구분 , 변수 선언 필수 , 구문 종료
표시 (‘;’)
Razor 기초문법
• 코드 블록- “{ }” 를 활용하여 블록 지정
[ 한 줄 형식의 코드 블록 ]
[ 여러 줄 형식의 코드 블록 ]
@{ string site = “ASP.NET”; }@{ string id = “Razor”; }
@{ string site = “ASP.NET”; string id = “Razor”;}
Razor 기초문법
• 변수 출력- “@” 기호를 변수 앞에 붙여주는 형태- 코드 블록 바깥쪽 / 안쪽 모두 동일하게
사용
[ 코드 블록 바깥쪽에서의 변수 출력 ]
[ 코드 블록 안쪽에서의 변수 출력 ]
<span> 오늘 날짜와 시간은 @DateTime.Now 입니다 .</span>
@{ string today = DateTime.Now.ToString(); <span> 오늘 날짜와 시간은 @today 입니다 .</span>}
Razor 기초문법
• 주석문- Razor 의 주석문은 서버 측 주석 ( 페이지 실행시
렌더링 되지 않음 )[ 코드 블록 바깥쪽에서의 주석 표현 ]
[ 코드 블록 안쪽에서의 주석 표현 ]
@* 한 줄 주석문 ( 코드 바깥쪽 ) *@@* 여러 줄 주석문 ( 코드 바깥쪽 )*@
@{ // 한 줄 주석문 ( 코드 안쪽 ) /* 여러 줄 주석문 ( 코드 안쪽 ) */ }
Razor 기초문법
• 코드 블록 내 마크업 태그 출력- 별다른 처리 없이 태그 형식 그대로 사용- 닫는 태그가 반드시 필요하다 !!@{ string site = “ASP.NET”; string id = “Razor”; <span> 제가 활동하는 커뮤니티는 @site 이고 , <br /> 저의 커뮤니티 아이디는 @id 입니다 . </span>}
@{ string site = “ASP.NET”; string id = “Razor”; <span> 제가 활동하는 커뮤니티는 @site 이고 , <br /> 저의 커뮤니티 아이디는 @id 입니다 .}
Razor 기초문법
• 코드 블록 내 일반 텍스트 출력- 코드 블록 내에서 마크업 태그가 동반되지 않은 일반
텍스트가 존재하면 서버 측 코드로 판단- 일반 텍스트 출력을 위한 구문 사용
[ <text></text> 구문 사용 ]
[ 또 다른 일반 텍스트 출력 구문 : “@:” ]
@{ <text>ASP.NET Razor 문법에 대해 배워봅시다 !!</text>}
@{ @:ASP.NET Razor 문법에 대해 배워봅시다 !!}
Razor 기초문법
• “@” 기호를 출력하는 경우- “@” 기호가 키워드이기 때문에 바로 출력은
불가- “@” 기호를 두 번 넣어주는 방식 사용- 단 , E-mail 형식인 경우에는 상관없음
[ “@” 기호 출력 ]
[ E-mail 형식 출력 ]
@{ <text>Razor Syntax 의 핵심 키워드는 @@ 입니다 !!</text>}
@{ <text>E-mail : [email protected]</text>}
Razor 기초문법
• 변수가 포함된 문자열에 “ .” 기호를 출력하는 경우
- 변수 뒤에 “ .” 기호가 있으면 접근 연산자로 판단
- “@( )” 구문 사용@{ string title = “ASP”;
@:MicroSoft <strong>@(title).NET</strong> MVC Framework}
Razor 기초문법
• 그 외 기본적인 코드 작성 문법 모두 동일- 기반 언어의 코드 작성 문법을 그대로 사용- 변수 , 연산자 , 분기문 , 반복문 , 제어문 등
[ IF 문 ] [ FOREACH 문 ]
@{ bool isCheck = true; string message = string.Empty;
if(isCheck) { message = “ 체크 완료 !”; } else { message = “ 체크 미완료 !”; }}
@{ string[] speakers = {“ 김상윤” , “이정훈” };
foreach (string item in speakers) { @item; }}
Razor 기초문법
• 주의사항 !!- 코드 블록 지정 시 “ @” 기호와 “ {“ 기호 사이에는 공백이나
줄 바꿈이 존재할 수 없음
- 코드 블록 기호 ({ }) 를 생략할 수 없음
@ { <text> 이런 형태나 </text>}
@{ <text> 이런 형태 모두 안됩니다 .</text>}
// 중괄호는 필수 !if(isCheck) { message = “ 체크 완료 !”; } else { message = “ 체크 미완료 !”; }
// 이런 코드 작성은 안됩니다 !!!if(isCheck) message = “ 체크 완료 !”;else message = “ 체크 미완료 !”;
Razor 기초문법
레이아웃 요소HEADER
FOOTER
같은 HEADERFOOTER 를 사용
레이아웃 요소
코드가 한번 틀리기 시작하면
COPY & PASTE 도 지친다 .
레이아웃 요소
공통 레이아웃
• 반복되는 레이아웃 컨텐츠를 재사용– 웹 페이지의 Header 나 Footer 영역과 같이 여러
페이지에서 반복되는 컨텐츠를 재사용 .– Include(PHP, ASP, JSP) 와 유사한 개념 !• RenderPage( )• RenderBody( ) • RenderSection( )• 기본 레이아웃 사용
공통 레이아웃
• 재사용 가능한 페이지 구성– RenderPage( )
• 해당 영역에 다른 페이지의 컨텐츠를 렌더링
public override HelperResult RenderPage( string path, params Object[] data )
공통 레이아웃
• 재사용 가능한 페이지 구성– RenderPage( )
• 해당 영역에 다른 페이지의 컨텐츠를 렌더링
public override HelperResult RenderPage( string path, params Object[] data )
공통 레이아웃
public HelperResult RenderBody( )
• 구조화된 레이아웃 구성 : 레이아웃 페이지– Layout( )
• 레이아웃 페이지의 경로를 지정– RenderBody( )
• 레이아웃 페이지를 호출한 콘텐츠 페이지 렌더링
public override string Layout { get; set; }
공통 레이아웃
public HelperResult RenderBody( )
public override string Layout { get; set; }
• 구조화된 레이아웃 구성 : 레이아웃 페이지– Layout( )
• 레이아웃 페이지의 경로를 지정– RenderBody( )
• 레이아웃 페이지를 호출한 콘텐츠 페이지 렌더링
공통 레이아웃
public HelperResult RenderSection( string name )public HelperResult RenderSection( string name, bool required )
• 페이지 별로 특정 영역 렌더링– RenderSection( )
• 컨텐츠 페이지에서 명명된 섹션 컨텐츠 렌더링
공통 레이아웃
public HelperResult RenderSection( string name )public HelperResult RenderSection( string name, bool required )
• 페이지 별로 특정 영역 렌더링– RenderSection( )
• 컨텐츠 페이지에서 명명된 섹션 컨텐츠 렌더링
공통 레이아웃
• 기본 레이아웃 페이지 설정– _ViewStart.cshtml
• View 파일이 실행되기 이전에 먼저 실행되는 파일• 가장 먼저 실행되므로 기본 레이아웃 페이지 설정 가능
공통 모듈
• Helper : 도우미 메서드–자주 사용되는 기능 및 코드의 모듈화 .–유용한 기능의 헬퍼 추가 및 제작 가능 !
기본으로 제공되는 주요 Helper
HtmlHelperHTML 관련 작업 도우미 메서드
AjaxHelperAjax 작업 관련 도우미 메서드
UrlHelperURL 작업 관련 도우미 메서드
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 호출
Q & A
Thank you!