웹 템플릿에서 ASP.NET MVC 3 Web Application 을 선택 한 후, RazorSample 을 입력하고 확인버튼을 클릭합니다.
MVC 2 에서는 새 프로젝트 생성 화면에서 빈 프로젝트와 하나의 어플리케이션이 기본적으로 만들어져 있는 프로젝트를 선택하였는데요, 버전 3에서는 위 화면에서 선택하네요.
물론 단위 테스트 프로젝트 생성 여부도 같이 선택할 수 있습니다. 지금은 Empty 프로젝트로 생성한 후 진행하도록 하겠습니다. 완료가 되면, 다음과 같은 프로젝트 구조를 볼 수 있습니다.
새로운 확장자 cshtml과 새로운 파일 _ViewStart.cshtml, _Layout.cshtml 이 있습니다. cshtml이 razor 페이지의 확장자입니다. 새로운 두 파일은 마스터페이지라고 보시면 됩니다. 이 외에는 정말 아무것도 없네요. 우선 컨트롤러를 생성해보도록 하겠습니다. Home 컨트롤러를 생성해 보죠. 그리고 Index 액션메쏘드를 수정합니다.
publicclassHomeController : Controller
{
//
// GET: /Home/
publicActionResult Index()
{
ViewBag.Message = "ASP.NET MVC 3 뒷북시리즈입니다.";
return View();
}
}
ViewBag 이 보입니다. 이는 MVC 2 에서 소개되었던 ViewData 딕셔너리와 같은 역할을 합니다. MVC 2 에서는 위와 동일한 메시지를 전달하기 위해 다음과 같은 코드를 사용했죠.
ViewData[“Message”] = “ASP.NET MVC 3 뒷북시리즈입니다.”;
이를 통해 뷰 페이지에 데이터를 전달해주는 것입니다. 그렇다면 이 ViewBag 에서 다른 점은 무엇이냐? 데이터타입이 다이나믹이라는 것입니다. 그렇다면 다이나믹이라는 것은 또 무엇이냐? 사용하다보면 알게됩니다^^; 일단은 컴파일 시점에 타입을 체크하는 것이 아니라 런타임시에 체크를 한다는 것이라고만 알고 넘어가죠. 말이 더 어렵죠?
이번에 ViewBag이라는 이름 참 잘 지은 것 같습니다. 가방이죠. 뭔가를 넣겠다는 것이죠. 그냥 담고 싶은 것 이것저것 다 넣으세요. 허락할게요. 한번 넣어볼까요?
이제 뷰 페이지를 만들어보겠습니다. 이것 역시 간단합니다. 만들 뷰 페이지와 매치되는 액션메쏘드에서 마우스 우클릭하여 Add View 하시면 됩니다. 참 쉽죠잉~
기존과 달라진 점이라면 뷰 엔진을 선택할 수 있다는 것이네요. 그리고, 밑줄이 있는 메시지를 보면 그냥 공란으로 남겨둘 경우 _viewstart 파일을 사용한다네요. 새로운 파일 중 한가지가 여기서 보이네요. 나머지 _Layout.cshtml 파일은 _ViewStart.cshtml 파일을 열어보면, 확인할 수 있습니다.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
이제는 Index.cshtml 파일을 수정할 차례입니다.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>메시지: @ViewBag.Message</div>
<div>현재시간: @ViewBag.time</div>
<ul>
@foreach (int num in ViewBag.numbers)
{
<li>@num</li>
}
</ul>
@ <== 이것이 razor 문법의 핵심입니다. 예전 인라인 코드를 한결 깔끔하게 처리해주었습니다.
정말 점점 코드가 간결해지는 것 같습니다. 처음에는 <%= Html.Encode(ViewData[“Message”])%> 이랬던 코드가 <%: ViewData[“Message”]%> 와 같이 바뀌더니, 지금Razor뷰엔진을 통해서는 @ViewBag.Message 와 같이 간결해졌습니다.
@{} 는 이 괄호 안에 razor 코드를 쓰면 되는 거겠죠? ViewBag.Title 은 페이지의 타이틀을 의미합니다. 레이아웃 페이지를 보면 <head> 태그 안의 <title>에서 이를 입력하는 것을 확인할 수 있습니다. 나머지들도 보기에 불편함이 없으실 듯 합니다.
아래는 기존 코드방법과 레이저의 차이입니다.
<ul>
<%foreach (int num in ViewBag.numbers) { %>
<li><%: num %></li>
<% } %>
</ul>
è
<ul>
@foreach (int num in ViewBag.numbers)
{
<li>@num</li>
}
</ul>
조금 간단해진 것처럼 보이시나요? 이제 여기서 if 문을 통해 홀수와 짝수를 구분해 보도록 하겠습니다.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>메시지: @ViewBag.Message</div>
<div>현재시간 : @ViewBag.time</div>
<ul>
@foreach (int num in ViewBag.numbers)
{
if (num % 2 == 0)
{
<li>짝수 : @num</li>
}
else
{
<li>홀수 : @num</li>
}
}
</ul>
간단하죠? 보기에 불편함이 있으셔도 계속 레이저와의 만남을 갖게 되면 익숙해질 것입니다. 실행된 화면도 한번 살펴봐야겠죠?
어떠셨나요? 별거(?) 없죠? 다음 시간은 위에서 잠깐 살펴본 레이아웃 페이지에 대해 알아보도록 하겠습니다.
[MVC3 뒷북치기-2] 레이저 그 심플함이란
안녕하세요. 이번 시간은 MVC 3에 가볍게 추가된 레이저(Razor)에 대해 알아보겠습니다.
간단(?)하니까요. 살~짝 살펴볼까요?
먼저 레이저 면상은?
모두 ASP.NET MVC 3 가 준비되셨나요? 아직도 되어있지 않다면 설치부터 하세요!
자, 새 프로젝트를 열도록 하겠습니다.
웹 템플릿에서 ASP.NET MVC 3 Web Application 을 선택 한 후, RazorSample 을 입력하고 확인버튼을 클릭합니다.
MVC 2 에서는 새 프로젝트 생성 화면에서 빈 프로젝트와 하나의 어플리케이션이 기본적으로 만들어져 있는 프로젝트를 선택하였는데요, 버전 3에서는 위 화면에서 선택하네요.
물론 단위 테스트 프로젝트 생성 여부도 같이 선택할 수 있습니다. 지금은 Empty 프로젝트로 생성한 후 진행하도록 하겠습니다. 완료가 되면, 다음과 같은 프로젝트 구조를 볼 수 있습니다.
새로운 확장자 cshtml과 새로운 파일 _ViewStart.cshtml, _Layout.cshtml 이 있습니다. cshtml이 razor 페이지의 확장자입니다. 새로운 두 파일은 마스터페이지라고 보시면 됩니다.
이 외에는 정말 아무것도 없네요. 우선 컨트롤러를 생성해보도록 하겠습니다. Home 컨트롤러를 생성해 보죠.
그리고 Index 액션메쏘드를 수정합니다.
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
ViewBag.Message = "ASP.NET MVC 3 뒷북시리즈입니다.";
return View();
}
}
ViewBag 이 보입니다. 이는 MVC 2 에서 소개되었던 ViewData 딕셔너리와 같은 역할을 합니다.
MVC 2 에서는 위와 동일한 메시지를 전달하기 위해 다음과 같은 코드를 사용했죠.
ViewData[“Message”] = “ASP.NET MVC 3 뒷북시리즈입니다.”;
이를 통해 뷰 페이지에 데이터를 전달해주는 것입니다. 그렇다면 이 ViewBag 에서 다른 점은 무엇이냐? 데이터타입이 다이나믹이라는 것입니다. 그렇다면 다이나믹이라는 것은 또 무엇이냐? 사용하다보면 알게됩니다^^; 일단은 컴파일 시점에 타입을 체크하는 것이 아니라 런타임시에 체크를 한다는 것이라고만 알고 넘어가죠. 말이 더 어렵죠?
이번에 ViewBag 이라는 이름 참 잘 지은 것 같습니다. 가방이죠. 뭔가를 넣겠다는 것이죠. 그냥 담고 싶은 것 이것저것 다 넣으세요. 허락할게요. 한번 넣어볼까요?
ViewBag.Message = "ASP.NET MVC 3 뒷북시리즈입니다.";
ViewBag.time = DateTime.Now;
ViewBag.numbers = new int[] {1,2,3,4,5,6,7,8,9,0};
컴파일에는 아무 문제가 없습니다. 런타임시에 해당 속성들만 존재하면 됩니다. 간단하죠?
이제 뷰 페이지를 만들어보겠습니다. 이것 역시 간단합니다. 만들 뷰 페이지와 매치되는 액션메쏘드에서 마우스 우클릭하여 Add View 하시면 됩니다. 참 쉽죠잉~
기존과 달라진 점이라면 뷰 엔진을 선택할 수 있다는 것이네요. 그리고, 밑줄이 있는 메시지를 보면 그냥 공란으로 남겨둘 경우 _viewstart 파일을 사용한다네요. 새로운 파일 중 한가지가 여기서 보이네요. 나머지 _Layout.cshtml 파일은 _ViewStart.cshtml 파일을 열어보면, 확인할 수 있습니다.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
이제는 Index.cshtml 파일을 수정할 차례입니다.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>메시지: @ViewBag.Message</div>
<div>현재시간: @ViewBag.time</div>
<ul>
@foreach (int num in ViewBag.numbers)
{
<li>@num</li>
}
</ul>
@ <== 이것이 razor 문법의 핵심입니다. 예전 인라인 코드를 한결 깔끔하게 처리해주었습니다.
정말 점점 코드가 간결해지는 것 같습니다. 처음에는 <%= Html.Encode(ViewData[“Message”])%> 이랬던 코드가 <%: ViewData[“Message”]%> 와 같이 바뀌더니, 지금 Razor뷰엔진을 통해서는 @ViewBag.Message 와 같이 간결해졌습니다.
@{} 는 이 괄호 안에 razor 코드를 쓰면 되는 거겠죠? ViewBag.Title 은 페이지의 타이틀을 의미합니다. 레이아웃 페이지를 보면 <head> 태그 안의 <title>에서 이를 입력하는 것을 확인할 수 있습니다. 나머지들도 보기에 불편함이 없으실 듯 합니다.
아래는 기존 코드방법과 레이저의 차이입니다.
<ul>
<% foreach (int num in ViewBag.numbers) { %>
<li><%: num %></li>
<% } %>
</ul>
è
<ul>
@foreach (int num in ViewBag.numbers)
{
<li>@num</li>
}
</ul>
조금 간단해진 것처럼 보이시나요?
이제 여기서 if 문을 통해 홀수와 짝수를 구분해 보도록 하겠습니다.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>메시지: @ViewBag.Message</div>
<div>현재시간 : @ViewBag.time</div>
<ul>
@foreach (int num in ViewBag.numbers)
{
if (num % 2 == 0)
{
<li>짝수 : @num</li>
}
else
{
<li>홀수 : @num</li>
}
}
</ul>
간단하죠? 보기에 불편함이 있으셔도 계속 레이저와의 만남을 갖게 되면 익숙해질 것입니다.
실행된 화면도 한번 살펴봐야겠죠?
어떠셨나요? 별거(?) 없죠?
다음 시간은 위에서 잠깐 살펴본 레이아웃 페이지에 대해 알아보도록 하겠습니다.
'.NET > MVC 3 뒷북치기' 카테고리의 다른 글